Manual linting fixes and fix hardcoded translations

.eslintrc

@@ -27,13 +27,16 @@
         "allowBlockStart": false
       }
     ],
+    "babel/no-unused-expressions": "off",
     "import/named": "off",
     "import/no-named-as-default": "off",
     "react/button-has-type": "off",
     "react/no-array-index-key": "off",
     "react/jsx-fragments": ["error", "element"],
     "shopify/jsx-no-complex-expressions": "off",
+    "shopify/jsx-prefer-fragment-wrappers": "off",
     "shopify/no-ancestor-directory-import": "error",
+    "shopify/react-prefer-private-members": "off",
     "jsx-a11y/label-has-for": [
       2,
       {
@@ -45,6 +48,7 @@
     ],
     "jsx-a11y/no-autofocus": "off",
     "jsx-a11y/anchor-has-content": "off",
+    "jsx-a11y/control-has-associated-label": "off",
     "jsx-a11y/role-supports-aria-props": "off",
     "jsx-a11y/mouse-events-have-key-events": "off",
     "jsx-a11y/click-events-have-key-events": "off",
@@ -55,20 +59,24 @@
     {
       "files": ["**/*.test.{ts,tsx}"],
       "rules": {
+        "jest/no-truthy-falsy": "off",
+        "shopify/jsx-no-hardcoded-content": "off",
         "shopify/no-ancestor-directory-import": "off"
       }
     },
     {
       "files": ["examples/**/*.js"],
       "rules": {
         "import/no-extraneous-dependencies": "off",
-        "import/no-unresolved": "off"
+        "import/no-unresolved": "off",
+        "shopify/jsx-no-hardcoded-content": "off"
       }
     },
     {
       "files": ["playground/Playground.tsx"],
       "rules": {
         "react/prefer-stateless-function": "off",
+        "shopify/jsx-no-hardcoded-content": "off",
         "shopify/react-initialize-state": "off"
       }
     }

examples/browserify/src/App.js

@@ -36,6 +36,10 @@ class App extends Component {
       {label: 'I consent to receiving emails', value: 'false2'},
     ];
 
+    const accountMarkup = this.state.connected
+      ? this.disconnectAccountMarkup()
+      : this.connectAccountMarkup();
+
     return (
       <AppProvider>
         <Page
@@ -58,7 +62,7 @@ class App extends Component {
               </SettingToggle>
             </Layout.AnnotatedSection>
 
-            {this.renderAccount()}
+            {accountMarkup}
 
             <Layout.AnnotatedSection
               title="Form"
@@ -173,12 +177,6 @@ class App extends Component {
       </Layout.AnnotatedSection>
     );
   }
-
-  renderAccount() {
-    return this.state.connected
-      ? this.disconnectAccountMarkup()
-      : this.connectAccountMarkup();
-  }
 }
 
 export default App;

examples/create-react-app/src/App.js

@@ -38,6 +38,10 @@ class App extends Component {
       {label: 'I consent to receiving emails', value: 'false2'},
     ];
 
+    const accountMarkup = this.state.connected
+      ? this.disconnectAccountMarkup()
+      : this.connectAccountMarkup();
+
     return (
       <Page
         title="Polaris"
@@ -59,7 +63,7 @@ class App extends Component {
             </SettingToggle>
           </Layout.AnnotatedSection>
 
-          {this.renderAccount()}
+          {accountMarkup}
 
           <Layout.AnnotatedSection
             title="Form"
@@ -173,12 +177,6 @@ class App extends Component {
       </Layout.AnnotatedSection>
     );
   }
-
-  renderAccount() {
-    return this.state.connected
-      ? this.disconnectAccountMarkup()
-      : this.connectAccountMarkup();
-  }
 }
 
 export default App;

examples/webpack/src/App.js

@@ -36,6 +36,10 @@ class App extends Component {
       {label: 'I consent to receiving emails', value: 'false2'},
     ];
 
+    const accountMarkup = this.state.connected
+      ? this.disconnectAccountMarkup()
+      : this.connectAccountMarkup();
+
     return (
       <AppProvider>
         <Page
@@ -58,7 +62,7 @@ class App extends Component {
               </SettingToggle>
             </Layout.AnnotatedSection>
 
-            {this.renderAccount()}
+            {accountMarkup}
 
             <Layout.AnnotatedSection
               title="Form"
@@ -173,12 +177,6 @@ class App extends Component {
       </Layout.AnnotatedSection>
     );
   }
-
-  renderAccount() {
-    return this.state.connected
-      ? this.disconnectAccountMarkup()
-      : this.connectAccountMarkup();
-  }
 }
 
 export default App;

src/components/AppProvider/utilities/Intl/tests/translate.test.ts

@@ -36,7 +36,9 @@ describe('translate()', () => {
     it('throws an error for a missing replacement', () => {
       expect(() =>
         translateWithReplacements('foo {next}', {notNext: 'bar'}),
-      ).toThrow();
+      ).toThrow(
+        `No replacement found for key 'next'. The following replacements were passed: 'notNext'`,
+      );
     });
   });
 });

