Merge pull request #527 from NASA-IMPACT/develop

Deploy to production

.github/workflows/checks.yml

@@ -11,7 +11,7 @@ name: Checks
 on:
   push:
     branches-ignore:
-    - 'main'
+      - 'main'
 
 env:
   NODE: 14
@@ -63,7 +63,7 @@ jobs:
         id: cache-node-modules
         with:
           path: node_modules
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
 
       - name: Install
         run: yarn install
@@ -73,65 +73,30 @@ jobs:
 
   test:
     needs: prep
+    name: 'Test on ${{ matrix.project }} (${{ matrix.shardIndex }}/${{ matrix.shardTotal }})'
     runs-on: ubuntu-latest
-
+    container:
+      image: mcr.microsoft.com/playwright:v1.34.3
+    strategy:
+      fail-fast: false
+      matrix:
+        project: [chromium, firefox, webkit]
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
+    timeout-minutes: 60
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Use Node.js ${{ env.NODE }}
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE }}
-
-      - name: Cache node_modules
-        uses: actions/cache@v2
-        id: cache-node-modules
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
-
-      - name: Install
-        run: yarn install
-
-      - name: Test
-        run: yarn test
-
-  cypress:
-    needs: lint
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Use Node.js ${{ env.NODE }}
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ env.NODE }}
-
-      - name: Cache node modules
-        id: cache-node-modules
-        uses: actions/cache@v2
-        env:
-          cache-name: cache-node-modules
-        with:
-          path: |
-            node_modules
-            /home/runner/.cache/Cypress
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
-      - name: Install
-        if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: yarn install
-
-      - name: Test End-to-end
-        uses: cypress-io/github-action@v4
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn
+      - name: Run Playwright tests
+        run: env HOME=/root npx playwright test --project=${{ matrix.project }} --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+      - uses: actions/upload-artifact@v3
+        if: always()
         with:
-          browser: chrome
-          start: yarn serve:test
-          wait-on: 'http://localhost:9000'
-          config: video=false,defaultCommandTimeout=2000
+          name: playwright-report-${{ matrix.project }}-${{ matrix.shardIndex }}
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -113,4 +113,8 @@ nbproject
 temp
 tmp
 .tmp
-dist
+dist
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/playwright/.auth

app/assets/scripts/components/comment-center/comment-entry.js

@@ -13,10 +13,12 @@ import CommentForm from './comment-form';
 
 import { useUser } from '../../context/user';
 
-const getDefaultPrevented = (fn, ...args) => (e) => {
-  e?.preventDefault?.();
-  fn?.(...args);
-};
+const getDefaultPrevented =
+  (fn, ...args) =>
+  (e) => {
+    e?.preventDefault?.();
+    fn?.(...args);
+  };
 
 const AuthoringInfoCmp = (props) => {
   const { date, isEdited, isThread, ...rest } = props;

app/assets/scripts/components/comment-center/thread-list-panel.js

@@ -97,9 +97,10 @@ function ThreadListPanelContents() {
     return () => invalidate();
   }, [invalidate]);
 
