Code review cleanup

CHANGELOG.txt

@@ -35,6 +35,7 @@ Changelog
  * Replace `data_json` `TextField` with `data` `JSONField` in `BaseLogEntry` (Sage Abdullah)
  * Split up linting / formatting tasks in Makefile into client and server components (Hitansh Shah)
  * Add support for embedding Instagram reels (Luis Nell)
+ * Use Django’s JavaScript catalog feature to manage translatable strings in JavaScript (Karl Hobley)
  * Fix: When using `simple_translations` ensure that the user is redirected to the page edit view when submitting for a single locale (Mitchel Cabuloy)
  * Fix: When previewing unsaved changes to `Form` pages, ensure that all added fields are correctly shown in the preview (Joshua Munn)
  * Fix: When Documents (e.g. PDFs) have been configured to be served inline via `WAGTAILDOCS_CONTENT_TYPES` & `WAGTAILDOCS_INLINE_CONTENT_TYPES` ensure that the filename is correctly set in the `Content-Disposition` header so that saving the files will use the correct filename (John-Scott Atlakson)

client/extract-translatable-strings.js

@@ -25,7 +25,7 @@ extractor
       },
     }),
   ])
-  .parseFilesGlob('./src/**/*.@(ts|js|tsx|jsx)');
+  .parseFilesGlob('./src/**/*.@(ts|js|tsx)');
 
 extractor.savePotFile('../wagtail/admin/locale/en/LC_MESSAGES/djangojs.po');
 

client/src/components/CommentApp/utils/storybook.tsx

@@ -12,7 +12,6 @@ import {
 } from '../state/comments';
 import { LayoutController } from '../utils/layout';
 import { getNextCommentId } from './sequences';
-import { defaultStrings } from '../main';
 
 import CommentComponent from '../components/Comment/index';
 
@@ -50,7 +49,6 @@ export function RenderCommentsForStorybook({
       comment={comment}
       isVisible={true}
       isFocused={comment.localId === state.comments.focusedComment}
-      strings={defaultStrings}
     />
   ));
 

client/src/components/Sidebar/Sidebar.test.js