src/components/Checkbox/Checkbox.tsx

@@ -122,7 +122,7 @@ class Checkbox extends React.PureComponent<CombinedProps, never> {
     );
 
     return (
-      /* eslint-disable jsx-a11y/no-redundant-roles, jsx-a11y/role-has-required-aria-props */
+      /* eslint-disable jsx-a11y/no-redundant-roles */
       <Choice
         id={id}
         label={label}
@@ -158,7 +158,7 @@ class Checkbox extends React.PureComponent<CombinedProps, never> {
           </span>
         </span>
       </Choice>
-      /* eslint-enable jsx-a11y/no-redundant-roles, jsx-a11y/role-has-required-aria-props */
+      /* eslint-enable jsx-a11y/no-redundant-roles */
     );
   }
 }

src/components/ChoiceList/tests/ChoiceList.test.tsx

@@ -271,21 +271,15 @@ describe('<ChoiceList />', () => {
       const choiceElements = shallowWithAppProvider(
         <ChoiceList selected={[]} choices={choices} />,
       ).find(RadioButton);
-      let name: string;
+      const name = choiceElements.at(0).prop('name');
+      expect(typeof name).toBe('string');
 
       choiceElements.forEach((choiceElement) => {
-        const choiceName = choiceElement.prop<string>('name');
-        if (name == null) {
-          name = choiceName;
-        } else {
-          expect(choiceName).toBe(name);
-        }
-
-        expect(typeof choiceName).toBe('string');
+        expect(choiceElement.prop('name')).toBe(name);
       });
     });
 
