Nickakhmetov/HMP-194 Apply fixes from lint config

context/.eslintrc.yml

@@ -60,6 +60,10 @@ overrides:
       - plugin:jest/recommended
       - plugin:jest-dom/recommended
       - plugin:testing-library/react
+    settings:
+      'import/resolver':
+        jest:
+          jestConfigFile: ./jest.config.js
     env:
       jest: true
       jest/globals: true

context/Dockerfile

@@ -13,7 +13,7 @@ COPY .npmrc .
 
 RUN npm ci
 
-COPY .babelrc .babelrc
+COPY tsconfig.json tsconfig.json
 COPY .swcrc .swcrc
 COPY build-utils build-utils
 COPY app app

context/app/static/js/components/Header/UserLinks/UserLinks.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React from 'react';
 import { render, screen } from 'test-utils/functions';
 import { fireEvent } from '@testing-library/react';
@@ -12,7 +11,7 @@ test('should be "User Profile" when not authenticated', () => {
   // In drop-down:
   expect(screen.getByText('My Lists')).toBeInTheDocument();
   expect(screen.getByText('Log In')).toBeInTheDocument();
-  expect(screen.queryByText('Log Out')).toBeNull();
+  expect(screen.queryByText('Log Out')).not.toBeInTheDocument();
 });
 
 test('should be logout button when authenticated', () => {
@@ -22,7 +21,7 @@ test('should be logout button when authenticated', () => {
   // In drop-down:
   expect(screen.getByText('My Lists')).toBeInTheDocument();
   expect(screen.getByText('Log Out')).toBeInTheDocument();
-  expect(screen.queryByText('Log In')).toBeNull();
+  expect(screen.queryByText('Log In')).not.toBeInTheDocument();
 });
 
 test('should display User when userEmail is empty', () => {

context/app/static/js/components/Providers.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FlaskDataContext, AppContext } from 'js/components/Contexts';
 import { ThemeProvider } from 'styled-components';
 import PropTypes from 'prop-types';
@@ -23,15 +23,25 @@ function Providers({
   isWorkspacesUser,
   flaskData,
 }) {
-  // injectFirst ensures styled-components takes priority over mui for styling
+  const appContext = useMemo(
+    () => ({
+      groupsToken,
+      workspacesToken,
+      isWorkspacesUser,
+      isAuthenticated,
+      userEmail,
+      ...endpoints,
+    }),
+    [groupsToken, workspacesToken, isWorkspacesUser, isAuthenticated, userEmail, endpoints],
+  );
+
   return (
+    // injectFirst ensures styled-components takes priority over mui for styling
     <StylesProvider generateClassName={generateClassName} injectFirst>
       <GlobalFonts />
       <MuiThemeProvider theme={theme}>
         <ThemeProvider theme={theme}>
-          <AppContext.Provider
-            value={{ groupsToken, workspacesToken, isWorkspacesUser, isAuthenticated, userEmail, ...endpoints }}
-          >
+          <AppContext.Provider value={appContext}>
             <FlaskDataContext.Provider value={flaskData}>
               <CssBaseline />
               <GlobalStyles />

context/app/static/js/components/cells/DatasetClusterChart/utils.spec.js

@@ -9,7 +9,7 @@ test.each([
   expect(removeUUIDFromOption(option, 'UUID')).toEqual(expected);
 });
 
-test('should ', () => {
+test('should', () => {
   expect(getOptionLabels(['123-UUID-xyz', 'abc-456-UUID'], 'UUID')).toStrictEqual({
     '123-UUID-xyz': '123-xyz',
     'abc-456-UUID': 'abc-456',

context/app/static/js/components/cells/DatasetClusterTooltip/DatasetClusterTooltip.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React from 'react';
 import { render, screen } from 'test-utils/functions';
 

context/app/static/js/components/cells/tutorial/CellsTutorial/CellsTutorial.jsx

@@ -63,6 +63,12 @@ function CellsTutorial({ setParametersButtonRef, runQueryButtonRef }) {
       setOpenStepIndex(1);
     }
   };
+  const {
+    palette: {
+      info: { dark: arrowColor },
+    },
+    zIndex: { tutorial: zIndex },
+  } = themeContext;
 
   return (
     <>
@@ -84,8 +90,8 @@ function CellsTutorial({ setParametersButtonRef, runQueryButtonRef }) {
         tooltipComponent={TutorialTooltip}
         styles={{
           options: {
-            arrowColor: themeContext.palette.info.dark,
-            zIndex: themeContext.zIndex.tutorial,
+            arrowColor,
+            zIndex,
             overlayColor: 'rgba(0, 0, 0, 0)',
           },
         }}

context/app/static/js/components/detailPage/Attribution/Attribution.spec.js

@@ -1,19 +1,18 @@
-/* eslint-disable import/no-unresolved */
 import React from 'react';
-import { render } from 'test-utils/functions';
+import { render, screen } from 'test-utils/functions';
 import Attribution from './Attribution';
 
 test('text displays properly', () => {
   const group_name = 'Fake TMC';
   const created_by_user_displayname = 'Fake Name';
   const created_by_user_email = '[email protected]';
-  const { getByText } = render(
+  render(
     <Attribution
       group_name={group_name}
       created_by_user_displayname={created_by_user_displayname}
       created_by_user_email={created_by_user_email}
     />,
   );
   const textToTest = ['Attribution', 'Group', 'Fake TMC', 'Registered by', 'Fake Name', '[email protected]'];
-  textToTest.forEach((text) => expect(getByText(text)).toBeInTheDocument());
+  textToTest.forEach((text) => expect(screen.getByText(text)).toBeInTheDocument());
 });

context/app/static/js/components/detailPage/Citation/Citation.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React from 'react';
 import { render, screen } from 'test-utils/functions';
 import { composeStories } from '@storybook/testing-react';

context/app/static/js/components/detailPage/Citation/Citation.stories.js

@@ -7,7 +7,9 @@ export default {
   component: CitationComponent,
 };
 
-export const Citation = (args) => <CitationComponent {...args} />;
+export function Citation(args) {
+  return <CitationComponent {...args} />;
+}
 Citation.args = {
   contributors: [
     { last_name: 'Aanders', first_name: 'Aanne' },

context/app/static/js/components/detailPage/MetadataTable/MetadataTable.spec.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-unresolved */
-
 import { tableDataToRows, getDescription } from './MetadataTable';
 
 test('should handle plain fields', () => {

context/app/static/js/components/detailPage/SampleTissue/SampleTissue.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React from 'react';
 import { render, screen } from 'test-utils/functions';
 import SampleTissue from './SampleTissue';

context/app/static/js/components/detailPage/StatusIcon/StatusIcon.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React from 'react';
 import { render, screen } from 'test-utils/functions';
 import StatusIcon from './StatusIcon';

context/app/static/js/components/detailPage/SupportAlert/SupportAlert.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React from 'react';
 import { render, screen } from 'test-utils/functions';
 import SupportAlert from './SupportAlert';

context/app/static/js/components/detailPage/files/FileBrowser/FileBrowser.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from 'test-utils/functions';
@@ -12,20 +11,23 @@ const fakeOpenDUA = jest.fn();
 
 const uuid = 'fakeuuid';
 
-const FilesProviders = ({ children }) => {
+const detailContext = { uuid };
+const filesContext = { openDUA: fakeOpenDUA, hasAgreedToDUA: 'fakedua' };
+const flaskDataContext = { entity: { entity_type: 'Dataset' } };
+
+function FilesProviders({ children }) {
   return (
-    <FlaskDataContext.Provider value={{ entity: { entity_type: 'Dataset' } }}>
-      <DetailContext.Provider value={{ uuid }}>
-        <FilesContext.Provider value={{ openDUA: fakeOpenDUA, hasAgreedToDUA: 'fakedua' }}>
-          {children}
-        </FilesContext.Provider>
+    <FlaskDataContext.Provider value={flaskDataContext}>
+      <DetailContext.Provider value={detailContext}>
+        <FilesContext.Provider value={filesContext}>{children}</FilesContext.Provider>
       </DetailContext.Provider>
     </FlaskDataContext.Provider>
   );
-};
+}
 
 const expectArrayOfStringsToExist = (arr) => arr.forEach((text) => expect(screen.getByText(text)).toBeInTheDocument());
-const expectArrayOfStringsToNotExist = (arr) => arr.forEach((text) => expect(screen.queryByText(text)).toBeNull());
+const expectArrayOfStringsToNotExist = (arr) =>
+  arr.forEach((text) => expect(screen.queryByText(text)).not.toBeInTheDocument());
 
 test('displays files and directories', () => {
   const sharedEntries = {

context/app/static/js/components/detailPage/files/FileBrowserDUA/FileBrowserDUA.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 
@@ -33,7 +32,7 @@ test('does not display when isOpen prop is false', () => {
     />,
   );
 
-  expect(screen.queryByRole('dialog')).toBeNull();
+  expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 });
 
 test('displays correct text for protected access level', () => {

context/app/static/js/components/detailPage/files/FileBrowserDirectory/FileBrowserDirectory.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 
@@ -23,7 +22,7 @@ test('handles click', () => {
     </FileBrowserDirectory>,
   );
 
-  expect(screen.queryByText('directory child')).toBeNull();
+  expect(screen.queryByText('directory child')).not.toBeInTheDocument();
   userEvent.click(screen.getByRole('button'));
   expect(screen.getByText('directory child')).toBeInTheDocument();
 });
@@ -35,7 +34,7 @@ test('handles key down', () => {
     </FileBrowserDirectory>,
   );
 
-  expect(screen.queryByText('directory child')).toBeNull();
+  expect(screen.queryByText('directory child')).not.toBeInTheDocument();
   fireEvent.keyDown(screen.getByRole('button'), { key: 'Enter', code: 'Enter', keyCode: 13 });
   expect(screen.getByText('directory child')).toBeInTheDocument();
 });

context/app/static/js/components/detailPage/files/FileBrowserFile/FileBrowserFile.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React from 'react';
 import { render, screen, appProviderEndpoints, appProviderToken } from 'test-utils/functions';
 // import userEvent from '@testing-library/user-event';
@@ -11,15 +10,16 @@ const fakeOpenDUA = jest.fn();
 
 const uuid = 'fakeuuid';
 
-const FilesProviders = ({ children }) => {
+const detailContext = { uuid };
+const filesContext = { openDUA: fakeOpenDUA, hasAgreedToDUA: 'fakedua' };
+
+function FilesProviders({ children }) {
   return (
-    <DetailContext.Provider value={{ uuid }}>
-      <FilesContext.Provider value={{ openDUA: fakeOpenDUA, hasAgreedToDUA: 'fakedua' }}>
-        {children}
-      </FilesContext.Provider>
+    <DetailContext.Provider value={detailContext}>
+      <FilesContext.Provider value={filesContext}>{children}</FilesContext.Provider>
     </DetailContext.Provider>
   );
-};
+}
 
 test('displays a link with correct href when dua is agreed to', () => {
   const fileObj = {
@@ -104,7 +104,7 @@ test('does not display QA chip when is_qa_qc is not provided', () => {
     </FilesProviders>,
   );
 
-  expect(screen.queryByText('QA')).toBeNull();
+  expect(screen.queryByText('QA')).not.toBeInTheDocument();
 });
 
 test('does not display QA chip when is_qa_qc is false', () => {
@@ -125,5 +125,5 @@ test('does not display QA chip when is_qa_qc is false', () => {
     </FilesProviders>,
   );
 
-  expect(screen.queryByText('QA')).toBeNull();
+  expect(screen.queryByText('QA')).not.toBeInTheDocument();
 });

context/app/static/js/components/detailPage/files/FileBrowserNode/FileBrowserNode.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React from 'react';
 import { render, screen } from 'test-utils/functions';
 
@@ -10,15 +9,16 @@ const fakeOpenDUA = jest.fn();
 
 const uuid = 'fakeuuid';
 
-const FilesProviders = ({ children }) => {
+const detailContext = { uuid };
+const filesContext = { openDUA: fakeOpenDUA, hasAgreedToDUA: 'fakedua' };
+
+function FilesProviders({ children }) {
   return (
-    <DetailContext.Provider value={{ uuid }}>
-      <FilesContext.Provider value={{ openDUA: fakeOpenDUA, hasAgreedToDUA: 'fakedua' }}>
-        {children}
-      </FilesContext.Provider>
+    <DetailContext.Provider value={detailContext}>
+      <FilesContext.Provider value={filesContext}>{children}</FilesContext.Provider>
     </DetailContext.Provider>
   );
-};
+}
 
 function FakeFileObject(i) {
   this.rel_path = `fakepath${i}`;

context/app/static/js/components/detailPage/files/Files/Files.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import DetailContext from 'js/components/detailPage/context';
@@ -18,24 +18,26 @@ function Files({ files, uuid, hubmap_id, visLiftedUUID }) {
   const [isDialogOpen, setDialogOpen] = useState(false);
   const [urlClickedBeforeDUA, setUrlClickedBeforeDUA] = useState('');
 
-  function handleDUAAgree() {
+  const handleDUAAgree = useCallback(() => {
     agreeToDUA(true);
     localStorage.setItem(localStorageKey, true);
     setDialogOpen(false);
     window.open(urlClickedBeforeDUA, '_blank');
-  }
+  }, [agreeToDUA, localStorageKey, setDialogOpen, urlClickedBeforeDUA]);
 
-  function handleDUAClose() {
+  const handleDUAClose = useCallback(() => {
     setDialogOpen(false);
-  }
+  }, []);
 
-  function openDUA(linkUrl) {
+  const openDUA = useCallback((linkUrl) => {
     setDialogOpen(true);
     setUrlClickedBeforeDUA(linkUrl);
-  }
+  }, []);
+
+  const filesContext = useMemo(() => ({ openDUA, hasAgreedToDUA }), [openDUA, hasAgreedToDUA]);
 
   return (
-    <FilesContext.Provider value={{ openDUA, hasAgreedToDUA }}>
+    <FilesContext.Provider value={filesContext}>
       <DetailPageSection id="files">
         <SectionHeader>Files</SectionHeader>
         {files.length > 0 && (