-  const onCommentEditCancel = useCallback(() => setEditingCommentKey(null), [
-    setEditingCommentKey
-  ]);
+  const onCommentEditCancel = useCallback(
+    () => setEditingCommentKey(null),
+    [setEditingCommentKey]
+  );
 
   const onSubmitThread = useSubmitThread({
     submitFunction: createThread,
@@ -129,10 +130,10 @@ function ThreadListPanelContents() {
     [setSelectedStatus, setSelectedSection]
   );
 
-  const menuActiveItems = useMemo(() => [selectedSection, selectedStatus], [
-    selectedSection,
-    selectedStatus
-  ]);
+  const menuActiveItems = useMemo(
+    () => [selectedSection, selectedStatus],
+    [selectedSection, selectedStatus]
+  );
 
   const onCommentEntryMenuAction = useCallback(
     async (menuId, { threadId }) => {

app/assets/scripts/components/comment-center/thread-single-panel.js

@@ -68,9 +68,10 @@ function ThreadSinglePanelContents() {
 
   const { refreshThreadStats } = useThreadStats();
 
-  const onCommentEditCancel = useCallback(() => setEditingCommentKey(null), [
-    setEditingCommentKey
-  ]);
+  const onCommentEditCancel = useCallback(
+    () => setEditingCommentKey(null),
+    [setEditingCommentKey]
+  );
 
   const onSubmitThreadComment = useSubmitThreadComment(createThreadComment);
 

app/assets/scripts/components/common/dropdown-menu.js

@@ -256,6 +256,8 @@ const DropdownMenu = React.forwardRef((props, ref) => {
   );
 });
 
+DropdownMenu.displayName = 'DropdownMenu';
+
 DropdownMenu.propTypes = {
   className: T.string,
   menu: T.oneOfType([T.array, T.object]),

app/assets/scripts/components/common/forms/formik-reset-reveal.js

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useFormikContext } from 'formik';
+import T from 'prop-types';
 
 // Reset the formik state when the modal is hidden.
 export function FormikResetReveal({ revealed }) {
@@ -11,3 +12,7 @@ export function FormikResetReveal({ revealed }) {
   }, [resetForm, revealed]);
   return null;
 }
+
+FormikResetReveal.propTypes = {
+  revealed: T.bool
+};

app/assets/scripts/components/common/try-render.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import T from 'prop-types';
 
 /**
  * Tries to render the given function falling back to the children if it is not
@@ -18,3 +19,8 @@ export default function Try(props) {
     return children || null;
   }
 }
+
+Try.propTypes = {
+  fn: T.oneOfType([T.func, T.node]),
+  children: T.node
+};

app/assets/scripts/components/contacts/hub/contact-hub-entry.js

@@ -15,10 +15,10 @@ import ContactActionsMenu from '../contact-actions-menu';
 import { contactView } from '../../../utils/url-creator';
 
 export default function ContactEntry({ contact, onContactAction }) {
-  const onAction = useCallback((...args) => onContactAction(contact, ...args), [
-    onContactAction,
-    contact
-  ]);
+  const onAction = useCallback(
+    (...args) => onContactAction(contact, ...args),
+    [onContactAction, contact]
+  );
 
   const mechanismCount = contact.mechanisms.length;
   const atbdUseCount = contact.atbd_versions_link.length;

app/assets/scripts/components/contacts/hub/index.js

@@ -26,12 +26,8 @@ import { contactEdit } from '../../../utils/url-creator';
 import { contactDeleteConfirmAndToast } from '../contact-delete-process';
 
 export function Contacts() {
-  const {
-    fetchContacts,
-    createContact,
-    deleteContact,
-    contacts
-  } = useContacts();
+  const { fetchContacts, createContact, deleteContact, contacts } =
+    useContacts();
 
   const { isLogged } = useUser();
   const history = useHistory();

app/assets/scripts/components/contacts/view/index.js

@@ -126,7 +126,7 @@ export default function ContactView() {
                       {getContactName(data, { full: true })}
                     </ContactTitle>
                   </ContactHeader>
-                  <DetailsList>
+                  <DetailsList title='Contact Details'>
                     <dt>First Name</dt>
                     <dd>{data.first_name}</dd>
                     {data.middle_name && (

app/assets/scripts/components/dashboard/dash-contributor.js

@@ -109,11 +109,8 @@ export default DashboardContributor;
 // Moving the <DocsNav> to a separate component to access the tabs context
 // provided by the TabManager.
 const DocumentNavigation = (props) => {
-  const {
-    listSettingsValues,
-    listSettingsSetter,
-    applyListSettingsFilters
-  } = props;
+  const { listSettingsValues, listSettingsSetter, applyListSettingsFilters } =
+    props;
 
   const { activeTab } = useTabs();
 

app/assets/scripts/components/documents/completeness.js

@@ -57,9 +57,8 @@ export const calculateDocumentCompleteness = (atbd, pdfMode = false) => {
   const allSections = STEPS.reduce((acc, step) => {
     // We can use getInitialValues to get the status of the sections
     // while adding any section that is not yet in the database.
-    const { sections_completed = {}, journal_status } = step.getInitialValues(
-      atbd
-    );
+    const { sections_completed = {}, journal_status } =
+      step.getInitialValues(atbd);
 
     // The closeout step is special. There are sections which should only be
     // considered if the document is intended for journal publication.

app/assets/scripts/components/documents/create-document-button.js

@@ -6,11 +6,8 @@ import { useBooleanState } from '../../utils/common';
 import NewATBDModal from './new-atbd-modal';
 
 function CreateDocumentButton() {
-  const [
-    showNewATBDModal,
-    setShowNewATBDModalTrue,
-    setShowNewATBDModalFalse
-  ] = useBooleanState(false);
+  const [showNewATBDModal, setShowNewATBDModalTrue, setShowNewATBDModalFalse] =
+    useBooleanState(false);
 
   return (
     <Can do='create' on='documents'>

app/assets/scripts/components/documents/document-tracker-modal.js

@@ -59,13 +59,8 @@ const TrackerEntryTitleIconified = styled(TrackerEntryTitle)`
 `;
 
 const TriggeringTitle = (props) => {
-  const {
-    isFoldExpanded,
-    setFoldExpanded,
-    swatchColor,
-    useIcon,
-    children
-  } = props;
+  const { isFoldExpanded, setFoldExpanded, swatchColor, useIcon, children } =
+    props;
 
   const onClick = useCallback(
     (e) => {

app/assets/scripts/components/documents/pdf-preview/index.js

@@ -70,9 +70,10 @@ function generateTocAndHeadingNumbering(content) {
 
     // We separately handle the user-defined subheadings, since they
     // don't follow the pattern of other subheadings
-    const userDefinedHeadings = currentHeading.nextElementSibling?.querySelectorAll(
-      `H${currentLevel + 1}`
-    );
+    const userDefinedHeadings =
+      currentHeading.nextElementSibling?.querySelectorAll(
+        `H${currentLevel + 1}`
+      );
 
     if (userDefinedHeadings) {
       currentSubHeadings.push(

app/assets/scripts/components/documents/single-edit/index.js

@@ -239,14 +239,8 @@ export default DocumentEdit;
 
 // Moving the save button to a component of its own to use Formik context.
 const SaveButton = () => {
-  const {
-    dirty,
-    isSubmitting,
-    submitForm,
-    status,
-    touched,
-    isValid
-  } = useFormikContext();
+  const { dirty, isSubmitting, submitForm, status, touched, isValid } =
+    useFormikContext();
   // status?.working is used to disable form submission when something is going
   // on. An example is the alias existence checking.
 

app/assets/scripts/components/documents/single-edit/step-algo-description.js

@@ -40,14 +40,8 @@ const variableFieldsEmptyValue = {
 };
 
 export default function StepAlgoDescription(props) {
-  const {
-    renderInpageHeader,
-    renderFormFooter,
-    atbd,
-    id,
-    version,
-    step
-  } = props;
+  const { renderInpageHeader, renderFormFooter, atbd, id, version, step } =
+    props;
 
   const { updateAtbd } = useSingleAtbd({ id, version });
   const initialValues = step.getInitialValues(atbd);

app/assets/scripts/components/documents/single-edit/step-algo-implementation.js

@@ -31,14 +31,8 @@ const emptyFieldValue = {
 };
 
 export default function StepAlgoImplementation(props) {
-  const {
-    renderInpageHeader,
-    renderFormFooter,
-    atbd,
-    id,
-    version,
-    step
-  } = props;
+  const { renderInpageHeader, renderFormFooter, atbd, id, version, step } =
+    props;
 
   const { updateAtbd } = useSingleAtbd({ id, version });
   const initialValues = step.getInitialValues(atbd);

app/assets/scripts/components/documents/single-edit/step-algo-usage.js

@@ -17,14 +17,8 @@ import { LocalStore } from './local-store';
 import { FormikUnloadPrompt } from '../../common/unload-prompt';
 
 export default function StepAlgoUsage(props) {
-  const {
-    renderInpageHeader,
-    renderFormFooter,
-    atbd,
-    id,
-    version,
-    step
-  } = props;
+  const { renderInpageHeader, renderFormFooter, atbd, id, version, step } =
+    props;
 
   const { updateAtbd } = useSingleAtbd({ id, version });
   const initialValues = step.getInitialValues(atbd);