rm merge conflicts

Signed-off-by: Sudhanshu Dasgupta <[email protected]>
layer5io · Dec 17, 2024 · 2aa231c · 2aa231c
2 parents d67c431 + 588d510
commit 2aa231c
Show file tree

Hide file tree

Showing 23 changed files with 261 additions and 59 deletions.
diff --git a/.github/workflows/preview-site.yml b/.github/workflows/preview-site.yml
@@ -14,7 +14,7 @@ jobs:
         uses: actions/[email protected]
 
       - name: Download Site dir
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v6
         with:
           github_token: ${{ secrets.GH_ACCESS_TOKEN }}
           workflow: build-and-preview-site.yml

diff --git a/src/constants/iconsSizes.ts b/src/constants/iconsSizes.ts
@@ -1,5 +1,10 @@
 // icon styles, setting general height and width properties to solves scaling and consistency problems
 
+export const iconXSmall = {
+  height: 16,
+  width: 16
+};
+
 export const iconSmall = {
   height: 20,
   width: 20

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/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx
@@ -80,15 +80,15 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
               backgroundColor: 'transparent',
               border: `1px solid ${theme.palette.border.normal}`,
               gap: '10px',
-              color: charcoal[10]
+              color: theme.palette.text.default
             }}
             onClick={() =>
               cleanedType === RESOURCE_TYPES.FILTERS
                 ? downloadFilter(details.id, details.name)
                 : downloadYaml(details.pattern_file, details.name)
             }
           >
-            <Download width={24} height={24} fill={charcoal[10]} />
+            <Download width={24} height={24} fill={theme.palette.icon.default} />
             Download
           </ActionButton>
 
@@ -108,7 +108,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
                 <CircularProgress size={24} color={'inherit'} />
               ) : (
                 <>
-                  <CopyIcon width={24} height={24} fill={charcoal[10]} />
+                  <CopyIcon width={24} height={24} fill={theme.palette.icon.default} />
                   Clone
                 </>
               )}
@@ -136,7 +136,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
             }}
             onClick={handleInfoClick}
           >
-            <EditIcon width={24} height={24} fill={charcoal[10]} />
+            <EditIcon width={24} height={24} fill={theme.palette.icon.default} />
             Edit
           </ActionButton>
         )}
@@ -151,7 +151,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
             }}
             onClick={handleShare}
           >
-            <ShareLineIcon width="24" height="24" fill={charcoal[10]} />
+            <ShareLineIcon width="24" height="24" fill={theme.palette.icon.default} />
             Share
           </ActionButton>
         )}

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,12 +1,24 @@
 import { Box, IconButton, Menu, MenuItem } from '@mui/material';
 import React, { useState } from 'react';
 import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
-import { ChainIcon, FacebookIcon, LinkedinIcon, ShareIcon, TwitterIcon } from '../../icons';
+
+import {
+  ChainIcon,
+  FacebookIcon,
+  LinkedinIcon,
+  LockIcon,
+  PublicIcon,
+  ShareIcon,
+  TwitterIcon
+} from '../../icons';
 import { useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { CustomTooltip } from '../CustomTooltip';
 import { ErrorBoundary } from '../ErrorBoundary';
-import { CopyShareIconWrapper, VisibilityChip } from './style';
+
+import { VisibilityChipMenu } from '../VisibilityChipMenu';
+import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
+import { CopyShareIconWrapper } from './style';
 
 interface SocialSharePopperProps {
   details: Pattern;
@@ -44,13 +56,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, PublicIcon],
+            [VIEW_VISIBILITY.PRIVATE, LockIcon]
+          ]}
+        />
 
         <CustomTooltip title="Copy Link" placement="top" arrow>
           <IconButton

diff --git a/src/custom/CatalogDetail/style.tsx b/src/custom/CatalogDetail/style.tsx
@@ -1,8 +1,8 @@
-import { 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,17 +255,29 @@ 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',
   cursor: 'pointer'
 }));
+
+export const ShareButtonGroup = styled(ButtonGroup)({
+  boxShadow: 'none',
+  border: 'none',
+  outline: 'none',
+  height: '76%'
+});
+
+export const ShareButton = styled(Button)(({ theme }) => ({
+  backgroundColor: theme.palette.background.brand?.default,
+  color: 'white',
+  border: 'none',
+  borderRadius: '0.5rem 0px 0px 0.5rem'
+}));
+
+export const ShareSideButton = styled(Button)(({ theme }) => ({
+  backgroundColor: theme.palette.background.brand?.default,
+  color: 'white',
+  border: 'none',
+  borderRadius: '0px 0.5rem  0.5rem 0px'
+}));
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';
 
@@ -21,7 +21,7 @@ function CustomTooltip({
   fontSize,
   fontWeight = 400,
   variant = 'standard',
-  bgColor = '#333333',
+  bgColor = '#141414',
   ...props
 }: CustomTooltipProps): JSX.Element {
   return (
@@ -35,8 +35,7 @@ function CustomTooltip({
             fontWeight: { fontWeight },
             borderRadius: '0.5rem',
             padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem',
-            boxShadow:
-              'rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px'
+            boxShadow: 'rgba(0, 0, 0, 0.6) 0px 4px 10px, rgba(0, 0, 0, 0.5) 0px 2px 4px'
           }
         },
         popper: {

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/UserSearchField/UserSearchField.tsx b/src/custom/UserSearchField/UserSearchField.tsx
@@ -136,6 +136,8 @@ const UserShareSearch: React.FC<UserSearchFieldProps> = ({
       <Autocomplete
         id="user-search-field"
         sx={{ width: 'auto' }}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         filterOptions={(x) => x}
         options={options}
         disableClearable