Merge pull request #657 from nickgros/SWC-6627f

SWC-6627 - Update TableColumnSchemaEditor to be used in SWC
Sage-Bionetworks · Jan 25, 2024 · 8d09809 · 8d09809
2 parents 1862cd5 + 1667952
commit 8d09809
Show file tree

Hide file tree

Showing 34 changed files with 967 additions and 224 deletions.
diff --git a/apps/SageAccountWeb/src/components/ProfileAvatar.tsx b/apps/SageAccountWeb/src/components/ProfileAvatar.tsx
@@ -190,8 +190,10 @@ export const ProfileAvatar = (props: ProfileAvatarProps) => {
           </>
         }
         onConfirm={!imageLoading ? onCrop : () => ''}
-        confirmButtonDisabled={imageLoading}
-        confirmButtonText={imageLoading ? 'Loading...' : 'Save'}
+        confirmButtonProps={{
+          children: imageLoading ? 'Loading...' : 'Save',
+          disabled: imageLoading,
+        }}
       />
     </div>
   )

diff --git a/packages/synapse-react-client/src/components/AccessTokenPage/CreateAccessTokenModal.tsx b/packages/synapse-react-client/src/components/AccessTokenPage/CreateAccessTokenModal.tsx
@@ -142,8 +142,10 @@ export const CreateAccessTokenModal: React.FunctionComponent<
       open={true}
       title="Create New Personal Access Token"
       content={isLoading ? loadingScreen : dialogContent}