-    it('uses the same name for every choice', () => {
+    it('uses the same name for choices', () => {
       const name = 'MyChoiceList';
       const choiceElements = shallowWithAppProvider(
         <ChoiceList name={name} selected={[]} choices={choices} />,

src/components/DatePicker/DatePicker.tsx

@@ -144,7 +144,6 @@ export class DatePicker extends React.PureComponent<CombinedProps, State> {
                 showPreviousYear,
               },
             )}
-            // eslint-disable-next-line react/jsx-no-bind
             onClick={this.handleMonthChangeClick.bind(
               null,
               showPreviousMonth,
@@ -158,7 +157,6 @@ export class DatePicker extends React.PureComponent<CombinedProps, State> {
               nextMonth,
               nextYear,
             })}
-            // eslint-disable-next-line react/jsx-no-bind
             onClick={this.handleMonthChangeClick.bind(
               null,
               showNextMonth,

src/components/DatePicker/components/Day/Day.tsx

@@ -68,14 +68,12 @@ export class Day extends React.PureComponent<CombinedProps, never> {
 
     return (
       <button
-        // eslint-disable-next-line react/jsx-no-bind
         onFocus={onFocus.bind(null, day)}
         type="button"
         ref={this.setNode}
         tabIndex={tabIndex}
         className={className}
         onMouseOver={handleHover}
-        // eslint-disable-next-line react/jsx-no-bind
         onClick={handleClick}
         aria-label={ariaLabel}
         aria-selected={selected}

src/components/DatePicker/components/Month/Month.tsx

@@ -91,7 +91,6 @@ function Month({
     if (day == null) {
       const lastDayOfMonth = new Date(year, (month as number) + 1, 0);
       return (
-        // eslint-disable-next-line react/jsx-no-bind
         <Day key={dayIndex} onHover={onHover.bind(null, lastDayOfMonth)} />
       );
     }

src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx

@@ -117,6 +117,6 @@ describe('<FileUpload />', () => {
         <FileUpload actionTitle={actionTitle} actionHint={actionHint} />
       ),
     });
-    expect(fileUpload.props()).toEqual({actionTitle, actionHint});
+    expect(fileUpload.props()).toStrictEqual({actionTitle, actionHint});
   });
 });

src/components/Frame/components/Loading/Loading.tsx

@@ -14,7 +14,7 @@ const INITIAL_STEP = 10;
 const STUCK_THRESHOLD = 99;
 
 export default class Loading extends React.Component<Props, State> {
-  state = {
+  state: State = {
     progress: 0,
     step: INITIAL_STEP,
     animation: null,

src/components/Frame/components/Toast/tests/Toast.test.tsx

@@ -111,26 +111,40 @@ describe('<Toast />', () => {
       expect(spy).toHaveBeenCalled();
     });
 
-    it('is called when the escape key is pressed', () => {
+    describe('events', () => {
       const listenerMap: HandlerMap = {};
-      jest
-        .spyOn(document, 'addEventListener')
-        .mockImplementation((event, cb) => {
-          listenerMap[event] = cb;
-        });
 
-      const spy = jest.fn();
-      mountWithAppProvider(<Toast content="Image uploaded" onDismiss={spy} />);
-
-      listenerMap.keyup({keyCode: Key.Escape});
-
-      jest
-        .spyOn(document, 'removeEventListener')
-        .mockImplementation((event) => {
-          listenerMap[event] = noop;
-        });
-
-      expect(spy).toHaveBeenCalled();
+      beforeEach(() => {
+        jest
+          .spyOn(document, 'addEventListener')
+          .mockImplementation((evt, cb) => {
+            listenerMap[evt] = cb;
+          });
+
+        jest
+          .spyOn(document, 'removeEventListener')
+          .mockImplementation((event) => {
+            listenerMap[event] = noop;
+          });
+      });
+
+      afterEach(() => {
+        (document.addEventListener as jest.Mock).mockRestore();
+        (document.removeEventListener as jest.Mock).mockRestore();
+
+        Object.keys(listenerMap).forEach((key) => delete listenerMap[key]);
+      });
+
+      it('is called when the escape key is pressed', () => {
+        const spy = jest.fn();
+        mountWithAppProvider(
+          <Toast content="Image uploaded" onDismiss={spy} />,
+        );
+
+        listenerMap.keyup({keyCode: Key.Escape});
+
+        expect(spy).toHaveBeenCalled();
+      });
     });
 
     it('is called after the duration is reached', () => {

src/components/KeypressListener/tests/KeypressListener.test.tsx

@@ -8,8 +8,6 @@ interface HandlerMap {
   [eventName: string]: (event: any) => void;
 }
 
-const originalAddEventListener = document.addEventListener;
-const originalRemoveEventListener = document.removeEventListener;
 const listenerMap: HandlerMap = {};
 
 describe('<KeypressListener />', () => {
@@ -24,8 +22,8 @@ describe('<KeypressListener />', () => {
   });
 
   afterEach(() => {
-    document.addEventListener = originalAddEventListener;
-    document.removeEventListener = originalRemoveEventListener;
+    (document.addEventListener as jest.Mock).mockRestore();
+    (document.removeEventListener as jest.Mock).mockRestore();
   });
 
   it('attaches a listener for the given key on mount', () => {

src/components/Navigation/components/UserMenu/UserMenu.tsx

@@ -24,7 +24,7 @@ interface State {
 
 /** @deprecated Use <TopBar.UserMenu /> instead. */
 class UserMenu extends React.Component<Props, State> {
-  state = {
+  state: State = {
     open: false,
   };
 

src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx

@@ -103,7 +103,6 @@ export default class PopoverOverlay extends React.PureComponent<Props, never> {
         activator={activator}
         preferredPosition={preferredPosition}
         preferredAlignment={preferredAlignment}
-        // eslint-disable-next-line react/jsx-no-bind
         render={this.renderPopover.bind(this, transitionStatus)}
         fixed={fixed}
         onScrollOut={this.handleScrollOut}

src/components/RangeSlider/tests/RangeSlider.test.tsx

@@ -273,7 +273,7 @@ describe('<RangeSlider />', () => {
         '--Polaris-RangeSlider-progress': '25%',
         '--Polaris-RangeSlider-output-factor': 0.25,
       };
-      const actual = element.find('[style]').prop('style');
+      const actual = element.find('[style]').prop('style') as {};
 
       expect(expected).toStrictEqual(actual);
     });

src/components/ResourceList/ResourceList.tsx

@@ -429,7 +429,6 @@ export class ResourceList extends React.Component<CombinedProps, State> {
         <Button
           disabled={selectMode}
           icon={EnableSelectionMinor}
-          // eslint-disable-next-line react/jsx-no-bind
           onClick={this.handleSelectMode.bind(this, true)}
         >
           {intl.translate('Polaris.ResourceList.selectButtonText')}

src/components/ResourceList/components/BulkActions/BulkActions.tsx

@@ -63,7 +63,7 @@ const slideClasses = {
 export type CombinedProps = Props & WithAppProviderProps;
 
 export class BulkActions extends React.PureComponent<CombinedProps, State> {
-  state = {
+  state: State = {
     smallScreenPopoverVisible: false,
     largeScreenPopoverVisible: false,
     containerWidth: 0,
@@ -244,7 +244,6 @@ export class BulkActions extends React.PureComponent<CombinedProps, State> {
     const cancelButton = (
       <button
         className={cancelButtonClassName}
-        // eslint-disable-next-line react/jsx-no-bind
         onClick={this.setSelectMode.bind(this, false)}
         testID="btn-cancel"
         disabled={disabled}