Merge branch 'master' into patch-1

Author: amitamrutiya

src/constants/constants.ts

@@ -67,3 +67,21 @@ export const MESHERY_CLOUD_PROD = 'https://cloud.layer5.io';
 export const MESHERY_CLOUD_STAGING = 'staging-cloud.layer5.io';
 export const MESHERY_CLOUD_WS_PROD = 'cloud-ws.layer5.io';
 export const MESHERY_CLOUD_WS_STAGING = 'staging-cloud-ws.layer5.io:6543';
+
+export const EVENT_TYPES = {
+  SUCCESS: {
+    type: 'success'
+  },
+  DEFAULT: {
+    type: 'default'
+  },
+  INFO: {
+    type: 'info'
+  },
+  WARNING: {
+    type: 'warning'
+  },
+  ERROR: {
+    type: 'error'
+  }
+};

src/custom/Carousel/style.tsx

@@ -17,28 +17,31 @@ export const CarouselButton = styled('button')(({ theme }) => ({
     color: '#fff'
   },
   '&:first-of-type': {
-    left: '-1.2rem'
+    left: '-0.5rem'
   },
   '&:last-of-type': {
-    right: '-1.2rem'
+    right: '-0.5rem'
   }
 }));
 
 export const CarouselWrapper = styled('div')({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
-  position: 'relative'
+  position: 'relative',
+  padding: '0 3rem'
 });
 
 export const CarouselContainer = styled('div')({
   display: 'flex',
   overflowX: 'auto',
   scrollBehavior: 'smooth',
   scrollSnapType: 'x mandatory',
-  gap: '1rem',
-  padding: '1rem 0',
+  gap: '0.5rem',
+  paddingBottom: '1rem',
   width: '100%',
+  msOverflowStyle: 'none',
+  scrollbarWidth: 'none',
   '&::-webkit-scrollbar': {
     display: 'none'
   },

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -1,10 +1,9 @@
 import { Lock, Public } from '@mui/icons-material';
-import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
 import { Theme } from '@mui/material';
 import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
 import { Typography } from '../../base';
 import { PLAYGROUND_MODES } from '../../constants/constants';
-import { ChainIcon, CopyIcon, KanvasIcon, PublishIcon } from '../../icons';
+import { ChainIcon, CopyIcon, KanvasIcon, MoveFileIcon, PublishIcon } from '../../icons';
 import Download from '../../icons/Download/Download';
 import { downloadPattern, slugify } from '../CatalogDetail/helper';
 import { RESOURCE_TYPES } from '../CatalogDetail/types';
@@ -267,14 +266,10 @@ export const createDesignsColumnsConfig = ({
             },
 
             {
-              title: isFromWorkspaceTable ? 'Move Design' : 'Delete',
-              disabled: isFromWorkspaceTable ? !isRemoveAllowed : !isDeleteAllowed,
+              title: 'Delete',
+              disabled: !isDeleteAllowed,
               onClick: () => handleDeleteModal(rowData)(),
-              icon: isFromWorkspaceTable ? (
-                <RemoveCircleIcon style={{ color: theme?.palette.icon.default }} />
-              ) : (
-                <L5DeleteIcon />
-              )
+              icon: <L5DeleteIcon />
             }
           ].filter((a) => a?.hidden != true);
 
@@ -299,6 +294,17 @@ export const createDesignsColumnsConfig = ({
             icon: <CopyIcon width={24} height={24} fill={theme?.palette.icon.secondary} />
           };
 
+          const moveAction = {
+            title: 'Move Design',
+            disabled: !isRemoveAllowed,
+            onClick: () => handleDeleteModal(rowData)(),
+            icon: <MoveFileIcon />
+          };
+
+          if (isFromWorkspaceTable) {
+            actionsList.splice(0, 0, moveAction);
+          }
+
           if (rowData.visibility === 'published') {
             actionsList.splice(0, 0, cloneAction);
             actionsList.splice(2, 0, unpublishAction);

src/custom/PerformersSection/PerformersSection.tsx

@@ -1,13 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { memo, useMemo } from 'react';
-import {
-  CloneIcon,
-  DeploymentsIcon,
-  DownloadIcon,
-  OpenIcon,
-  ShareIcon,
-  TropyIcon
-} from '../../icons';
+import { Box, Button } from '../../base';
+import { iconXSmall } from '../../constants/iconsSizes';
+import { LeaderBoardIcon, TropyIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { Carousel } from '../Carousel';
 import { Pattern } from '../CustomCatalog/CustomCard';
@@ -21,18 +16,16 @@ import {
   HeaderTitle,
   IconContainer,
   MainContainer,
-  RepoSection,
   RepoTitle,
   StatsValue,
-  StatusLabel,
   StyledCard,
   Title,
+  TitleBox,
   UserNameText
 } from './styles';
 
 interface MetricConfig {
   label: string;
-  icon: React.ComponentType<any>;
   id: string;
   countKey: keyof Pattern;
 }
@@ -54,22 +47,18 @@ interface StatCardProps {
   patternName: string;
   pattern: Pattern;
   userName: string;
-  userid: string;
-  icon: React.ComponentType<any>;
   status: string;
   id: string;
   onCardClick: (pattern: Pattern) => void;
   onIconClick: (sortOrder: string) => void;
-  onAuthorClick: (userId: string) => void;
-  onStatusClick: (status: string) => void;
+  onOpenLeaderboard?: () => void;
 }
 
 interface PerformersSectionProps {
   useGetCatalogFilters: (params: any) => any;
   onCardClick: (pattern: Pattern) => void;
   onIconClick: (sortOrder: string) => void;
-  onAuthorClick: (userId: string) => void;
-  onStatusClick: (status: string) => void;
+  onOpenLeaderboard?: () => void;
 }
 
 type MetricType = 'view' | 'clone' | 'download' | 'deployment' | 'share';
@@ -86,32 +75,27 @@ const BASE_QUERY_PARAMS: BaseQueryParams = {
 const METRICS: Record<MetricType, MetricConfig> = {
   view: {
     label: 'Most Opens',
-    icon: OpenIcon,
-    id: 'open-icon',
+    id: 'open',
     countKey: 'view_count'
   },
   clone: {
     label: 'Most Clones',
-    icon: CloneIcon,
-    id: 'clone-icon',
+    id: 'clone',
     countKey: 'clone_count'
   },
   download: {
     label: 'Most Downloads',
-    icon: DownloadIcon,
-    id: 'download-icon',
+    id: 'download',
     countKey: 'download_count'
   },
   deployment: {
     label: 'Most Deploys',
-    icon: DeploymentsIcon,
-    id: 'deployments-icon',
+    id: 'deployments',
     countKey: 'deployment_count'
   },
   share: {
     label: 'Most Shares',
-    icon: ShareIcon,
-    id: 'share-icon',
+    id: 'share',
     countKey: 'share_count'
   }
 };
@@ -128,14 +112,10 @@ const StatCardComponent: React.FC<StatCardProps> = ({
   patternName,
   pattern,
   userName,
-  userid,
-  icon: Icon,
   status,
   id,
   onCardClick,
-  onIconClick,
-  onAuthorClick,
-  onStatusClick
+  onIconClick
 }) => {
   const handleCardClick = () => {
     onCardClick(pattern);
@@ -146,36 +126,25 @@ const StatCardComponent: React.FC<StatCardProps> = ({
     onIconClick(sortOrder);
   };
 
-  const handleAuthorClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onAuthorClick(userid);
-  };
-
-  const handleStatusClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onStatusClick(status);
-  };
+  const theme = useTheme();
 
   return (
     <StyledCard elevation={0} status={status} onClick={handleCardClick}>
       <ContentWrapper cardId={id}>
         <HeaderSection>
           <HeaderTitle>{label}</HeaderTitle>
           <IconContainer onClick={(e) => handleIconClick(e, `${countKey}+desc`)}>
-            <Icon className={id} />
+            <LeaderBoardIcon {...iconXSmall} fill={theme.palette.common.black} />
           </IconContainer>
         </HeaderSection>
 
         <StatsValue>{count}</StatsValue>
 
-        <RepoSection>
+        <Box>
           <RepoTitle>{patternName}</RepoTitle>
-          <UserNameText onClick={handleAuthorClick}>by {userName}</UserNameText>
-        </RepoSection>
+          <UserNameText>by {userName}</UserNameText>
+        </Box>
       </ContentWrapper>
-      <StatusLabel labelType={status} onClick={handleStatusClick}>
-        {status}
-      </StatusLabel>
     </StyledCard>
   );
 };
@@ -246,8 +215,6 @@ const processQueryData = (
     patternName: pattern.name || 'Unknown',
     pattern: pattern,
     userName: pattern.user?.first_name || 'Unknown',
-    userid: pattern.user?.id,
-    icon: config.icon,
     id: config.id,
     status: pattern?.catalog_data?.content_class
   };
@@ -257,8 +224,7 @@ const PerformersSection: React.FC<PerformersSectionProps> = ({
   useGetCatalogFilters,
   onCardClick,
   onIconClick,
-  onAuthorClick,
-  onStatusClick
+  onOpenLeaderboard
 }) => {
   const theme = useTheme();
   const { queries, isLoading, hasError } = useMetricQueries(useGetCatalogFilters);
@@ -267,13 +233,8 @@ const PerformersSection: React.FC<PerformersSectionProps> = ({
     () =>
       (Object.keys(METRICS) as MetricType[])
         .map((metric) => processQueryData(queries, metric))
-        .filter(
-          (
-            stat
-          ): stat is Omit<
-            StatCardProps,
-            'onCardClick' | 'onIconClick' | 'onAuthorClick' | 'onStatusClick'
-          > => Boolean(stat)
+        .filter((stat): stat is Omit<StatCardProps, 'onCardClick' | 'onIconClick'> =>
+          Boolean(stat)
         ),
     [queries]
   );
@@ -291,24 +252,29 @@ const PerformersSection: React.FC<PerformersSectionProps> = ({
       {...stat}
       onCardClick={onCardClick}
       onIconClick={onIconClick}
-      onAuthorClick={onAuthorClick}
-      onStatusClick={onStatusClick}
     />
   ));
 
   return (
     <ErrorBoundary>
       <MainContainer>
-        <Title>
-          Top Performers
-          <TropyIcon
-            style={{
-              height: '2rem',
-              width: '2rem',
-              color: theme.palette.icon.secondary
-            }}
-          />
-        </Title>
+        <TitleBox>
+          <Box display={'flex'} alignItems="center" gap={1}>
+            <Title>Top Performers</Title>
+            <TropyIcon
+              style={{
+                height: '2rem',
+                width: '2rem',
+                color: theme.palette.icon.secondary
+              }}
+            />
+          </Box>
+          {onOpenLeaderboard && (
+            <Button variant="contained" onClick={() => onOpenLeaderboard()}>
+              Open Leaderboard
+            </Button>
+          )}
+        </TitleBox>
         <CardsContainer>
           {isLoading && <StateCardSekeleton />}
           <Carousel items={statComponents} />