-      confirmButtonText={showCreatedToken ? 'Close' : 'Create Token'}
-      confirmButtonVariant={showCreatedToken ? 'outlined' : 'contained'}
+      confirmButtonProps={{
+        children: showCreatedToken ? 'Close' : 'Create Token',
+        variant: showCreatedToken ? 'outlined' : 'contained',
+      }}
       hasCancelButton={!showCreatedToken}
       onCancel={onClose}
       onConfirm={

diff --git a/...ges/synapse-react-client/src/components/ConfirmationDialog/ConfirmationDialog.stories.tsx b/...ges/synapse-react-client/src/components/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -17,8 +17,7 @@ export const Demo: Story = {
   args: {
     open: true,
     title: 'My Dialog Title',
-    confirmButtonText: 'Confirm',
-    confirmButtonColor: 'error',
+    confirmButtonProps: { children: 'Confirm', color: 'error' },
     maxWidth: 'lg',
     content: (
       <>

diff --git a/packages/synapse-react-client/src/components/ConfirmationDialog/ConfirmationDialog.tsx b/packages/synapse-react-client/src/components/ConfirmationDialog/ConfirmationDialog.tsx
@@ -1,54 +1,48 @@
 import { Button, ButtonProps } from '@mui/material'
 import React from 'react'
 import { DialogBase, DialogBaseProps } from '../DialogBase'
+import { defaults } from 'lodash-es'
 
 export type ConfirmationButtonsProps = {
   onConfirm: React.MouseEventHandler<HTMLButtonElement>
   onCancel: DialogBaseProps['onCancel']
-  confirmButtonText?: string
-  confirmButtonClassName?: string
-  confirmButtonColor?: ButtonProps['color']
-  confirmButtonVariant?: ButtonProps['variant']
-  confirmButtonDisabled?: boolean
+  confirmButtonProps?: Omit<ButtonProps, 'onClick'>
+  cancelButtonProps?: Omit<ButtonProps, 'onClick'>
   hasCancelButton?: boolean
-  confirmButtonID?: string // optionally set the ID property of the confirmation button element
 }
 
 export const CANCEL_BUTTON_TEXT = 'Cancel'
 
-export function CancelButton(props: { onCancel: () => void }) {
-  return (
-    <Button variant="outlined" onClick={() => props.onCancel()}>
-      {CANCEL_BUTTON_TEXT}
-    </Button>
-  )
+const DEFAULT_CONFIRM_BUTTON_PROPS: Omit<ButtonProps, 'onClick'> = {
+  children: 'OK',
+  color: 'primary',
+  variant: 'contained',
+}
+
+const DEFAULT_CANCEL_BUTTON_PROPS: Omit<ButtonProps, 'onClick'> = {
+  children: CANCEL_BUTTON_TEXT,
+  variant: 'outlined',
 }
 
 export const ConfirmationButtons = (props: ConfirmationButtonsProps) => {
-  const {
-    confirmButtonText = 'OK',
-    confirmButtonClassName,
-    confirmButtonColor = 'primary',
-    confirmButtonVariant = 'contained',
-    confirmButtonDisabled = false,
-    onConfirm,
-    onCancel,
-    hasCancelButton = true,
-    confirmButtonID,
-  } = props
+  const { onConfirm, onCancel, hasCancelButton = true } = props
+
+  const confirmButtonProps: Omit<ButtonProps, 'onClick'> = defaults(
+    {},
+    props.confirmButtonProps,
+    DEFAULT_CONFIRM_BUTTON_PROPS,
+  )
+
+  const cancelButtonProps: Omit<ButtonProps, 'onClick'> = defaults(
+    {},
+    props.cancelButtonProps,
+    DEFAULT_CANCEL_BUTTON_PROPS,
+  )
+
   return (
     <>
-      {hasCancelButton && <CancelButton onCancel={onCancel} />}
-      <Button
-        variant={confirmButtonVariant}
-        className={confirmButtonClassName}
-        color={confirmButtonColor}
-        onClick={onConfirm}
-        disabled={confirmButtonDisabled}
-        id={confirmButtonID}
-      >
-        {confirmButtonText}
-      </Button>
+      {hasCancelButton && <Button {...cancelButtonProps} onClick={onCancel} />}
+      <Button {...confirmButtonProps} onClick={onConfirm} />
     </>
   )
 }
@@ -60,31 +54,23 @@ export type ConfirmationDialogProps = DialogBaseProps & ConfirmationButtonsProps
  */
 export function ConfirmationDialog(props: ConfirmationDialogProps) {
   const {
-    confirmButtonText,
-    confirmButtonClassName,
-    confirmButtonColor,
-    confirmButtonVariant,
-    confirmButtonDisabled,
     onConfirm,
     onCancel,
     hasCancelButton,
-    confirmButtonID,
+    confirmButtonProps,
+    cancelButtonProps,
     ...rest
   } = props
   return (
     <DialogBase
       onCancel={onCancel}
       actions={
         <ConfirmationButtons
-          confirmButtonText={confirmButtonText}
-          confirmButtonClassName={confirmButtonClassName}
-          confirmButtonColor={confirmButtonColor}
-          confirmButtonVariant={confirmButtonVariant}
-          confirmButtonDisabled={confirmButtonDisabled}
+          confirmButtonProps={confirmButtonProps}
+          cancelButtonProps={cancelButtonProps}
           onConfirm={onConfirm}
           onCancel={onCancel}
           hasCancelButton={hasCancelButton}
-          confirmButtonID={confirmButtonID}
         />
       }
       {...rest}

diff --git a/packages/synapse-react-client/src/components/CreateProjectModal/CreateProjectModal.tsx b/packages/synapse-react-client/src/components/CreateProjectModal/CreateProjectModal.tsx
@@ -72,7 +72,7 @@ export const CreateProjectModal: React.FunctionComponent<
         open={isShowingModal}
         title="Create a new Project"
         content={dialogContent}
-        confirmButtonText="Save"
+        confirmButtonProps={{ children: 'Save' }}
         onConfirm={() => {
           void onCreateProject()
         }}

diff --git a/...ct-client/src/components/CreateTableViewWizard/CreateTableViewWizard.integration.test.tsx b/...ct-client/src/components/CreateTableViewWizard/CreateTableViewWizard.integration.test.tsx
@@ -31,6 +31,7 @@ import { BackendDestinationEnum } from '../../utils/functions'
 import { getEndpoint } from '../../utils/functions/getEndpoint'
 import { MOCK_ANNOTATION_COLUMNS } from '../../mocks/mockAnnotationColumns'
 import { mockEvaluationQueue } from '../../mocks/entity/mockEvaluationQueue'
+import { omit } from 'lodash-es'
 
 jest.mock('../EntityFinder/EntityFinderModal', () => ({
   EntityFinderModal: jest.fn(() => (
@@ -49,6 +50,24 @@ const createEntitySpy = jest.mocked(SynapseClient.createEntity)
 const getAnnotationColumnsSpy = jest.mocked(
   SynapseClient.getAnnotationColumnModels,
 )
+
+const defaultColumnModelsWithoutId = defaultFileViewColumnModels.map(cm =>
+  omit(cm, ['id']),
+)
+const annotationColumnModelsWithoutId = MOCK_ANNOTATION_COLUMNS.results.map(
+  cm => omit(cm, ['id']),
+)
+
+async function getLatestCreatedColumnModelIdsFromSpy(
+  spy: typeof createColumnModelsSpy,
+) {
+  return (
+    await (spy.mock.results[0].value as ReturnType<
+      typeof SynapseClient.createColumnModels
+    >)
+  ).list.map(cm => cm.id)
+}
+
 describe('CreateTableWizard integration tests', () => {
   function renderComponent(props: CreateTableViewWizardProps) {
     return {
@@ -220,22 +239,22 @@ describe('CreateTableWizard integration tests', () => {
     await user.click(screen.getByRole('button', { name: 'Finish' }))
 
     // Verify that the view was created and the callback was invoked
-    await waitFor(() => {
-      expect(createColumnModelsSpy).toHaveBeenCalledWith(
-        MOCK_ACCESS_TOKEN,
-        expect.arrayContaining(defaultFileViewColumnModels),
+    await waitFor(async () => {
+      expect(createColumnModelsSpy).toHaveBeenCalledWith(MOCK_ACCESS_TOKEN, [
+        // The new column models would have had IDs stripped in the column form
+        ...defaultColumnModelsWithoutId,
+        ...annotationColumnModelsWithoutId,
+      ])
+      const createdColumnModelIds = await getLatestCreatedColumnModelIdsFromSpy(
+        createColumnModelsSpy,
       )
       expect(createEntitySpy).toHaveBeenCalledWith(
         {
           name: 'tableName',
+          description: undefined,
           concreteType: ENTITY_VIEW_CONCRETE_TYPE_VALUE,
           parentId: mockProjectEntityData.id,
-          columnIds: [
-            ...defaultFileViewColumnModels.map(columnModel => columnModel.id),
-            ...MOCK_ANNOTATION_COLUMNS.results.map(
-              columnModel => columnModel.id,
-            ),
-          ],
+          columnIds: createdColumnModelIds,
           scopeIds: expect.any(Array),
           viewTypeMask:
             ENTITY_VIEW_TYPE_MASK_FILE | ENTITY_VIEW_TYPE_MASK_FOLDER,
@@ -337,22 +356,21 @@ describe('CreateTableWizard integration tests', () => {
     await user.click(screen.getByRole('button', { name: 'Finish' }))
 
     // Verify that the view was created and the callback was invoked
-    await waitFor(() => {
-      expect(createColumnModelsSpy).toHaveBeenCalledWith(
-        MOCK_ACCESS_TOKEN,
-        expect.arrayContaining(defaultFileViewColumnModels),
+    await waitFor(async () => {
+      expect(createColumnModelsSpy).toHaveBeenCalledWith(MOCK_ACCESS_TOKEN, [
+        // The new column models would have had IDs stripped in the column form
+        ...defaultColumnModelsWithoutId,
+        ...annotationColumnModelsWithoutId,
+      ])
+      const createdColumnModelIds = await getLatestCreatedColumnModelIdsFromSpy(
+        createColumnModelsSpy,
       )
       expect(createEntitySpy).toHaveBeenCalledWith(
         {
           name: 'tableName',
           concreteType: ENTITY_VIEW_CONCRETE_TYPE_VALUE,
           parentId: mockProjectEntityData.id,
-          columnIds: [
-            ...defaultFileViewColumnModels.map(columnModel => columnModel.id),
-            ...MOCK_ANNOTATION_COLUMNS.results.map(
-              columnModel => columnModel.id,
-            ),
-          ],
+          columnIds: createdColumnModelIds,
           scopeIds: expect.any(Array),
           viewTypeMask: ENTITY_VIEW_TYPE_MASK_PROJECT,
         },
@@ -440,22 +458,21 @@ describe('CreateTableWizard integration tests', () => {
     await user.click(screen.getByRole('button', { name: 'Finish' }))
 
     // Verify that the view was created and the callback was invoked
-    await waitFor(() => {
-      expect(createColumnModelsSpy).toHaveBeenCalledWith(
-        MOCK_ACCESS_TOKEN,
-        expect.arrayContaining(defaultFileViewColumnModels),
+    await waitFor(async () => {
+      expect(createColumnModelsSpy).toHaveBeenCalledWith(MOCK_ACCESS_TOKEN, [
+        // The new column models would have had IDs stripped in the column form
+        ...defaultColumnModelsWithoutId,
+        ...annotationColumnModelsWithoutId,
+      ])
+      const createdColumnModelIds = await getLatestCreatedColumnModelIdsFromSpy(
+        createColumnModelsSpy,
       )
       expect(createEntitySpy).toHaveBeenCalledWith(
         {
           name: 'tableName',
           concreteType: SUBMISSION_VIEW_CONCRETE_TYPE_VALUE,
           parentId: mockProjectEntityData.id,
-          columnIds: [
-            ...defaultFileViewColumnModels.map(columnModel => columnModel.id),
-            ...MOCK_ANNOTATION_COLUMNS.results.map(
-              columnModel => columnModel.id,
-            ),
-          ],
+          columnIds: createdColumnModelIds,
           scopeIds: expect.any(Array),
         },
         MOCK_ACCESS_TOKEN,

diff --git a/packages/synapse-react-client/src/components/CreateTableViewWizard/CreateTableViewWizard.tsx b/packages/synapse-react-client/src/components/CreateTableViewWizard/CreateTableViewWizard.tsx
@@ -35,6 +35,7 @@ import {
   maybeSetViewTypeMask,
 } from './CreateTableViewWizardUtils'
 import SubmissionViewScopeEditor from '../SubmissionViewScopeEditor/SubmissionViewScopeEditor'
+import { isUndefined, omitBy } from 'lodash-es'
 
 export type CreateTableViewWizardProps = {
   open: boolean
@@ -137,7 +138,12 @@ export default function CreateTableViewWizard(
       entityType !== EntityType.VIRTUAL_TABLE
     ) {
       try {
-        createdColumnModels = await createColumnModels(columnModels)
+        createdColumnModels = await createColumnModels(
+          columnModels.map(cm => omitBy(cm, isUndefined)) as SetOptional<
+            ColumnModel,
+            'id'
+          >[],
+        )
       } catch (e) {
         // Error will be handled by the hook, exit early if we encountered one
         return

diff --git a/packages/synapse-react-client/src/components/EntityFinder/EntityFinderModal.tsx b/packages/synapse-react-client/src/components/EntityFinder/EntityFinderModal.tsx
@@ -44,7 +44,7 @@ export const EntityFinderModal = (props: EntityFinderModalProps) => {
         fullWidth={false}
         maxWidth="xl"
         titleHelpPopoverProps={props.titleHelpPopoverProps}
-        confirmButtonText={props.confirmButtonCopy}
+        confirmButtonProps={{ children: props.confirmButtonCopy }}
         onConfirm={() => {
           props.onConfirm(selected)
         }}

diff --git a/packages/synapse-react-client/src/components/Forum/DiscussionThread.tsx b/packages/synapse-react-client/src/components/Forum/DiscussionThread.tsx
@@ -290,8 +290,10 @@ export function DiscussionThread(props: DiscussionThreadProps) {
         onCancel={() => setShowSignInModal(false)}
         hasCancelButton={false}
         onConfirm={() => setShowSignInModal(false)}
-        confirmButtonText="Sign In"
-        confirmButtonClassName={SRC_SIGN_IN_CLASS}
+        confirmButtonProps={{
+          children: 'Sign In',
+          className: SRC_SIGN_IN_CLASS,
+        }}
       />
     </div>
   )

diff --git a/packages/synapse-react-client/src/components/Forum/ForumPage.tsx b/packages/synapse-react-client/src/components/Forum/ForumPage.tsx
@@ -123,8 +123,10 @@ export const ForumPage: React.FC<ForumPageProps> = ({
         onCancel={() => setShowSignInModal(false)}
         hasCancelButton={false}
         onConfirm={() => setShowSignInModal(false)}
-        confirmButtonText="Sign In"
-        confirmButtonClassName={SRC_SIGN_IN_CLASS}
+        confirmButtonProps={{
+          children: 'Sign In',
+          className: SRC_SIGN_IN_CLASS,
+        }}
       />
     </div>
   )

diff --git a/packages/synapse-react-client/src/components/Forum/ForumThreadEditor.tsx b/packages/synapse-react-client/src/components/Forum/ForumThreadEditor.tsx
@@ -137,7 +137,7 @@ export const ForumThreadEditor: React.FunctionComponent<
           }
           content={editorContent}
           onConfirm={() => onSave(text, title)}
-          confirmButtonText={confirmButtonText}
+          confirmButtonProps={{ children: confirmButtonText }}
         />
       ) : (
         <>
@@ -146,7 +146,7 @@ export const ForumThreadEditor: React.FunctionComponent<
             <ConfirmationButtons
               onCancel={onClose}
               onConfirm={() => onSave(text, title)}
-              confirmButtonText={confirmButtonText}
+              confirmButtonProps={{ children: confirmButtonText }}
             />
           </Box>
         </>

diff --git a/packages/synapse-react-client/src/components/Forum/SubscribersModal.tsx b/packages/synapse-react-client/src/components/Forum/SubscribersModal.tsx
@@ -38,7 +38,6 @@ export const SubscribersModal: React.FC<SubscribersModalProps> = ({
           ))
         }
         onConfirm={() => handleModal(false)}
-        confirmButtonText="Ok"
         hasCancelButton={false}
       />
     </div>

diff --git a/packages/synapse-react-client/src/components/JSONArrayEditor/JSONArrayEditorModal.tsx b/packages/synapse-react-client/src/components/JSONArrayEditor/JSONArrayEditorModal.tsx
@@ -42,7 +42,6 @@ function JSONArrayEditorModal<T = unknown>(
     <ConfirmationDialog
       open={isShowingModal}
       title={dialogTitle}
-      confirmButtonText="OK"
       onCancel={onCancel}
       maxWidth="md"
       content={

diff --git a/packages/synapse-react-client/src/components/OAuthClientManagement/CreateOAuthClient.tsx b/packages/synapse-react-client/src/components/OAuthClientManagement/CreateOAuthClient.tsx
@@ -454,7 +454,7 @@ export const CreateOAuthModal: React.FunctionComponent<
         title={isEdit ? 'Client Details' : 'Create New OAuth Client'}
         content={content}
         onConfirm={onCreateClient}
-        confirmButtonText="Save"
+        confirmButtonProps={{ children: 'Save' }}
       />
       <WarningDialog
         open={isShowingConfirmModal}
-Original file line number
+Diff line change
@@ Expand Up @@
               ))
             }
             onConfirm={() => handleModal(false)}
-            confirmButtonText="Ok"
             hasCancelButton={false}
           />
         </div>
@@ Expand Down @@