From: Janicki Artur Date: Mon, 23 Jul 2018 09:41:45 +0000 (+0200) Subject: Merge branch '13797-refatoring-part2' X-Git-Url: https://git.arvados.org/arvados.git/commitdiff_plain/7df4149100f41cc8d4a5438630ba95a1d72409a1?hp=b6a5b173cd4e9f325f371d26204dfe156d911c20 Merge branch '13797-refatoring-part2' refs #13797 2 Arvados-DCO-1.1-Signed-off-by: Janicki Artur --- diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts index f412024a36..c85acd9089 100644 --- a/src/common/custom-theme.ts +++ b/src/common/custom-theme.ts @@ -19,7 +19,7 @@ export interface ArvadosTheme extends Theme { customs: any; } -// const red = +const red900 = red["900"]; const yellow700 = yellow["700"]; const purple800 = purple["800"]; const grey200 = grey["200"]; diff --git a/src/common/formatters.ts b/src/common/formatters.ts index fe7df14c9d..38ef0223e9 100644 --- a/src/common/formatters.ts +++ b/src/common/formatters.ts @@ -10,7 +10,7 @@ export const formatDate = (isoDate: string) => { export const formatFileSize = (size?: number) => { if (typeof size === "number") { - for (const { base, unit } of fileSizes) { + for (const { base, unit } of FILE_SIZES) { if (size >= base) { return `${(size / base).toFixed()} ${unit}`; } @@ -19,7 +19,7 @@ export const formatFileSize = (size?: number) => { return ""; }; -const fileSizes = [ +const FILE_SIZES = [ { base: 1000000000000, unit: "TB" diff --git a/src/store/project-panel/project-panel-middleware.ts b/src/store/project-panel/project-panel-middleware.ts index 7ea2ffab5b..fbed1783e2 100644 --- a/src/store/project-panel/project-panel-middleware.ts +++ b/src/store/project-panel/project-panel-middleware.ts @@ -51,8 +51,8 @@ export const projectPanelMiddleware: Middleware = store => next => { const state = store.getState() as RootState; const dataExplorer = getDataExplorer(state.dataExplorer, PROJECT_PANEL_ID); const columns = dataExplorer.columns as DataColumns; - const typeFilters = getColumnFilters(columns, ProjectPanelColumnNames.Type); - const statusFilters = getColumnFilters(columns, ProjectPanelColumnNames.Status); + const typeFilters = getColumnFilters(columns, ProjectPanelColumnNames.TYPE); + const statusFilters = getColumnFilters(columns, ProjectPanelColumnNames.STATUS); const sortColumn = dataExplorer.columns.find(({ sortDirection }) => Boolean(sortDirection && sortDirection !== "none")); const sortDirection = sortColumn && sortColumn.sortDirection === SortDirection.Asc ? SortDirection.Asc : SortDirection.Desc; if (typeFilters.length > 0) { @@ -61,7 +61,7 @@ export const projectPanelMiddleware: Middleware = store => next => { limit: dataExplorer.rowsPerPage, offset: dataExplorer.page * dataExplorer.rowsPerPage, order: sortColumn - ? sortColumn.name === ProjectPanelColumnNames.Name + ? sortColumn.name === ProjectPanelColumnNames.NAME ? getOrder("name", sortDirection) : getOrder("createdAt", sortDirection) : OrderBuilder.create(), diff --git a/src/views-components/details-panel/empty-details.tsx b/src/views-components/details-panel/empty-details.tsx index f1ef274010..51112ce571 100644 --- a/src/views-components/details-panel/empty-details.tsx +++ b/src/views-components/details-panel/empty-details.tsx @@ -33,7 +33,7 @@ export interface EmptyStateDataProps { type EmptyStateProps = EmptyStateDataProps & WithStyles; const EmptyState = withStyles(styles)( - ({ classes, details, message, children }: EmptyStateProps) => + ({ classes, details, message, children, icon: Icon }: EmptyStateProps) => {message} diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx index 312a24858c..daf22b11fa 100644 --- a/src/views/project-panel/project-panel.tsx +++ b/src/views/project-panel/project-panel.tsx @@ -16,10 +16,12 @@ import { ContainerRequestState } from '../../models/container-request'; import { SortDirection } from '../../components/data-table/data-column'; import { ResourceKind } from '../../models/resource'; import { resourceLabel } from '../../common/labels'; +import { ProjectIcon, CollectionIcon, ProcessIcon, DefaultIcon } from '../../components/icon/icon'; +import { ArvadosTheme } from '../../common/custom-theme'; type CssRules = "toolbar" | "button"; -const styles: StyleRulesCallback = theme => ({ +const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ toolbar: { paddingBottom: theme.spacing.unit * 3, textAlign: "right" @@ -30,11 +32,7 @@ const styles: StyleRulesCallback = theme => ({ }); const renderName = (item: ProjectPanelItem) => - + {renderIcon(item)} @@ -49,20 +47,19 @@ const renderName = (item: ProjectPanelItem) => const renderIcon = (item: ProjectPanelItem) => { switch (item.kind) { case ResourceKind.Project: - return ; + return ; case ResourceKind.Collection: - return ; + return ; case ResourceKind.Process: - return ; + return ; default: - return ; + return ; } }; -const renderDate = (date: string) => - - {formatDate(date)} - ; +const renderDate = (date: string) => { + return {formatDate(date)}; +}; const renderFileSize = (fileSize?: number) => @@ -70,107 +67,124 @@ const renderFileSize = (fileSize?: number) => ; const renderOwner = (owner: string) => - + {owner} ; -const renderType = (type: string) => { - return +const renderType = (type: string) => + {resourceLabel(type)} ; -}; const renderStatus = (item: ProjectPanelItem) => - + {item.status || "-"} ; export enum ProjectPanelColumnNames { - Name = "Name", - Status = "Status", - Type = "Type", - Owner = "Owner", - FileSize = "File size", - LastModified = "Last modified" + NAME = "Name", + STATUS = "Status", + TYPE = "Type", + OWNER = "Owner", + FILE_SIZE = "File size", + LAST_MODIFIED = "Last modified" } export interface ProjectPanelFilter extends DataTableFilterItem { type: ResourceKind | ContainerRequestState; } -export const columns: DataColumns = [{ - name: ProjectPanelColumnNames.Name, - selected: true, - sortDirection: SortDirection.Asc, - render: renderName, - width: "450px" -}, { - name: "Status", - selected: true, - filters: [{ - name: ContainerRequestState.Committed, +export const columns: DataColumns = [ + { + name: ProjectPanelColumnNames.NAME, selected: true, - type: ContainerRequestState.Committed - }, { - name: ContainerRequestState.Final, + sortDirection: SortDirection.Asc, + render: renderName, + width: "450px" + }, + { + name: "Status", selected: true, - type: ContainerRequestState.Final - }, { - name: ContainerRequestState.Uncommitted, + filters: [ + { + name: ContainerRequestState.Committed, + selected: true, + type: ContainerRequestState.Committed + }, + { + name: ContainerRequestState.Final, + selected: true, + type: ContainerRequestState.Final + }, + { + name: ContainerRequestState.Uncommitted, + selected: true, + type: ContainerRequestState.Uncommitted + } + ], + render: renderStatus, + width: "75px" + }, + { + name: ProjectPanelColumnNames.TYPE, selected: true, - type: ContainerRequestState.Uncommitted - }], - render: renderStatus, - width: "75px" -}, { - name: ProjectPanelColumnNames.Type, - selected: true, - filters: [{ - name: resourceLabel(ResourceKind.Collection), + filters: [ + { + name: resourceLabel(ResourceKind.Collection), + selected: true, + type: ResourceKind.Collection + }, + { + name: resourceLabel(ResourceKind.Process), + selected: true, + type: ResourceKind.Process + }, + { + name: resourceLabel(ResourceKind.Project), + selected: true, + type: ResourceKind.Project + } + ], + render: item => renderType(item.kind), + width: "125px" + }, + { + name: ProjectPanelColumnNames.OWNER, selected: true, - type: ResourceKind.Collection - }, { - name: resourceLabel(ResourceKind.Process), + render: item => renderOwner(item.owner), + width: "200px" + }, + { + name: ProjectPanelColumnNames.FILE_SIZE, selected: true, - type: ResourceKind.Process - }, { - name: resourceLabel(ResourceKind.Project), + render: item => renderFileSize(item.fileSize), + width: "50px" + }, + { + name: ProjectPanelColumnNames.LAST_MODIFIED, selected: true, - type: ResourceKind.Project - }], - render: item => renderType(item.kind), - width: "125px" -}, { - name: ProjectPanelColumnNames.Owner, - selected: true, - render: item => renderOwner(item.owner), - width: "200px" -}, { - name: ProjectPanelColumnNames.FileSize, - selected: true, - render: item => renderFileSize(item.fileSize), - width: "50px" -}, { - name: ProjectPanelColumnNames.LastModified, - selected: true, - sortDirection: SortDirection.None, - render: item => renderDate(item.lastModified), - width: "150px" -}]; + sortDirection: SortDirection.None, + render: item => renderDate(item.lastModified), + width: "150px" + } +]; export const PROJECT_PANEL_ID = "projectPanel"; -type ProjectPanelProps = { - currentItemId: string, - onItemClick: (item: ProjectPanelItem) => void, +interface ProjectPanelDataProps { + currentItemId: string; +} + +interface ProjectPanelActionProps { + onItemClick: (item: ProjectPanelItem) => void; onContextMenu: (event: React.MouseEvent, item: ProjectPanelItem) => void; onDialogOpen: (ownerUuid: string) => void; - onItemDoubleClick: (item: ProjectPanelItem) => void, - onItemRouteChange: (itemId: string) => void + onItemDoubleClick: (item: ProjectPanelItem) => void; + onItemRouteChange: (itemId: string) => void; } - & DispatchProp - & WithStyles - & RouteComponentProps<{ id: string }>; + +type ProjectPanelProps = ProjectPanelDataProps & ProjectPanelActionProps & DispatchProp + & WithStyles & RouteComponentProps<{ id: string }>; export const ProjectPanel = withStyles(styles)( connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))( @@ -208,4 +222,4 @@ export const ProjectPanel = withStyles(styles)( } } ) -); +); \ No newline at end of file