Merge pull request #854 from amitamrutiya/fix-build

Fix catalog bug and ui theme color issue
layer5io · Dec 16, 2024 · 588d510 · 588d510
2 parents 12bded0 + 8f7ab6f
commit 588d510
Show file tree

Hide file tree

Showing 15 changed files with 94 additions and 73 deletions.
diff --git a/src/custom/CatalogDesignTable/CatalogDesignTable.tsx b/src/custom/CatalogDesignTable/CatalogDesignTable.tsx
@@ -25,6 +25,7 @@ interface CatalogDesignsTableProps {
   setPage: (page: number) => void;
   columnVisibility: Record<string, boolean>;
   colViews: ColView[];
+  rowsPerPageOptions?: number[];
   handleBulkDeleteModal: (patterns: Pattern[], modalRef: React.RefObject<PromptRef>) => void;
   setSearch?: (search: string) => void;
   handleBulkpatternsDataUnpublishModal: (
@@ -49,6 +50,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
   colViews = [],
   handleBulkDeleteModal,
   setSearch,
+  rowsPerPageOptions = [10, 25, 50, 100],
   handleBulkpatternsDataUnpublishModal
 }) => {
   const theme = useTheme();
@@ -144,10 +146,9 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
       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 +176,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
       filter,
       totalCount,
       pageSize,
+      sortOrder,
       page,
       handleTableChange,
       patterns,
@@ -195,6 +197,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore
         data={patterns || []}
+        rowsPerPageOptions={rowsPerPageOptions}
         options={options}
         colViews={colViews}
         tableCols={processedColumns}

diff --git 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/CatalogDetail/RelatedDesigns.tsx b/src/custom/CatalogDetail/RelatedDesigns.tsx
@@ -36,13 +36,13 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
   );
 
   if (!filteredPatternsPerUser?.length) return null;
-
+  const organizationName = fetchingOrgError || !orgName ? 'Unknown Organization' : orgName;
   return (
     <AdditionalContainer>
       <ContentHeading>
         <h2 style={{ margin: '0', textTransform: 'uppercase' }}>
           Other published design by {formatToTitleCase(userProfile?.first_name ?? '')}{' '}
-          {fetchingOrgError ? '' : `under ${orgName}`}
+          {fetchingOrgError ? '' : `under ${organizationName}`}
         </h2>
       </ContentHeading>
       <DesignCardContainer>

diff --git 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<SocialSharePopperProps> = ({
   return (
     <ErrorBoundary>
       <CopyShareIconWrapper style={{ marginBottom: '2rem' }}>
-        <VisibilityChip
-          style={{
-            color: theme.palette.text.default
-          }}
-        >
-          {details?.visibility}
-        </VisibilityChip>
-
+        <VisibilityChipMenu
+          value={details?.visibility as VIEW_VISIBILITY}
+          onChange={() => {}}
+          enabled={false}
+          options={[
+            [VIEW_VISIBILITY.PUBLIC, Public],
+            [VIEW_VISIBILITY.PRIVATE, Lock]
+          ]}
+        />
         {showShareAction ? (
           <ShareButtonGroup variant="contained">
             <CustomTooltip title="Change access and visibility">

diff --git 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/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
@@ -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
@@ -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
@@ -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',

diff --git 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
@@ -70,7 +70,7 @@ const UsersTable: React.FC<UsersTableProps> = ({
 }) => {
   const [page, setPage] = useState<number>(0);
   const [pageSize, setPageSize] = useState<number>(10);
-  const [sortOrder, setSortOrder] = useState<string>('');
+  const [sortOrder, setSortOrder] = useState<string>('last_login_time desc');
   const [search, setSearch] = useState<string>('');
   const availableRoles: string[] = [];
   const { handleError, handleSuccess, handleInfo } = useNotificationHandlers();
@@ -176,8 +176,8 @@ const UsersTable: React.FC<UsersTableProps> = ({
     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/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,14 +101,15 @@ const VisibilityChipMenu: React.FC<VisibilityChipMenuProps> = ({
     onChange(value);
     close(e);
   };
+  const theme = useTheme();
   return (
     <>
       <StyledButton
         disabled={!enabled}
         onClick={handleOpen}
         data-testid={`design-visibility-${value.toLowerCase()}`}
       >
-        <StyledDiv enabled={enabled}>
+        <StyledDiv theme={theme} enabled={enabled} type={value}>
           <span style={{ fontSize: '0.7rem' }}>{value}</span>
           {enabled && <ArrowDropDownIcon style={{ ...iconXSmall }} />}
         </StyledDiv>

diff --git a/src/custom/Workspaces/DesignTable.tsx b/src/custom/Workspaces/DesignTable.tsx
@@ -104,7 +104,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
   const modalRef = useRef(null);
   const [page, setPage] = useState<number>(0);
   const [pageSize, setPageSize] = useState<number>(10);
-  const [sortOrder, setSortOrder] = useState<string>('');
+  const [sortOrder, setSortOrder] = useState<string>('updated_at desc');
   const [isSearchExpanded, setIsSearchExpanded] = useState(false);
 
   const handlePublishModal = (pattern: Pattern): void => {