@@ -3,10 +3,8 @@ import { shallow } from 'enzyme';
 import { Sidebar } from './Sidebar';
 
 describe('Sidebar', () => {
-  const strings = {};
-
   it('should render with the minimum required props', () => {
-    const wrapper = shallow(<Sidebar modules={[]} strings={strings} />);
+    const wrapper = shallow(<Sidebar modules={[]} />);
 
     expect(wrapper).toMatchSnapshot();
   });
@@ -15,11 +13,7 @@ describe('Sidebar', () => {
     const onExpandCollapse = jest.fn();
 
     const wrapper = shallow(
-      <Sidebar
+      <Sidebar modules={[]} onExpandCollapse={onExpandCollapse} />,
-        modules={[]}
-        onExpandCollapse={onExpandCollapse}
-        strings={strings}
-      />,
     );
 
     // default expanded (non-slim)
@@ -43,11 +37,7 @@ describe('Sidebar', () => {
     const onExpandCollapse = jest.fn();
 
     const wrapper = shallow(
-      <Sidebar
+      <Sidebar modules={[]} onExpandCollapse={onExpandCollapse} />,
-        modules={[]}
-        onExpandCollapse={onExpandCollapse}
-        strings={strings}
-      />,
     );
 
     // default not expanded

client/src/components/Sidebar/__snapshots__/Sidebar.test.js.snap

@@ -15,6 +15,7 @@ exports[`Sidebar should render with the minimum required props 1`] = `
       >
         <button
           aria-expanded="true"
+          aria-label="Toggle sidebar"
           className="
                 w-mr-4
                 button
@@ -41,6 +42,7 @@ exports[`Sidebar should render with the minimum required props 1`] = `
   </div>
   <button
     aria-expanded="false"
+    aria-label="Toggle sidebar"
     className="button sidebar-nav-toggle"
     onClick={[Function]}
     type="button"

client/src/components/Sidebar/menu/SubMenuItem.test.js

@@ -3,7 +3,6 @@ import { shallow } from 'enzyme';
 import { SubMenuItem } from './SubMenuItem';
 
 describe('SubMenuItem', () => {
-  const strings = {};
   const state = { activePath: '.reports.workflows', navigationPath: '' };
 
   it('should render with the minimum required props', () => {
@@ -13,7 +12,6 @@ describe('SubMenuItem', () => {
         items={[]}
         state={state}
         path=".reports"
-        strings={strings}
       />,
     );
 
@@ -30,7 +28,6 @@ describe('SubMenuItem', () => {
         items={[]}
         state={state}
         path=".reports"
-        strings={strings}
       />,
     );
 

client/src/components/Sidebar/modules/MainMenu.test.js

@@ -3,7 +3,6 @@ import { shallow } from 'enzyme';
 import { Menu } from './MainMenu';
 
 describe('Menu', () => {
-  const strings = {};
   const user = { avatarUrl: 'https://gravatar/profile' };
   const onAccountExpand = jest.fn();
 
@@ -12,7 +11,6 @@ describe('Menu', () => {
       <Menu
         accountMenuItems={[]}
         menuItems={[]}
-        strings={strings}
         user={user}
         onAccountExpand={onAccountExpand}
       />,
@@ -26,7 +24,6 @@ describe('Menu', () => {
       <Menu
         accountMenuItems={[]}
         menuItems={[]}
-        strings={strings}
         user={user}
         onAccountExpand={onAccountExpand}
       />,

client/src/components/Sidebar/modules/WagtailBranding.tsx

@@ -108,7 +108,7 @@ export class WagtailBrandingModuleDefinition implements ModuleDefinition {
     this.homeUrl = homeUrl;
   }
 
-  render({ strings, slim, key, navigate, currentPath }) {
+  render({ slim, key, navigate, currentPath }) {
     return (
       <WagtailBranding
         key={key}

client/src/components/Sidebar/modules/__snapshots__/MainMenu.test.js.snap

@@ -3,6 +3,7 @@
 exports[`Menu should render with the minimum required props 1`] = `
 <Fragment>
   <nav
+    aria-label="Main menu"
     className="sidebar-main-menu"
   >
     <ul
@@ -13,12 +14,14 @@ exports[`Menu should render with the minimum required props 1`] = `
     className="sidebar-footer sidebar-footer--visible"
   >
     <ForwardRef(TippyWrapper)
+      content="Edit your account"
       disabled={true}
       placement="right"
     >
       <button
         aria-expanded="false"
         aria-haspopup="menu"
+        aria-label="Edit your account"
         className="
             sidebar-footer__account
             w-bg-primary
@@ -36,6 +39,7 @@ exports[`Menu should render with the minimum required props 1`] = `
             focus:w-bg-primary-200
             w-transition"
         onClick={[Function]}
+        title="Edit your account"
         type="button"
       >
         <div

docs/releases/3.0.md

@@ -57,6 +57,7 @@ The panel types `StreamFieldPanel`, `RichTextFieldPanel`, `ImageChooserPanel`, `
  * Add ability for `StreamField` to use `JSONField` to store data, rather than `TextField` (Sage Abdullah)
  * Split up linting / formatting tasks in Makefile into client and server components (Hitansh Shah)
  * Add support for embedding Instagram reels (Luis Nell)
+ * Use Django’s JavaScript catalog feature to manage translatable strings in JavaScript (Karl Hobley)
 
 
 ### Bug fixes

package-lock.json

@@ -52,6 +52,7 @@
         "enzyme-to-json": "^3.6.2",
         "eslint": "^8.5.0",
         "expose-loader": "^3.1.0",
+        "gettext-extractor": "^3.5.3",
         "jest": "^26.6.3",
         "mini-css-extract-plugin": "^2.4.5",
         "postcss": "^8.4.7",
@@ -13984,6 +13985,12 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css-selector-parser": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-1.4.1.tgz",
+      "integrity": "sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==",
+      "dev": true
+    },
     "node_modules/css-shorthand-properties": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/css-shorthand-properties/-/css-shorthand-properties-1.1.1.tgz",
@@ -17365,6 +17372,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/gettext-extractor": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/gettext-extractor/-/gettext-extractor-3.5.4.tgz",
+      "integrity": "sha512-iK4tSnteSw+pFMts43OP8hUnsOklbkxz3ytWqru7dPf8Ec3uzTYv1aw70ojAvKItmofpj1ibfY7sZWsdSN6zIw==",
+      "dev": true,
+      "dependencies": {
+        "@types/glob": "5 - 7",
+        "@types/parse5": "^5",
+        "css-selector-parser": "^1.3",
+        "glob": "5 - 7",
+        "parse5": "5 - 6",
+        "pofile": "1.0.x",
+        "typescript": "2 - 4"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/github-slugger": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.4.0.tgz",
@@ -22902,6 +22927,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/pofile": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pofile/-/pofile-1.0.11.tgz",
+      "integrity": "sha512-Vy9eH1dRD9wHjYt/QqXcTz+RnX/zg53xK+KljFSX30PvdDMb2z+c6uDUeblUGqqJgz3QFsdlA0IJvHziPmWtQg==",
+      "dev": true
+    },
     "node_modules/polished": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/polished/-/polished-4.1.4.tgz",
@@ -40465,6 +40496,12 @@
         "nth-check": "^2.0.1"
       }
     },
+    "css-selector-parser": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-1.4.1.tgz",
+      "integrity": "sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==",
+      "dev": true
+    },
     "css-shorthand-properties": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/css-shorthand-properties/-/css-shorthand-properties-1.1.1.tgz",
@@ -43136,6 +43173,21 @@
       "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=",
       "dev": true
     },
+    "gettext-extractor": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/gettext-extractor/-/gettext-extractor-3.5.4.tgz",
+      "integrity": "sha512-iK4tSnteSw+pFMts43OP8hUnsOklbkxz3ytWqru7dPf8Ec3uzTYv1aw70ojAvKItmofpj1ibfY7sZWsdSN6zIw==",
+      "dev": true,
+      "requires": {
+        "@types/glob": "5 - 7",
+        "@types/parse5": "^5",
+        "css-selector-parser": "^1.3",
+        "glob": "5 - 7",
+        "parse5": "5 - 6",
+        "pofile": "1.0.x",
+        "typescript": "2 - 4"
+      }
+    },
     "github-slugger": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.4.0.tgz",
@@ -47331,6 +47383,12 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "pofile": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pofile/-/pofile-1.0.11.tgz",
+      "integrity": "sha512-Vy9eH1dRD9wHjYt/QqXcTz+RnX/zg53xK+KljFSX30PvdDMb2z+c6uDUeblUGqqJgz3QFsdlA0IJvHziPmWtQg==",
+      "dev": true
+    },
     "polished": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/polished/-/polished-4.1.4.tgz",