From 065250a91a6c99ac8c764582d0a6f9e23be246fc Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Mon, 16 Dec 2024 13:03:11 +0530 Subject: [PATCH 1/4] fix: some catalog bugs Signed-off-by: Amit Amrutiya --- .../CatalogDesignTable/CatalogDesignTable.tsx | 7 +-- src/custom/CatalogDetail/RelatedDesigns.tsx | 4 +- .../CatalogDetail/SocialSharePopper.tsx | 28 +++++----- src/custom/CatalogDetail/style.tsx | 27 ++++------ .../VisibilityChipMenu/VisibilityChipMenu.tsx | 52 +++++++++++-------- 5 files changed, 61 insertions(+), 57 deletions(-) diff --git a/src/custom/CatalogDesignTable/CatalogDesignTable.tsx b/src/custom/CatalogDesignTable/CatalogDesignTable.tsx index 064015e4a..0f53b2b00 100644 --- a/src/custom/CatalogDesignTable/CatalogDesignTable.tsx +++ b/src/custom/CatalogDesignTable/CatalogDesignTable.tsx @@ -144,10 +144,9 @@ export const CatalogDesignsTable: React.FC = ({ page, elevation: 0, sortOrder: { - name: 'updated_at', - direction: 'desc' + name: sortOrder.split(' ')[0], + direction: sortOrder.split(' ')[1] }, - onTableChange: handleTableChange, customToolbarSelect: _.isNil(filter) ? (selected: any) => ( @@ -175,6 +174,7 @@ export const CatalogDesignsTable: React.FC = ({ filter, totalCount, pageSize, + sortOrder, page, handleTableChange, patterns, @@ -194,6 +194,7 @@ export const CatalogDesignsTable: React.FC = ({ columns={processedColumns} // eslint-disable-next-line @typescript-eslint/ban-ts-comment //@ts-ignore + rowsPerPageOptions={[15, 30, 45, 60, 75]} data={patterns || []} options={options} colViews={colViews} diff --git a/src/custom/CatalogDetail/RelatedDesigns.tsx b/src/custom/CatalogDetail/RelatedDesigns.tsx index 9449f21f9..41f92d5e0 100644 --- a/src/custom/CatalogDetail/RelatedDesigns.tsx +++ b/src/custom/CatalogDetail/RelatedDesigns.tsx @@ -36,13 +36,13 @@ const RelatedDesigns: React.FC = ({ ); if (!filteredPatternsPerUser?.length) return null; - + const organizationName = fetchingOrgError || !orgName ? 'Unknown Organization' : orgName; return (

Other published design by {formatToTitleCase(userProfile?.first_name ?? '')}{' '} - {fetchingOrgError ? '' : `under ${orgName}`} + {fetchingOrgError ? '' : `under ${organizationName}`}

diff --git a/src/custom/CatalogDetail/SocialSharePopper.tsx b/src/custom/CatalogDetail/SocialSharePopper.tsx index f60866127..3f1a189e6 100644 --- a/src/custom/CatalogDetail/SocialSharePopper.tsx +++ b/src/custom/CatalogDetail/SocialSharePopper.tsx @@ -1,3 +1,4 @@ +import { Lock, Public } from '@mui/icons-material'; import { Box, IconButton, Menu, MenuItem } from '@mui/material'; import React, { useState } from 'react'; import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share'; @@ -7,13 +8,9 @@ import { useTheme } from '../../theme'; import { Pattern } from '../CustomCatalog/CustomCard'; import { CustomTooltip } from '../CustomTooltip'; import { ErrorBoundary } from '../ErrorBoundary'; -import { - CopyShareIconWrapper, - ShareButton, - ShareButtonGroup, - ShareSideButton, - VisibilityChip -} from './style'; +import { VisibilityChipMenu } from '../VisibilityChipMenu'; +import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu'; +import { CopyShareIconWrapper, ShareButton, ShareButtonGroup, ShareSideButton } from './style'; interface SocialSharePopperProps { details: Pattern; @@ -53,14 +50,15 @@ const SocialSharePopper: React.FC = ({ return ( - - {details?.visibility} - - + {}} + enabled={false} + options={[ + [VIEW_VISIBILITY.PUBLIC, Public], + [VIEW_VISIBILITY.PRIVATE, Lock] + ]} + /> {showShareAction ? ( diff --git a/src/custom/CatalogDetail/style.tsx b/src/custom/CatalogDetail/style.tsx index ae6c1f052..10afeefa4 100644 --- a/src/custom/CatalogDetail/style.tsx +++ b/src/custom/CatalogDetail/style.tsx @@ -1,8 +1,8 @@ -import { Button, ButtonGroup, Link, ListItemButton, Paper, Typography } from '../../base'; +import { Button, ButtonGroup, Link, ListItemButton, Typography } from '../../base'; import { styled } from '../../theme'; import { Theme } from './types'; -export const StyledActionWrapper = styled(Paper)(() => ({ +export const StyledActionWrapper = styled('div')(({ theme }) => ({ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.2)', justifyContent: 'center', width: '100%', @@ -12,7 +12,8 @@ export const StyledActionWrapper = styled(Paper)(() => ({ flexDirection: 'column', gap: '1rem', padding: '0.6rem', - alignItems: 'center' + alignItems: 'center', + backgroundColor: theme.palette.background.default })); interface ActionButtonProps { @@ -139,7 +140,8 @@ export const ContentDetailsPoints = styled(Typography)(() => ({ fontFamily: 'inherit' })); -export const MetricsSection = styled('div')(() => ({ +export const MetricsSection = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.background.default, padding: '1.1rem', marginTop: '0.5rem', display: 'flex', @@ -152,7 +154,8 @@ export const MetricsSection = styled('div')(() => ({ } })); -export const MetricsContainer = styled('div')(() => ({ +export const MetricsContainer = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.background.default, display: 'flex', flexDirection: 'column', justifyContent: 'center', @@ -236,13 +239,14 @@ export const AdditionalContainer = styled('div')(({ theme }) => ({ borderRadius: '0.4rem' })); -export const DesignCardContainer = styled('div')(() => ({ +export const DesignCardContainer = styled('div')(({ theme }) => ({ display: 'flex', flexWrap: 'wrap', flex: '0 0 75%', gap: '2rem', justifyContent: 'space-around', - height: 'fit-content' + height: 'fit-content', + backgroundColor: theme.palette.background.default })); export const CopyShareIconWrapper = styled(ContentHeading)(() => ({ @@ -251,15 +255,6 @@ export const CopyShareIconWrapper = styled(ContentHeading)(() => ({ width: 'fit-content' })); -export const VisibilityChip = styled('div')(() => ({ - borderRadius: '0.5rem', - border: '1px solid gray', - padding: '0.2rem 0.5rem', - textTransform: 'capitalize', - color: '#1a1a1acc', - width: 'fit-content' -})); - export const RedirectLink = styled(Link)(({ theme }) => ({ color: theme.palette.background.brand?.default, textDecoration: 'none', diff --git a/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx b/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx index 86492ff1c..1df96c1f3 100644 --- a/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx +++ b/src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx @@ -1,12 +1,20 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; -import { Theme } from '@mui/material'; +import { Theme, useTheme } from '@mui/material'; import { MouseEvent, useState } from 'react'; import { Button, Menu, MenuItem } from '../../base'; import { iconXSmall } from '../../constants/iconsSizes'; import { ALICE_BLUE, CHINESE_SILVER, NOT_FOUND, styled } from '../../theme'; +export const VIEW_VISIBILITY = { + PUBLIC: 'public', + PRIVATE: 'private', + PUBLISHED: 'published' +} as const; + +export type VIEW_VISIBILITY = (typeof VIEW_VISIBILITY)[keyof typeof VIEW_VISIBILITY]; + interface VisibilityChipMenuProps { - value: string; + value: VIEW_VISIBILITY; onChange: (value: string) => void; options: [string, React.ElementType][]; enabled: boolean; @@ -42,24 +50,25 @@ const StyledButton = styled(Button)(() => ({ width: '100%' })); -const StyledDiv = styled('div')(({ theme, enabled }: { theme?: Theme; enabled: boolean }) => ({ - paddingLeft: '0.3rem', - height: '1.5rem', - paddingRight: enabled ? '0' : '0.3rem', - borderRadius: '0.25rem', - border: `1px solid ${NOT_FOUND}`, - background: - theme?.palette.mode === 'light' ? ALICE_BLUE : theme?.palette.background.constant?.table, - - textTransform: 'uppercase', - color: theme?.palette.text.default, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - width: '3.8rem', - fontSize: '0.75rem', - fontFamily: theme?.typography.fontFamily -})); +const StyledDiv = styled('div')( + ({ theme, enabled, type }: { theme: Theme; enabled: boolean; type: VIEW_VISIBILITY }) => ({ + paddingLeft: '0.3rem', + height: '1.5rem', + paddingRight: enabled ? '0' : '0.3rem', + borderRadius: '0.25rem', + border: `1px solid ${NOT_FOUND}`, + background: + theme?.palette.mode === 'light' ? ALICE_BLUE : theme?.palette.background.constant?.table, + textTransform: 'uppercase', + color: theme?.palette.text.default, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: type !== 'published' ? '3.8rem' : 'auto', + fontSize: '0.75rem', + fontFamily: theme?.typography.fontFamily + }) +); const StyledMenuItem = styled(MenuItem)(({ theme }) => ({ textTransform: 'capitalize', @@ -92,6 +101,7 @@ const VisibilityChipMenu: React.FC = ({ onChange(value); close(e); }; + const theme = useTheme(); return ( <> = ({ onClick={handleOpen} data-testid={`design-visibility-${value.toLowerCase()}`} > - + {value} {enabled && } From 4cf7f84843f6f817d21cb27f1e1fd384209208d8 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Sat, 14 Dec 2024 13:15:07 +0530 Subject: [PATCH 2/4] fix: build issue Signed-off-by: Amit Amrutiya --- src/custom/CatalogDesignTable/CatalogDesignTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/CatalogDesignTable/CatalogDesignTable.tsx b/src/custom/CatalogDesignTable/CatalogDesignTable.tsx index 0f53b2b00..89e1e223a 100644 --- a/src/custom/CatalogDesignTable/CatalogDesignTable.tsx +++ b/src/custom/CatalogDesignTable/CatalogDesignTable.tsx @@ -194,8 +194,8 @@ export const CatalogDesignsTable: React.FC = ({ columns={processedColumns} // eslint-disable-next-line @typescript-eslint/ban-ts-comment //@ts-ignore - rowsPerPageOptions={[15, 30, 45, 60, 75]} data={patterns || []} + rowsPerPageOptions={[15, 30, 45, 60, 75]} options={options} colViews={colViews} tableCols={processedColumns} From 53b8d249a4aeb14acb84e19931ced425c2e699b3 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Mon, 16 Dec 2024 13:48:37 +0530 Subject: [PATCH 3/4] fix: wrong sort direction Signed-off-by: Amit Amrutiya --- .../CatalogDesignTable/CatalogDesignTable.tsx | 4 +++- .../DesignTableColumnConfig.tsx | 2 +- .../TeamTable/TeamTableConfiguration.tsx | 18 +++++++++++++----- src/custom/UsersTable/UsersTable.tsx | 6 +++--- src/custom/Workspaces/DesignTable.tsx | 2 +- src/custom/Workspaces/EnvironmentTable.tsx | 6 +++--- src/custom/Workspaces/WorkspaceTeamsTable.tsx | 2 +- 7 files changed, 25 insertions(+), 15 deletions(-) diff --git a/src/custom/CatalogDesignTable/CatalogDesignTable.tsx b/src/custom/CatalogDesignTable/CatalogDesignTable.tsx index 89e1e223a..552420b8e 100644 --- a/src/custom/CatalogDesignTable/CatalogDesignTable.tsx +++ b/src/custom/CatalogDesignTable/CatalogDesignTable.tsx @@ -25,6 +25,7 @@ interface CatalogDesignsTableProps { setPage: (page: number) => void; columnVisibility: Record; colViews: ColView[]; + rowsPerPageOptions?: number[]; handleBulkDeleteModal: (patterns: Pattern[], modalRef: React.RefObject) => void; setSearch?: (search: string) => void; handleBulkpatternsDataUnpublishModal: ( @@ -49,6 +50,7 @@ export const CatalogDesignsTable: React.FC = ({ colViews = [], handleBulkDeleteModal, setSearch, + rowsPerPageOptions = [10, 25, 50, 100], handleBulkpatternsDataUnpublishModal }) => { const theme = useTheme(); @@ -195,7 +197,7 @@ export const CatalogDesignsTable: React.FC = ({ // eslint-disable-next-line @typescript-eslint/ban-ts-comment //@ts-ignore data={patterns || []} - rowsPerPageOptions={[15, 30, 45, 60, 75]} + rowsPerPageOptions={rowsPerPageOptions} options={options} colViews={colViews} tableCols={processedColumns} diff --git a/src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx b/src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx index 06c092e9d..ad884cee7 100644 --- a/src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx +++ b/src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx @@ -72,7 +72,7 @@ export const createDesignsColumnsConfig = ({ }, { name: 'name', - label: 'Pattern Name', + label: 'Name', options: { filter: false, sort: true, diff --git a/src/custom/TeamTable/TeamTableConfiguration.tsx b/src/custom/TeamTable/TeamTableConfiguration.tsx index 8ebd63216..80d584a99 100644 --- a/src/custom/TeamTable/TeamTableConfiguration.tsx +++ b/src/custom/TeamTable/TeamTableConfiguration.tsx @@ -111,7 +111,8 @@ export default function TeamTableConfiguration({ ['name', 'xs'], ['description', 'm'], ['owner', 'l'], - ['created_at', 'xl'], + ['created_at', 'na'], + ['updated_at', 'xl'], ['deleted_at', 'na'], ['actions', 'xs'] ]; @@ -165,6 +166,16 @@ export default function TeamTableConfiguration({ sortDescFirst: true } }, + { + name: 'updated_at', + label: 'Updated At', + options: { + filter: false, + sort: true, + searchable: false, + sortDescFirst: true + } + }, { name: 'deleted_at', label: 'Deleted At', @@ -290,10 +301,7 @@ export default function TeamTableConfiguration({ backgroundColor: '#f3f1f1' } }, - sortOrder: { - name: 'created_at', - direction: 'desc' - }, + viewColumns: false, search: false, rowsExpanded: [ExpandedRowIdx], diff --git a/src/custom/UsersTable/UsersTable.tsx b/src/custom/UsersTable/UsersTable.tsx index 16d991b82..ba389b1c4 100644 --- a/src/custom/UsersTable/UsersTable.tsx +++ b/src/custom/UsersTable/UsersTable.tsx @@ -70,7 +70,7 @@ const UsersTable: React.FC = ({ }) => { const [page, setPage] = useState(0); const [pageSize, setPageSize] = useState(10); - const [sortOrder, setSortOrder] = useState(''); + const [sortOrder, setSortOrder] = useState('last_login_time desc'); const [search, setSearch] = useState(''); const availableRoles: string[] = []; const { handleError, handleSuccess, handleInfo } = useNotificationHandlers(); @@ -176,8 +176,8 @@ const UsersTable: React.FC = ({ elevation: 0, serverSide: true, sortOrder: { - name: 'last_login_time', - direction: 'desc' + name: sortOrder.split(' ')[0], + direction: sortOrder.split(' ')[1] }, onTableChange: (action: string, tableState: any) => { const sortInfo = tableState.announceText ? tableState.announceText.split(' : ') : []; diff --git a/src/custom/Workspaces/DesignTable.tsx b/src/custom/Workspaces/DesignTable.tsx index d0d1f3e2f..594f3e0d8 100644 --- a/src/custom/Workspaces/DesignTable.tsx +++ b/src/custom/Workspaces/DesignTable.tsx @@ -104,7 +104,7 @@ const DesignTable: React.FC = ({ const modalRef = useRef(null); const [page, setPage] = useState(0); const [pageSize, setPageSize] = useState(10); - const [sortOrder, setSortOrder] = useState(''); + const [sortOrder, setSortOrder] = useState('updated_at desc'); const [isSearchExpanded, setIsSearchExpanded] = useState(false); const handlePublishModal = (pattern: Pattern): void => { diff --git a/src/custom/Workspaces/EnvironmentTable.tsx b/src/custom/Workspaces/EnvironmentTable.tsx index 127a1339d..79aa6739c 100644 --- a/src/custom/Workspaces/EnvironmentTable.tsx +++ b/src/custom/Workspaces/EnvironmentTable.tsx @@ -70,7 +70,7 @@ const EnvironmentTable: React.FC = ({ const [isSearchExpanded, setIsSearchExpanded] = useState(false); const [page, setPage] = useState(0); const [pageSize, setPageSize] = useState(10); - const [sortOrder, setSortOrder] = useState(''); + const [sortOrder, setSortOrder] = useState('updated_at desc'); const { data: environmentsOfWorkspace } = useGetEnvironmentsOfWorkspaceQuery({ workspaceId, page: page, @@ -197,8 +197,8 @@ const EnvironmentTable: React.FC = ({ page, elevation: 0, sortOrder: { - name: 'updated_at', - direction: 'desc' + name: sortOrder.split(' ')[0], + direction: sortOrder.split(' ')[1] }, serverSide: true, onTableChange: (action: string, tableState: any) => { diff --git a/src/custom/Workspaces/WorkspaceTeamsTable.tsx b/src/custom/Workspaces/WorkspaceTeamsTable.tsx index 74173c8c0..5dca13041 100644 --- a/src/custom/Workspaces/WorkspaceTeamsTable.tsx +++ b/src/custom/Workspaces/WorkspaceTeamsTable.tsx @@ -49,7 +49,7 @@ const TeamsTable: React.FC = ({ }) => { const [page, setPage] = useState(0); const [pageSize, setPageSize] = useState(10); - const [sortOrder, setSortOrder] = useState(''); + const [sortOrder, setSortOrder] = useState('updated_at desc'); const [bulkSelect, setBulkSelect] = useState(false); const [expanded, setExpanded] = useState(true); const handleAccordionChange = () => { From 8f7ab6f74e99bf513c97ded633ecdd9980c88b29 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Mon, 16 Dec 2024 16:13:14 +0530 Subject: [PATCH 4/4] feat: change typography for table and search Signed-off-by: Amit Amrutiya --- src/custom/CustomTooltip/customTooltip.tsx | 2 +- src/custom/ResponsiveDataTable.tsx | 5 ++++- src/custom/SearchBar.tsx | 3 +++ src/custom/StyledSearchBar/style.tsx | 1 + 4 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx index 0568d9ac6..22e9a8433 100644 --- a/src/custom/CustomTooltip/customTooltip.tsx +++ b/src/custom/CustomTooltip/customTooltip.tsx @@ -1,5 +1,5 @@ -import { Tooltip, type TooltipProps } from '@mui/material'; import React from 'react'; +import { Tooltip, TooltipProps } from '../../base'; import { WHITE } from '../../theme'; import { RenderMarkdownTooltip } from '../Markdown'; diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx index 489abb38c..9e17c945a 100644 --- a/src/custom/ResponsiveDataTable.tsx +++ b/src/custom/ResponsiveDataTable.tsx @@ -57,6 +57,7 @@ export const DataTableEllipsisMenu: React.FC<{ open={Boolean(anchorEl)} onClose={handleClose} sx={{ + fontFamily: theme?.typography.fontFamily, '& .MuiPaper-root': { backgroundColor: theme?.palette.background.default ?? 'white' } @@ -122,6 +123,9 @@ export const DataTableEllipsisMenu: React.FC<{ const dataTableTheme = (theme: Theme, backgroundColor?: string) => createTheme({ + typography: { + fontFamily: theme.typography.fontFamily + }, components: { MuiPaper: { styleOverrides: { @@ -134,7 +138,6 @@ const dataTableTheme = (theme: Theme, backgroundColor?: string) => MuiTable: { styleOverrides: { root: { - // border: `2px solid ${theme.palette.border.normal}`, width: '-webkit-fill-available', '@media (max-width: 500px)': { wordWrap: 'break-word' diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index 23411c2d5..91ffd9458 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -11,6 +11,9 @@ import { TooltipIcon } from './TooltipIconButton'; const customTheme = (theme: Theme) => createTheme({ + typography: { + fontFamily: theme.typography.fontFamily + }, components: { MuiTextField: { styleOverrides: { diff --git a/src/custom/StyledSearchBar/style.tsx b/src/custom/StyledSearchBar/style.tsx index 9f7026721..f519cc837 100644 --- a/src/custom/StyledSearchBar/style.tsx +++ b/src/custom/StyledSearchBar/style.tsx @@ -2,6 +2,7 @@ import { styled } from '@mui/material'; import { InputAdornment, OutlinedInput } from '../../base'; export const StyledSearchInput = styled(OutlinedInput)(({ style, theme }) => ({ + fontFamily: theme.typography.fontFamily, width: '100%', '@media (max-width: 590px)': { marginLeft: '0.25rem',