From 4b75b09d1c75d6796e75efc55e7b06917834b63e Mon Sep 17 00:00:00 2001 From: =?utf8?q?Daniel=20Kuty=C5=82a?= Date: Wed, 16 Mar 2022 23:32:30 +0100 Subject: [PATCH] 18549: Layout fixed, tests updated MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła --- cypress/integration/search.spec.js | 4 +- .../column-selector/column-selector.tsx | 1 + .../data-explorer/data-explorer.tsx | 78 ++++++++++++------- .../search-results-panel-view.tsx | 22 ++++-- .../search-results-panel.tsx | 12 +-- 5 files changed, 66 insertions(+), 51 deletions(-) diff --git a/cypress/integration/search.spec.js b/cypress/integration/search.spec.js index 95e0bc95..403516b3 100644 --- a/cypress/integration/search.spec.js +++ b/cypress/integration/search.spec.js @@ -82,7 +82,7 @@ describe('Search tests', function() { }); }); - it('can search for old collection versions', function() { + it.only('can display path of the selected item', function() { const colName = `Collection ${Math.floor(Math.random() * Math.floor(999999))}`; // Creates the collection using the admin token so we can set up @@ -101,7 +101,7 @@ describe('Search tests', function() { cy.get('[data-cy=search-results]').contains(colName).closest('tr').click(); - cy.get('[data-cy=snackbar]').should('contain', `/ Projects / ${colName}`); + cy.get('[data-cy=element-path]').should('contain', `/ Projects / ${colName}`); }); }); }); \ No newline at end of file diff --git a/src/components/column-selector/column-selector.tsx b/src/components/column-selector/column-selector.tsx index 317e6bc0..5fbef6b6 100644 --- a/src/components/column-selector/column-selector.tsx +++ b/src/components/column-selector/column-selector.tsx @@ -14,6 +14,7 @@ import { ArvadosTheme } from "common/custom-theme"; interface ColumnSelectorDataProps { columns: DataColumns; onColumnToggle: (column: DataColumn) => void; + className?: string; } type CssRules = "checkbox"; diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx index 55840ae9..051f5d34 100644 --- a/src/components/data-explorer/data-explorer.tsx +++ b/src/components/data-explorer/data-explorer.tsx @@ -15,7 +15,7 @@ import { CloseIcon, MaximizeIcon, MoreOptionsIcon } from 'components/icon/icon'; import { PaperProps } from '@material-ui/core/Paper'; import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view'; -type CssRules = 'searchBox' | "toolbar" | "toolbarUnderTitle" | "footer" | "root" | 'moreOptionsButton' | 'title' | 'dataTable' | 'container'; +type CssRules = 'searchBox' | 'headerMenu' | "toolbar" | "footer" | "root" | 'moreOptionsButton' | 'title' | 'dataTable' | 'container'; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ searchBox: { @@ -25,9 +25,6 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ paddingTop: theme.spacing.unit, paddingRight: theme.spacing.unit * 2, }, - toolbarUnderTitle: { - paddingTop: 0 - }, footer: { overflow: 'auto' }, @@ -38,6 +35,7 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ padding: 0 }, title: { + display: 'inline-block', paddingLeft: theme.spacing.unit * 3, paddingTop: theme.spacing.unit * 3, fontSize: '18px' @@ -49,6 +47,10 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ container: { height: '100%', }, + headerMenu: { + float: 'right', + display: 'inline-block' + } }); interface DataExplorerDataProps { @@ -71,6 +73,7 @@ interface DataExplorerDataProps { title?: React.ReactNode; paperKey?: string; currentItemUuid: string; + elementPath?: string; } interface DataExplorerActionProps { @@ -107,36 +110,43 @@ export const DataExplorer = withStyles(styles)( items, itemsAvailable, onRowClick, onRowDoubleClick, classes, dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput, paperKey, fetchMode, currentItemUuid, title, - doHidePanel, doMaximizePanel, panelName, panelMaximized + doHidePanel, doMaximizePanel, panelName, panelMaximized, elementPath } = this.props; const dataCy = this.props["data-cy"]; return - {title && {title}} - {(!hideColumnSelector || !hideSearchInput || !!actions) && - - {!hideSearchInput &&
- {!hideSearchInput && } -
} - {actions} - {!hideColumnSelector && } - - { doMaximizePanel && !panelMaximized && - - - } - { doHidePanel && - - - } - } +
+ {title && {title}} + { + (!hideColumnSelector || !hideSearchInput || !!actions) && + + + + {!hideSearchInput &&
+ {!hideSearchInput && } +
} + {actions} + {!hideColumnSelector && } + + { doMaximizePanel && !panelMaximized && + + + } + { doHidePanel && + + + } + + + } +
- + { + elementPath && + + + {elementPath} + + + } + {fetchMode === DataTableFetchMode.PAGINATED ? = (theme: ArvadosTheme) => ({ + searchResults: { + width: '100%' + }, siteManagerLink: { marginRight: theme.spacing.unit * 2, float: 'right' @@ -111,9 +115,10 @@ export const SearchResultsPanelView = withStyles(styles, { withTheme: true })( const homeCluster = props.user.uuid.substring(0, 5); const loggedIn = props.sessions.filter((ss) => ss.loggedIn && ss.userIsActive); const [selectedItem, setSelectedItem] = useState(''); + const [itemPath, setItemPath] = useState([]); useEffect(() => { - let itemPath: string[] = []; + let tmpPath: string[] = []; (async () => { if (selectedItem !== '') { @@ -122,16 +127,16 @@ export const SearchResultsPanelView = withStyles(styles, { withTheme: true })( while (itemKind !== ResourceKind.USER) { const clusterId = searchUuid.split('-')[0]; - const serviceType = itemKind?.replace('arvados#', ''); + const serviceType = camelCase(itemKind?.replace('arvados#', '')); const service = Object.values(servicesProvider.getServices()) .filter(({resourceType}) => !!resourceType) - .find(({resourceType}) => resourceType.indexOf(serviceType) > -1); + .find(({resourceType}) => camelCase(resourceType).indexOf(serviceType) > -1); const sessions = getSearchSessions(clusterId, props.sessions); if (sessions.length > 0) { const session = sessions[0]; const { name, ownerUuid } = await (service as any).get(searchUuid, false, session); - itemPath.push(name); + tmpPath.push(name); searchUuid = ownerUuid; itemKind = extractUuidKind(searchUuid); } else { @@ -139,8 +144,8 @@ export const SearchResultsPanelView = withStyles(styles, { withTheme: true })( } } - itemPath.push(props.user.uuid === searchUuid ? 'Projects' : 'Shared with me'); - props.onPathDisplay(`/ ${itemPath.reverse().join(' / ')}`); + tmpPath.push(props.user.uuid === searchUuid ? 'Projects' : 'Shared with me'); + setItemPath(tmpPath); } })(); @@ -153,13 +158,14 @@ export const SearchResultsPanelView = withStyles(styles, { withTheme: true })( // eslint-disable-next-line react-hooks/exhaustive-deps },[props.onItemClick]); - return + return diff --git a/src/views/search-results-panel/search-results-panel.tsx b/src/views/search-results-panel/search-results-panel.tsx index 6d1d2bf5..d25682f6 100644 --- a/src/views/search-results-panel/search-results-panel.tsx +++ b/src/views/search-results-panel/search-results-panel.tsx @@ -14,7 +14,6 @@ import { SearchBarAdvancedFormData } from 'models/search-bar'; import { User } from "models/user"; import { Config } from 'common/config'; import { Session } from "models/session"; -import { snackbarActions, SnackbarKind } from "store/snackbar/snackbar-actions"; export interface SearchResultsPanelDataProps { data: SearchBarAdvancedFormData; @@ -29,7 +28,6 @@ export interface SearchResultsPanelActionProps { onContextMenu: (event: React.MouseEvent, item: string) => void; onDialogOpen: (ownerUuid: string) => void; onItemDoubleClick: (item: string) => void; - onPathDisplay: (path: string) => void; } export type SearchResultsPanelProps = SearchResultsPanelDataProps & SearchResultsPanelActionProps; @@ -51,15 +49,7 @@ const mapDispatchToProps = (dispatch: Dispatch): SearchResultsPanelActionProps = }, onItemDoubleClick: uuid => { dispatch(navigateTo(uuid)); - }, - onPathDisplay: (path: string) => { - dispatch(snackbarActions.SHIFT_MESSAGES()); - dispatch(snackbarActions.OPEN_SNACKBAR({ - message: path, - kind: SnackbarKind.INFO, - hideDuration: 9999999999, - })); - }, + } }); export const SearchResultsPanel = connect(mapStateToProps, mapDispatchToProps)(SearchResultsPanelView); -- 2.30.2