From 1d82988f0bacf31902147df98ab4d861b54a97db Mon Sep 17 00:00:00 2001 From: Nick Grosenbacher Date: Wed, 8 Nov 2023 15:16:45 -0800 Subject: [PATCH 1/6] SWC-6548 - Release new version of synapse-react-client - Upgrade MUI - Add `getEditedColumnModels` imperative handle to TableColumnSchemaForm to match SWC interface - Fix animation/z-index of MUI Select causing issues in a GWT Bootstrap Modal - Fix issue where JSON Subcolumn name was not used if forceDisplayOriginalColumnName was true - Fix missing `key` in Breadcrumbs.tsx --- apps/SageAccountWeb/package.json | 8 +- apps/portals/package.json | 4 +- apps/synapse-oauth-signin/package.json | 4 +- packages/synapse-react-client/package.json | 10 +- .../components/EntityFinder/Breadcrumbs.tsx | 4 +- .../QueryVisualizationWrapper.tsx | 2 +- .../ColumnModelForm.tsx | 23 +- .../TableColumnSchemaEditor.tsx | 4 +- .../TableColumnSchemaEditorUtils.ts | 4 +- .../TableColumnSchemaForm.tsx | 15 +- .../synapse-react-client/src/umd.index.ts | 2 + pnpm-lock.yaml | 230 +++++++++++------- 12 files changed, 192 insertions(+), 118 deletions(-) diff --git a/apps/SageAccountWeb/package.json b/apps/SageAccountWeb/package.json index 1e9e654dea..c8389402ec 100644 --- a/apps/SageAccountWeb/package.json +++ b/apps/SageAccountWeb/package.json @@ -7,10 +7,10 @@ "@emotion/core": "^11.0.0", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^5.13.7", - "@mui/material": "^5.13.7", - "@mui/system": "^5.13.7", - "@mui/utils": "^5.13.7", + "@mui/icons-material": "^5.14.16", + "@mui/material": "^5.14.17", + "@mui/system": "^5.14.17", + "@mui/utils": "^5.14.17", "@react-hookz/web": "^23.1.0", "lodash-es": "^4.17.21", "plotly.js-basic-dist": "^2.24.3", diff --git a/apps/portals/package.json b/apps/portals/package.json index f6ccd53a32..33e7f36507 100644 --- a/apps/portals/package.json +++ b/apps/portals/package.json @@ -6,8 +6,8 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^5.13.7", - "@mui/material": "^5.13.7", + "@mui/icons-material": "^5.14.16", + "@mui/material": "^5.14.17", "@react-hookz/web": "^23.1.0", "@sage-bionetworks/react-base-table": "^1.13.4", "clone-deep": "^4.0.1", diff --git a/apps/synapse-oauth-signin/package.json b/apps/synapse-oauth-signin/package.json index df3c33c4bf..3b3c5306cd 100644 --- a/apps/synapse-oauth-signin/package.json +++ b/apps/synapse-oauth-signin/package.json @@ -6,8 +6,8 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^5.13.7", - "@mui/material": "^5.13.7", + "@mui/icons-material": "^5.14.16", + "@mui/material": "^5.14.17", "@react-hookz/web": "^23.1.0", "@sage-bionetworks/react-base-table": "^1.13.4", "history": "^5.3.0", diff --git a/packages/synapse-react-client/package.json b/packages/synapse-react-client/package.json index 224a1fb742..fc7bfe6d40 100644 --- a/packages/synapse-react-client/package.json +++ b/packages/synapse-react-client/package.json @@ -1,6 +1,6 @@ { "name": "synapse-react-client", - "version": "3.1.61", + "version": "3.1.62", "private": false, "main": "./dist/index.js", "module": "./dist/index.mjs", @@ -33,10 +33,10 @@ "@brainhubeu/react-carousel": "1.19.26", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^5.13.7", - "@mui/material": "^5.13.7", - "@mui/system": "^5.13.7", - "@mui/utils": "^5.13.7", + "@mui/icons-material": "^5.14.16", + "@mui/material": "^5.14.17", + "@mui/system": "^5.14.17", + "@mui/utils": "^5.14.17", "@mui/x-data-grid": "5.17.26", "@mui/x-date-pickers": "^5.0.20", "@popperjs/core": "^2.11.8", diff --git a/packages/synapse-react-client/src/components/EntityFinder/Breadcrumbs.tsx b/packages/synapse-react-client/src/components/EntityFinder/Breadcrumbs.tsx index 4e9b8205a4..0bb27e11ab 100644 --- a/packages/synapse-react-client/src/components/EntityFinder/Breadcrumbs.tsx +++ b/packages/synapse-react-client/src/components/EntityFinder/Breadcrumbs.tsx @@ -29,7 +29,7 @@ export const Breadcrumbs: React.FunctionComponent = ({ )} {items.map((item, index) => ( - <> + {index !== items.length - 1 && >} - + ))} ) diff --git a/packages/synapse-react-client/src/components/QueryVisualizationWrapper/QueryVisualizationWrapper.tsx b/packages/synapse-react-client/src/components/QueryVisualizationWrapper/QueryVisualizationWrapper.tsx index 2e6016ff57..190415728b 100644 --- a/packages/synapse-react-client/src/components/QueryVisualizationWrapper/QueryVisualizationWrapper.tsx +++ b/packages/synapse-react-client/src/components/QueryVisualizationWrapper/QueryVisualizationWrapper.tsx @@ -174,7 +174,7 @@ export function QueryVisualizationWrapper( const forceDisplayOriginalColumnName = localStorage.getItem('force-display-original-column-names') === 'true' - if (!columnName || forceDisplayOriginalColumnName) { + if (!columnName || (forceDisplayOriginalColumnName && !jsonPath)) { return columnName } if (columnAliases[columnName]) { diff --git a/packages/synapse-react-client/src/components/TableColumnSchemaEditor/ColumnModelForm.tsx b/packages/synapse-react-client/src/components/TableColumnSchemaEditor/ColumnModelForm.tsx index 784f990c81..2e32b70b60 100644 --- a/packages/synapse-react-client/src/components/TableColumnSchemaEditor/ColumnModelForm.tsx +++ b/packages/synapse-react-client/src/components/TableColumnSchemaEditor/ColumnModelForm.tsx @@ -1,5 +1,6 @@ import { Box, + Fade, FormControl, Link, MenuItem, @@ -200,11 +201,20 @@ export default function ColumnModelForm(props: ColumnModelFormProps) { 'aria-label': 'Column Type', }} sx={fieldSx} + MenuProps={{ + TransitionComponent: Fade, + }} disabled={disabled} > {allowedColumnTypes.map(value => { return ( - + {getColumnTypeFriendlyName(value)} ) @@ -359,6 +369,9 @@ export default function ColumnModelForm(props: ColumnModelFormProps) { label="Facet Type" value={columnModel.facetType} disabled={disabled || allowedFacetTypes === null} + MenuProps={{ + TransitionComponent: Fade, + }} onChange={e => { dispatch({ type: 'setColumnModelValue', @@ -377,7 +390,13 @@ export default function ColumnModelForm(props: ColumnModelFormProps) { > {(allowedFacetTypes ?? []).map((value, index) => { return ( - + {value === undefined ? '' : getFacetTypeFriendlyName(value)} ) diff --git a/packages/synapse-react-client/src/components/TableColumnSchemaEditor/TableColumnSchemaEditor.tsx b/packages/synapse-react-client/src/components/TableColumnSchemaEditor/TableColumnSchemaEditor.tsx index 7ef109cfe5..0b04979108 100644 --- a/packages/synapse-react-client/src/components/TableColumnSchemaEditor/TableColumnSchemaEditor.tsx +++ b/packages/synapse-react-client/src/components/TableColumnSchemaEditor/TableColumnSchemaEditor.tsx @@ -9,7 +9,7 @@ import { useDeepCompareMemoize } from 'use-deep-compare-effect' import { SkeletonTable } from '../Skeleton' import { convertToEntityType } from '../../utils/functions/EntityTypeUtils' import TableColumnSchemaForm, { SubmitHandle } from './TableColumnSchemaForm' -import { Alert, Button } from '@mui/material' +import { Alert, Button, Divider } from '@mui/material' import { ColumnModelFormData } from './TableColumnSchemaFormReducer' import { getViewScopeForEntity, @@ -102,12 +102,12 @@ function _TableColumnSchemaEditor(props: TableColumnSchemaEditorProps) { onSubmit(formData) }} /> + {error && ( {error?.message} )} -