From 2f07049e296e8a8b645f53291b2b9d06d6752e57 Mon Sep 17 00:00:00 2001 From: Dinika Saxena Date: Fri, 29 Sep 2023 12:34:40 +0200 Subject: [PATCH] 4205 // Update antd props Signed-off-by: Dinika Saxena --- .gitignore | 2 +- dist_refresh/manifest.json | 1 - package.json | 6 +- src/pages/ProjectPage/ProjectPage.tsx | 269 +++--- .../AnalysisPlugin/AnalysisPlugin.tsx | 847 +++++++++--------- .../components/DropdownFilter/index.tsx | 2 +- src/shared/components/ErrorComponent.tsx | 14 +- src/shared/components/Graph/index.tsx | 1 + src/shared/components/Header/Header.tsx | 203 +++-- src/shared/components/History/index.tsx | 82 +- .../components/ImagePreview/ImagePreview.tsx | 242 ++--- src/shared/components/JIRA/JIRA.tsx | 50 +- .../__snapshots__/JIRA.spec.tsx.snap | 42 +- src/shared/components/Login/index.tsx | 15 +- src/shared/components/Preview/Preview.tsx | 81 +- src/shared/components/ResourceList/index.tsx | 23 +- src/shared/components/SearchBar/index.tsx | 6 +- .../containers/AdminPluginContainer.tsx | 238 ++--- src/shared/containers/DataCartContainer.tsx | 26 +- .../containers/MarkdownEditorContainer.tsx | 5 +- .../containers/RemoveTagButtonContainer.tsx | 20 +- .../containers/ResourceDownloadContainer.tsx | 22 +- src/shared/containers/ResourcePlugins.tsx | 70 +- .../ResourceViewActionsContainer.tsx | 166 ++-- .../containers/ResourceViewContainer.tsx | 120 +-- .../VideoPluginContainer.tsx | 141 +-- .../modals/CreateProject/CreateProject.tsx | 42 +- .../modals/CreateStudio/CreateStudio.tsx | 33 +- .../molecules/CreationPanel/CreationPanel.tsx | 3 +- .../MyDataHeaderFilters/DateFieldSelector.tsx | 17 +- .../MyDataHeaderFilters/DateSelector.tsx | 4 +- .../molecules/MyDataTable/MyDataTable.tsx | 6 +- .../admin/components/ACLs/ACLsForm.tsx | 39 +- .../admin/components/Projects/ProjectForm.tsx | 142 +-- .../components/Projects/ProjectGraph.tsx | 1 + .../admin/components/Projects/QueryEditor.tsx | 35 +- .../components/Projects/ResourceInfoPanel.tsx | 194 ++-- .../components/Settings/APIMappingSubView.tsx | 6 +- .../components/Settings/GeneralSubView.tsx | 6 +- .../Settings/PermissionsAclsSubView.tsx | 19 +- .../components/Settings/ResolversSubView.tsx | 7 +- .../components/Settings/StoragesSubView.tsx | 1 + .../Views/ViewStatisticsProgress.tsx | 2 +- .../admin/containers/SettingsContainer.tsx | 10 +- .../components/AddComponentButton.tsx | 81 +- .../components/WorkflowSteps/StepCard.tsx | 16 +- .../search/components/Layouts/index.tsx | 2 +- yarn.lock | 369 ++++---- 48 files changed, 2035 insertions(+), 1694 deletions(-) delete mode 100644 dist_refresh/manifest.json diff --git a/.gitignore b/.gitignore index e1bb6c8ac..bf5a0875d 100644 --- a/.gitignore +++ b/.gitignore @@ -15,4 +15,4 @@ cypress.env.json .idea *.sops* .sops-*.* -*.key \ No newline at end of file +*.key diff --git a/dist_refresh/manifest.json b/dist_refresh/manifest.json deleted file mode 100644 index 0967ef424..000000000 --- a/dist_refresh/manifest.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/package.json b/package.json index b706fd289..811f1e800 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "ajv": "^8.10.0", "ajv-errors": "^3.0.0", "ajv-formats": "^2.1.1", - "antd": "^5.8.3", + "antd": "^5.9.4", "bodybuilder": "^2.2.25", "clsx": "^1.2.1", "codemirror": "^5.58.2", @@ -85,7 +85,7 @@ "react-device-detect": "^2.2.3", "react-dom": "^18.2.0", "react-draggable": "^4.4.3", - "react-helmet": "^5.2.0", + "react-helmet": "^6.1.0", "react-infinite-scroll-component": "^4.5.3", "react-json-view": "^1.21.3", "react-mde": "^11.0.0", @@ -148,7 +148,7 @@ "@types/query-string": "^6.3.0", "@types/react": "^18.2.18", "@types/react-dom": "^18.2.7", - "@types/react-helmet": "^5.0.7", + "@types/react-helmet": "^6.1.7", "@types/react-infinite-scroll-component": "^4.2.5", "@types/react-input-mask": "^3.0.2", "@types/react-redux": "^7.1.24", diff --git a/src/pages/ProjectPage/ProjectPage.tsx b/src/pages/ProjectPage/ProjectPage.tsx index 7ee8f94a1..c27834775 100644 --- a/src/pages/ProjectPage/ProjectPage.tsx +++ b/src/pages/ProjectPage/ProjectPage.tsx @@ -33,7 +33,6 @@ const ProjectView: React.FunctionComponent = () => { const location = useLocation(); const history = useHistory(); const subapp = useOrganisationsSubappContext(); - const { TabPane } = Tabs; const match = useRouteMatch<{ orgLabel: string; @@ -264,132 +263,154 @@ const ProjectView: React.FunctionComponent = () => { /> )}
- - -
-
- +
+ +
+
+ ), + }, + { + key: 'query', + label: 'Query', + children: ( +
+ { + setRefreshLists(!refreshLists); + // Statistics aren't immediately updated so pause polling briefly + pauseStatisticsPolling(5000); + }} + /> +
+ ), + }, + { + key: 'create_upload', + label: 'Create and Upload', + children: ( + ( + + You don't have the access to create/upload. Please + contact the Administrator for access. + + )} + > + + + ), + }, + { + key: 'stats', + label: 'Statistics', + children: ( + ( + + You don't have read access to quotas. Please contact + the Administrator for access. + + )} + > + + + + ), + }, + { + key: 'settings', + label: 'Settings', + children: ( + -
-
- - -
- { - setRefreshLists(!refreshLists); - // Statistics aren't immediately updated so pause polling briefly - pauseStatisticsPolling(5000); - }} - /> -
- - - ( - - You don't have the access to create/upload. Please contact - the Administrator for access. - - )} - > - - - - - ( - - You don't have read access to quotas. Please contact the - Administrator for access. - - )} - > - - - - - - - - {deltaPlugins && + ), + }, + ...(deltaPlugins && 'jira' in deltaPlugins && isUserInSupportedJiraRealm && - !jiraInaccessibleBecauseOfVPN && ( - - - - )} - {deltaPlugins && 'graph-analytics' in deltaPlugins && ( - - - - )} - - - Studios - - - } - key="studios" - > - {/* - - Workflows - - - } - key="workflows" - > */} - + !jiraInaccessibleBecauseOfVPN + ? [ + { + key: 'jira', + label: 'Jira', + children: ( + + ), + }, + ] + : []), + ...(deltaPlugins && 'graph-analytics' in deltaPlugins + ? [ + { + key: 'graph-analytics', + label: 'Graph Analytics', + children: ( + + ), + }, + ] + : []), + { + key: 'studios', + label: ( + + + Studios + + + ), + }, + ]} + /> )} diff --git a/src/shared/components/AnalysisPlugin/AnalysisPlugin.tsx b/src/shared/components/AnalysisPlugin/AnalysisPlugin.tsx index 01cb0d375..9e98bb89d 100644 --- a/src/shared/components/AnalysisPlugin/AnalysisPlugin.tsx +++ b/src/shared/components/AnalysisPlugin/AnalysisPlugin.tsx @@ -30,8 +30,6 @@ import { changeTools, } from '../../slices/plugins/report'; -const { Panel } = Collapse; - import { AnalysisPluginProps, SoftwareContribution, @@ -207,430 +205,463 @@ const AnalysisPlugin = ({ marginBottom: '40px', border: '2px solid #d9d9d9', }} - > - - {analysisReport.name} - {!!analysisReport.categories && - analysisReport.categories.length > 0 && ( - - {analysisReport.categories.map((c, i) => ( - - {c} - - ))}{' '} - - )} - {!!analysisReport.types && - analysisReport.types.length > 0 && ( - - {analysisReport.types.map((t, i) => ( - - {t} - - ))}{' '} - - )} - - } - > - {mode === 'edit' && - 'id' in analysisReport && - currentlyBeingEditedAnalysisReportId === - analysisReport.id && ( -
-
- - -
-
- )} - {mode === 'edit' && - 'id' in analysisReport && - currentlyBeingEditedAnalysisReportId === - analysisReport.id && ( + items={[ + { + key: i, + label: ( <> -

- Name -

- - dispatch( - changeAnalysisName({ name: e.target.value }) - ) - } - style={{ maxWidth: '900px' }} - /> - - )} - {mode === 'view' && ( - <> -
-
- - {' '} - - {analysisReport.createdBy && - getUsername(analysisReport.createdBy)} + {analysisReport.name} + {!!analysisReport.categories && + analysisReport.categories.length > 0 && ( + + {analysisReport.categories.map((c, i) => ( + + {c} + + ))}{' '} - - - - - {' '} - - {analysisReport.updatedBy && - getUsername(analysisReport.updatedBy)} - - + )} + {!!analysisReport.types && + analysisReport.types.length > 0 && ( + + {analysisReport.types.map((t, i) => ( + + {t} + + ))}{' '} - -
-
- - {analysisResourceType === 'individual_report' && - containerId && ( - <> - {' '} + )} + + ), + children: ( + <> + {mode === 'edit' && + 'id' in analysisReport && + currentlyBeingEditedAnalysisReportId === + analysisReport.id && ( +
+
+ - - )} - {analysisResourceType !== 'individual_report' && ( -
+
+ )} + {mode === 'edit' && + 'id' in analysisReport && + currentlyBeingEditedAnalysisReportId === + analysisReport.id && ( + <> +

+ Name +

+ + dispatch( + changeAnalysisName({ + name: e.target.value, + }) + ) + } + style={{ maxWidth: '900px' }} + /> + + )} + {mode === 'view' && ( + <> +
+
+ + {' '} + + {analysisReport.createdBy && + getUsername(analysisReport.createdBy)} + + + + + + {' '} + + {analysisReport.updatedBy && + getUsername(analysisReport.updatedBy)} + + + + +
+
+ + {analysisResourceType === + 'individual_report' && + containerId && ( + <> + {' '} + + + )} + {analysisResourceType !== + 'individual_report' && ( + + )} +
+
+ + )} + + {(mode === 'view' || + ('id' in analysisReport && + currentlyBeingEditedAnalysisReportId !== + analysisReport.id)) && + analysisReport.description !== undefined && + analysisReport.description !== '' && ( + <> +
+

+ {analysisReport.description} +

+
+ + )} + + {mode === 'edit' && + 'id' in analysisReport && + currentlyBeingEditedAnalysisReportId === + analysisReport.id && ( + <> +

+ Description +

+ + dispatch( + changeAnalysisDescription({ + description: e.currentTarget.value, + }) + ) + } + /> + + )} + + {mode === 'edit' && ( +
+ + +
+ )} + {mode === 'edit' && ( + <> +

- analysisReport.id && - onClickRelatedResource(analysisReport.id) + > + Tools +

+ + dispatch(changeTools({ tools })) } - > + /> + + )} + {mode === 'view' && ( + + [c.agent] + .flat() + .find(a => + [a['@type']].flat().includes('Software') + ) + ) as SoftwareContribution[])?.map(s => ({ + scriptPath: s.repository, + description: s.description, + }))} + onAddTool={() => { + analysisReport.id && + dispatch( + editReport({ + analysisId: analysisReport.id, + analaysisName: analysisReport.name, + analysisDescription: + analysisReport.description, + categories: analysisReport.categories, + types: analysisReport.types, + tools: [ + { scriptPath: '', description: '' }, + ], + }) + ); + }} + /> + )} +
+ {mode === 'view' && ( + <> + + )} + {mode === 'edit' && + selectedAssets && + selectedAssets.length > 0 && ( + + )}
-
- - )} - - {(mode === 'view' || - ('id' in analysisReport && - currentlyBeingEditedAnalysisReportId !== - analysisReport.id)) && - analysisReport.description !== undefined && - analysisReport.description !== '' && ( - <> -
-

- {analysisReport.description} -

-
- - )} - - {mode === 'edit' && - 'id' in analysisReport && - currentlyBeingEditedAnalysisReportId === - analysisReport.id && ( - <> -

- Description -

- - dispatch( - changeAnalysisDescription({ - description: e.currentTarget.value, - }) - ) +
+ Total: {analysisReport.assets.length} assets +
+
+ - )} - - {mode === 'edit' && ( -
- - -
- )} - {mode === 'edit' && ( - <> -

- Tools -

- - dispatch(changeTools({ tools })) - } - /> - - )} - {mode === 'view' && ( - - [c.agent] - .flat() - .find(a => [a['@type']].flat().includes('Software')) - ) as SoftwareContribution[])?.map(s => ({ - scriptPath: s.repository, - description: s.description, - }))} - onAddTool={() => { - analysisReport.id && - dispatch( - editReport({ - analysisId: analysisReport.id, - analaysisName: analysisReport.name, - analysisDescription: analysisReport.description, - categories: analysisReport.categories, - types: analysisReport.types, - tools: [{ scriptPath: '', description: '' }], - }) - ); - }} - /> - )} -
- {mode === 'view' && ( - <> - - - )} - {mode === 'edit' && - selectedAssets && - selectedAssets.length > 0 && ( - - )} -
-
- Total: {analysisReport.assets.length} assets -
-
- - - + ), + }, + ]} + /> ))} diff --git a/src/shared/components/DropdownFilter/index.tsx b/src/shared/components/DropdownFilter/index.tsx index 5c2b78480..51e27e037 100644 --- a/src/shared/components/DropdownFilter/index.tsx +++ b/src/shared/components/DropdownFilter/index.tsx @@ -56,7 +56,7 @@ const DropdownFilter: React.FunctionComponent<{ return (
{ return ( @@ -17,11 +16,14 @@ export const ErrorComponent = ({ message, details }: ErrorComponentProps) => { borderColor: '#ffccc7', margin: '20px', }} - > - - 
{details}
- - + items={[ + { + key: message, + label: message, + children: 
{details}
, + }, + ]} + /> ) : ( )} diff --git a/src/shared/components/Graph/index.tsx b/src/shared/components/Graph/index.tsx index 81adb2246..cb61a33e1 100644 --- a/src/shared/components/Graph/index.tsx +++ b/src/shared/components/Graph/index.tsx @@ -1,3 +1,4 @@ +import * as React from 'react'; import cytoscape from 'cytoscape'; import cola from 'cytoscape-cola'; diff --git a/src/shared/components/Header/Header.tsx b/src/shared/components/Header/Header.tsx index 4fb3d2ccd..24fd7a524 100644 --- a/src/shared/components/Header/Header.tsx +++ b/src/shared/components/Header/Header.tsx @@ -59,88 +59,127 @@ const Header: React.FunctionComponent = ({ }; const openAboutModal = () => dispatch(updateAboutModalVisibility(true)); const menu = ( - - - - - My Profile - - - - - - My data - - - {token && ( - - - Copy token - - )} - - - Resources - - } - > - - - - Documentation - - - - - - Web Protégé - - - - + + My Profile + + ), + className: 'link-menu-item', + }, + { + key: 'header-menu-my-date', + label: ( + + + My data + + ), + className: 'link-menu-item', + }, + ...(token + ? [ + { + key: 'header-menu-my-token', + label: ( + <> + + Copy token + + ), + onClick: () => copyTokenCmd(), + }, + ] + : []), + { + key: 'header-menu-resources', + label: ( + <> + + Resources + + ), + className: 'submenu-overlay-custom', + popupClassName: 'submenu-overlay-custom-popup', + children: [ + { + key: 'header-menu-resources-docs', + label: ( + + + Documentation + + ), + }, + { + key: 'header-menu-resources-web', + label: ( + + + Web Protégé + + ), + }, + { + key: 'header-menu-resources-atlas', + label: ( + + + Atlas + + ), + }, + ], + }, + { + key: 'header-menu-about', + className: 'link-menu-item', + onClick: () => openAboutModal(), + label: ( + <> + + About + + ), + }, + { + key: 'logout', + className: 'menu-item-logout', + onClick: event => { + if (handleLogout) { + handleLogout(event); } - > - - Atlas - - - - - - About - - - - Logout - - + }, + label: ( + <> + + Logout + + ), + }, + ]} + /> ); const showCreationPanel = location.pathname === '/search'; const handleOpenCreationPanel = () => @@ -173,7 +212,7 @@ const Header: React.FunctionComponent = ({ {name && ( menu} overlayClassName="menu-overlay-custom" > diff --git a/src/shared/components/History/index.tsx b/src/shared/components/History/index.tsx index 6d6bb8b20..f09abf84e 100644 --- a/src/shared/components/History/index.tsx +++ b/src/shared/components/History/index.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Timeline, Card } from 'antd'; +import { Timeline, Card, TimelineItemProps } from 'antd'; import { StarOutlined } from '@ant-design/icons'; import moment from 'moment'; @@ -16,49 +16,45 @@ const HistoryComponent: React.FunctionComponent<{ }[]; link?: (rev: number) => React.ReactNode; }> = ({ revisions, link }) => { - return ( - - {revisions.map((revision, index) => { - if (index === 0) { - return ( - } - > -
- {' '} - {link && link(index + 1)} created by {revision.userName}{' '} - -
- - ); - } - return ( - { + if (index === 0) { + return { + key: index, + className: 'created-at', + dot: , + children: ( +
+ {' '} + {link && link(index + 1)} created by {revision.userName}{' '} + +
+ ), + } as TimelineItemProps; + } + + return { + key: index, + color: revision.hasChanges ? 'blue' : 'red', + children: ( +
+ {' '} + {link && link(index + 1)} updated by {revision.userName}{' '} + +
-
- {' '} - {link && link(index + 1)} updated by {revision.userName}{' '} - -
- {revision.hasChanges ? ( - {JSON.stringify(revision.changes, null, 2)} - ) : ( - 'No changes' - )} -
-
- - ); - })} - - ); + {revision.hasChanges ? ( + {JSON.stringify(revision.changes, null, 2)} + ) : ( + 'No changes' + )} +
+
+ ), + }; + }); + return ; }; export default HistoryComponent; diff --git a/src/shared/components/ImagePreview/ImagePreview.tsx b/src/shared/components/ImagePreview/ImagePreview.tsx index 6c40103f7..d57e0886a 100644 --- a/src/shared/components/ImagePreview/ImagePreview.tsx +++ b/src/shared/components/ImagePreview/ImagePreview.tsx @@ -198,10 +198,20 @@ const ImagePreview: React.FC = ({ setDisplayOption(value); const sortOptions = ( - - Newest - Oldest - + ); const type: Partial> = @@ -252,114 +262,124 @@ const ImagePreview: React.FC = ({ - -
- - - -
-
- - {status === 'success' && ( - - displayOption === 'list' ? ( - - -
+ items={[ + { + key: 'imagePreview', + label: 'Image Preview', + children: ( + <> +
+ + sortOptions} + trigger={['hover', 'click']} + > + + -
- - ) : ( - -
- -
- - ) - } - /> - )} - {status === 'error' && ( - - )} - -
- - + /> + + + + +
+ + {status === 'success' && ( + + displayOption === 'list' ? ( + + +
+ } + > +
+
{item.title}
+
{item.size}
+ +
+ + ) : ( + +
+ +
+ + ) + } + /> + )} + {status === 'error' && ( + + )} + + + + ), + }, + ]} + /> ); }; diff --git a/src/shared/components/JIRA/JIRA.tsx b/src/shared/components/JIRA/JIRA.tsx index 1e7990fdc..52d55fcbb 100644 --- a/src/shared/components/JIRA/JIRA.tsx +++ b/src/shared/components/JIRA/JIRA.tsx @@ -316,19 +316,22 @@ const JIRAPluginUI = ({ }} > - setCreateIssueVisible(true)} - > - Create issue - - setLinkIssueVisible(true)}> - Link issue - - - } + dropdownRender={() => ( + setCreateIssueVisible(true), + label: 'Create issue', + }, + { + key: 'link', + onClick: () => setLinkIssueVisible(true), + label: 'Link issue', + }, + ]} + /> + )} > - } + dropdownRender={() => ( + confirmUnlinkIssue(issue.key), + }, + ]} + /> + )} > Options diff --git a/src/shared/components/JIRA/__tests__/__snapshots__/JIRA.spec.tsx.snap b/src/shared/components/JIRA/__tests__/__snapshots__/JIRA.spec.tsx.snap index d762a0e62..789b04e81 100644 --- a/src/shared/components/JIRA/__tests__/__snapshots__/JIRA.spec.tsx.snap +++ b/src/shared/components/JIRA/__tests__/__snapshots__/JIRA.spec.tsx.snap @@ -32,7 +32,7 @@ exports[`JIRA > renders authraizeJIRAUI 1`] = ` >
renders authraizeJIRAUI 1`] = `
renders with issues 1`] = ` class="ant-table-cell" >
  • renders with projects 1`] = ` style="width: 100%; display: flex; margin-bottom: 10px; margin-top: 10px;" >
renders with projects 1`] = ` class="ant-table-cell" >
  • shows loading spinner 1`] = ` style="width: 100%; display: flex; margin-bottom: 10px; margin-top: 10px; height: 200px; justify-content: center; align-items: center;" >
    = ({ onRealmSelected(realm); } }} - > - {realms.map(realm => ( - {realm} - ))} -
+ items={realms.map(realm => ({ + key: realm, + label: realm, + }))} + /> ); return ( @@ -63,7 +63,10 @@ const Login: React.FunctionComponent = ({
with - + menu} + trigger={['click', 'hover']} + > {realm} diff --git a/src/shared/components/Preview/Preview.tsx b/src/shared/components/Preview/Preview.tsx index b26e29763..970e0ff1b 100644 --- a/src/shared/components/Preview/Preview.tsx +++ b/src/shared/components/Preview/Preview.tsx @@ -341,43 +341,50 @@ const Preview: React.FC<{ - - downloadButton(true)} - loadingComponent={downloadButton(false)} - > - {downloadButton(false)} - - { - if (selected) { - setSelectedRows([...selectedRows, record]); - } else { - const currentRows = selectedRows.filter( - s => s.key !== record.key - ); - setSelectedRows(currentRows); - } - }, - onSelectAll: (select, selectedRows) => { - if (select) { - setSelectedRows(selectedRows); - } else { - setSelectedRows([]); - } - }, - }} - columns={columns} - dataSource={getResourceAssets(resource)} - bordered={true} - >
- - + items={[ + { + key: 'preview', + label: 'Preview', + children: ( + <> + downloadButton(true)} + loadingComponent={downloadButton(false)} + > + {downloadButton(false)} + + { + if (selected) { + setSelectedRows([...selectedRows, record]); + } else { + const currentRows = selectedRows.filter( + s => s.key !== record.key + ); + setSelectedRows(currentRows); + } + }, + onSelectAll: (select, selectedRows) => { + if (select) { + setSelectedRows(selectedRows); + } else { + setSelectedRows([]); + } + }, + }} + columns={columns} + dataSource={getResourceAssets(resource)} + bordered={true} + >
+ + ), + }, + ]} + />
); }; diff --git a/src/shared/components/ResourceList/index.tsx b/src/shared/components/ResourceList/index.tsx index 81603185d..3cb05e5fe 100644 --- a/src/shared/components/ResourceList/index.tsx +++ b/src/shared/components/ResourceList/index.tsx @@ -164,10 +164,20 @@ const ResourceListComponent: React.FunctionComponent<{ }; const sortOptions = ( - - Newest - Oldest - + ); const hiddenListForCalculatingDimensionsForPageSize = ( @@ -277,7 +287,10 @@ const ResourceListComponent: React.FunctionComponent<{ )} /> {!list.query.q && ( - + sortOptions} + trigger={['hover', 'click']} + > @@ -373,7 +385,7 @@ const DataCartContainer = () => {
{ + onClick={() => { onRemove(resource._self); }} style={{ diff --git a/src/shared/containers/MarkdownEditorContainer.tsx b/src/shared/containers/MarkdownEditorContainer.tsx index 4b052074f..fecb81eb4 100644 --- a/src/shared/containers/MarkdownEditorContainer.tsx +++ b/src/shared/containers/MarkdownEditorContainer.tsx @@ -61,8 +61,8 @@ export const saveImage = ( nexus: NexusClient, orgLabel: string, projectLabel: string -) => - async function*(data: ArrayBuffer) { +) => { + return async function*(data: ArrayBuffer) { const blob = new Blob([data]); const formData = new FormData(); formData.append('file', blob); @@ -77,6 +77,7 @@ export const saveImage = ( // returns true meaning that the save was successful return true; }; +}; const MarkdownEditorContainer: React.FC<{ resourceId: string; diff --git a/src/shared/containers/RemoveTagButtonContainer.tsx b/src/shared/containers/RemoveTagButtonContainer.tsx index 72055bec6..db1cb7c49 100644 --- a/src/shared/containers/RemoveTagButtonContainer.tsx +++ b/src/shared/containers/RemoveTagButtonContainer.tsx @@ -75,13 +75,15 @@ const RemoveTagButton: React.FunctionComponent<{ onClick={e => { setConfirm({ visible: true, tagName: e.key.toString(), busy: false }); }} - > - {tags?.map(t => ( - - {t.tag} (revision {t.rev} ) - - ))} - + items={tags?.map(t => ({ + key: t.tag, + label: ( + <> + {t.tag} (revision {t.rev} ) + + ), + }))} + /> ); return ( @@ -89,7 +91,7 @@ const RemoveTagButton: React.FunctionComponent<{ removeTag(confirm.tagName)} + onConfirm={() => removeTag(confirm.tagName)} okText="Yes" cancelText="No" onCancel={() => @@ -97,7 +99,7 @@ const RemoveTagButton: React.FunctionComponent<{ } open={confirm.visible} > - + menu}> diff --git a/src/shared/containers/ResourceDownloadContainer.tsx b/src/shared/containers/ResourceDownloadContainer.tsx index 9d5068241..13ef726ee 100644 --- a/src/shared/containers/ResourceDownloadContainer.tsx +++ b/src/shared/containers/ResourceDownloadContainer.tsx @@ -52,11 +52,21 @@ const ResourceDownloadButton: React.FunctionComponent<{ const format: formatType = clickparam.key.toString() as formatType; download(props.orgLabel, props.projectLabel, props.resourceId, format); }} - > - JSON - N-triples - Dot file - + items={[ + { + key: 'json', + label: 'JSON', + }, + { + key: 'n-triples', + label: 'N-triples', + }, + { + key: 'vnd.graph-viz', + label: 'Dot file', + }, + ]} + /> ); return ( @@ -69,7 +79,7 @@ const ResourceDownloadButton: React.FunctionComponent<{ > download - + menu}>
diff --git a/src/shared/containers/ResourcePlugins.tsx b/src/shared/containers/ResourcePlugins.tsx index 3ccc72ea5..29fb242c8 100644 --- a/src/shared/containers/ResourcePlugins.tsx +++ b/src/shared/containers/ResourcePlugins.tsx @@ -8,8 +8,6 @@ import { matchPlugins, pluginsMap, pluginsExcludeMap } from '../utils'; import usePlugins from '../hooks/usePlugins'; import ErrorBoundary from '../../shared/components/ErrorBoundary'; -const { Panel } = Collapse; - const ResourcePlugins: React.FunctionComponent<{ resource?: Resource; goToResource?: (selfURL: string) => void; @@ -112,15 +110,24 @@ const ResourcePlugins: React.FunctionComponent<{
( - - -

Something went wrong.

-

- Check that the shape of the data matches the plugin's - expectations. -

- - + +

Something went wrong.

+

+ Check that the shape of the data matches the + plugin's expectations. +

+ + ), + }, + ]} + /> )} key={pluginData.name} > @@ -132,26 +139,27 @@ const ResourcePlugins: React.FunctionComponent<{ ? pluginData.name : undefined } - > - } - > -
- -
- - + items={[ + { + key: `${pluginData.name}`, + label: `${pluginData.name}`, + children: ( +
+ +
+ ), + }, + ]} + />
) : null; diff --git a/src/shared/containers/ResourceViewActionsContainer.tsx b/src/shared/containers/ResourceViewActionsContainer.tsx index b757b90be..9acdab486 100644 --- a/src/shared/containers/ResourceViewActionsContainer.tsx +++ b/src/shared/containers/ResourceViewActionsContainer.tsx @@ -171,23 +171,23 @@ const ResourceViewActionsContainer: React.FC<{ const revisionMenuItems = React.useMemo( () => ( - - {[...Array(latestResource?._rev).keys()] + k + 1) .sort((a, b) => b - a) - .map(rev => ( - { - goToResource(orgLabel, projectLabel, encodedResourceId, rev); - }} - > - Revision {rev} - {revisionLabels(rev).length > 0 && - ` (${revisionLabels(rev).join(', ')})`} - - ))} - + .map(rev => ({ + key: rev, + onClick: () => + goToResource(orgLabel, projectLabel, encodedResourceId, rev), + label: ( + <> + Revision {rev} + {revisionLabels(rev).length > 0 && + ` (${revisionLabels(rev).join(', ')})`} + + ), + }))} + /> ), [resource, latestResource, tags] ); @@ -207,7 +207,7 @@ const ResourceViewActionsContainer: React.FC<{ return ( - + revisionMenuItems}>
- ) - } + items={[ + { + key: 'video', + label: 'Video', + forceRender: true, + children: ( + + <> + { + return ( + +

{moment.duration(item.duration).humanize()}

+

+ {getDateString(item.uploadDate, { + noTime: true, + })} +

+ + ) + } + > + + } + title={ + + } + description={ + item.description + ? item.description + : 'Description of video when information available' + } + /> + + ); + }} + /> + {selectedVideo && !!selectedVideo.name ? ( + - } - title={ - - } - description={ - item.description - ? item.description - : 'Description of video when information available' - } - /> - - ); - }} - /> - {selectedVideo && !!selectedVideo.name ? ( - - {!!selectedVideo.embedUrl ? ( - + {!!selectedVideo.embedUrl ? ( + + ) : null} + ) : null} - - ) : null} - - - - + + + ), + }, + ]} + /> ); }; diff --git a/src/shared/modals/CreateProject/CreateProject.tsx b/src/shared/modals/CreateProject/CreateProject.tsx index a4111fc2e..b82668f51 100644 --- a/src/shared/modals/CreateProject/CreateProject.tsx +++ b/src/shared/modals/CreateProject/CreateProject.tsx @@ -9,12 +9,13 @@ import { Collapse, Form, Select, + Space, } from 'antd'; import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons'; import { NexusClient, ProjectResponseCommon } from '@bbp/nexus-sdk/es'; import { useMutation, useQuery } from 'react-query'; import { useNexusContext } from '@bbp/react-nexus'; -import { useHistory, useParams, useRouteMatch } from 'react-router'; +import { useHistory, useRouteMatch } from 'react-router'; import { useSelector, useDispatch } from 'react-redux'; import { useOrganisationsSubappContext } from '../../../subapps/admin'; import { @@ -50,7 +51,7 @@ const PrefixMappingGroupInput: React.FC<{ value?: any; }> = ({ groupId, value }) => { return ( - + - + ); }; @@ -331,18 +332,29 @@ const CreateProject: React.FC<{}> = ({}) => { > - - -

- API Mappings - -

- {apiMappingsItems} - - + +

+ API Mappings + +

+ {apiMappingsItems} + + ), + }, + ]} + /> - - - + + + + + + + +

API Mappings

+ {apiMappingsItems} + + + + + ), + }, + ]} + /> diff --git a/src/subapps/admin/components/Projects/ProjectGraph.tsx b/src/subapps/admin/components/Projects/ProjectGraph.tsx index abd44cd99..98d68a133 100644 --- a/src/subapps/admin/components/Projects/ProjectGraph.tsx +++ b/src/subapps/admin/components/Projects/ProjectGraph.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import cytoscape from 'cytoscape'; // @ts-ignore import avsdf from 'cytoscape-avsdf'; diff --git a/src/subapps/admin/components/Projects/QueryEditor.tsx b/src/subapps/admin/components/Projects/QueryEditor.tsx index e7c7cbac5..03ffbb063 100644 --- a/src/subapps/admin/components/Projects/QueryEditor.tsx +++ b/src/subapps/admin/components/Projects/QueryEditor.tsx @@ -60,8 +60,6 @@ const QueryEditor: React.FC<{ } }, [orgLabel, projectLabel]); - const { TabPane } = Tabs; - if (loading) { return null; } @@ -87,18 +85,27 @@ const QueryEditor: React.FC<{ }} activeKey={activeKey} tabPosition="left" - > - -
- -
- - -
- -
- - + items={[ + { + key: 'sparql', + label: 'SPARQL', + children: ( +
+ +
+ ), + }, + { + key: 'elasticsearch', + label: 'Elasticsearch', + children: ( +
+ +
+ ), + }, + ]} + /> ); diff --git a/src/subapps/admin/components/Projects/ResourceInfoPanel.tsx b/src/subapps/admin/components/Projects/ResourceInfoPanel.tsx index 4fc688f32..eb933e93b 100644 --- a/src/subapps/admin/components/Projects/ResourceInfoPanel.tsx +++ b/src/subapps/admin/components/Projects/ResourceInfoPanel.tsx @@ -94,101 +94,105 @@ const ResourceInfoPanel: React.FC<{

{typeStats._count} resources


- - { - return ( -
-

- These are the properties that are used to describe a - resource of this type.
- It also include how many resources use them and overall - coverage. -

-
- ); - }} - trigger="click" - placement="bottomRight" - > -