Merge branch 'layer5io:master' into 496-meshery-ui-app

layer5io · Aug 31, 2024 · 26f8b87 · 26f8b87
2 parents 37749d1 + f6abad9
commit 26f8b87
Show file tree

Hide file tree

Showing 11 changed files with 151 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "@reduxjs/toolkit": "^2.2.5",
     "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.11",
+    "@types/lodash": "^4.17.7",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "@types/react-redux": "^7.1.33",
@@ -114,5 +115,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
   }
 }
diff --git a/src/custom/CatalogCard/CatalogCard.tsx b/src/custom/CatalogCard/CatalogCard.tsx
@@ -38,6 +38,7 @@ type CatalogCardProps = {
   cardWidth: string;
   cardStyles: React.CSSProperties;
   type: string;
+  onCardClick?: () => void;
 };
 
 export const ClassToIconMap = {
@@ -63,15 +64,16 @@ const CatalogCard: React.FC<CatalogCardProps> = ({
   cardHeight,
   cardWidth,
   cardStyles,
-  cardLink
+  cardLink,
+  onCardClick
 }) => {
   const outerStyles = {
     height: cardHeight,
     width: cardWidth,
     ...cardStyles
   };
   return (
-    <DesignCardUrl href={cardLink} target="_blank" rel="noreferrer">
+    <DesignCardUrl href={cardLink} onClick={onCardClick} target="_blank" rel="noreferrer">
       <DesignCard outerStyles={outerStyles}>
         <DesignInnerCard className="innerCard">
           <ClassWrap catalogClassName={pattern?.catalog_data?.content_class} />

diff --git a/src/custom/ChapterCard/style.tsx b/src/custom/ChapterCard/style.tsx
@@ -1,5 +1,5 @@
 import { styled } from '@mui/material';
-import { ALABASTER_WHITE, KEPPEL, MIDNIGHT_BLACK } from '../../theme';
+import { ALABASTER_WHITE, MIDNIGHT_BLACK } from '../../theme';
 
 // Styled component for ChapterCardWrapper
 export const ChapterCardWrapper = styled('div')(({ theme }) => ({
@@ -13,7 +13,7 @@ export const ChapterCardWrapper = styled('div')(({ theme }) => ({
   }`,
   justifyContent: 'space-between',
   '&:hover': {
-    border: `1px solid ${KEPPEL}`,
+    border: `1px solid ${theme.palette.background.brand?.default}`,
     transition:
       'background 150ms ease-out 0s, border 150ms ease-out 0s, transform 150ms ease-out 0s',
     transform: 'translate3d(0px, -3px, 0px)',

diff --git a/src/custom/LearningCard/style.tsx b/src/custom/LearningCard/style.tsx
@@ -12,7 +12,7 @@ const CardActive = styled('div')(({ theme }) => ({
   cursor: 'pointer',
   transition: 'all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s',
   '&:hover': {
-    boxShadow: 'rgba(0, 179, 158, 0.9) 0px 0px 19px 6px'
+    boxShadow: `${theme.palette.background.brand?.default} 0px 0px 19px 6px`
   },
   backgroundColor: theme.palette.mode === 'light' ? WHITE : BLACK
 }));
@@ -23,7 +23,7 @@ const CardLink = styled('a')({
 });
 
 const CardParent = styled('div')(({ theme }) => ({
-  borderTop: `5px solid ${theme.palette.primary.main}`,
+  borderTop: `5px solid ${theme.palette.background.brand?.default}`,
   borderRadius: '0.25rem',
   minHeight: '16rem',
   display: 'flex',

diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx
@@ -1,6 +1,8 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { outlinedInputClasses } from '@mui/material/OutlinedInput';
 import { Theme, ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
-import React from 'react';
+import debounce from 'lodash/debounce';
+import React, { useCallback } from 'react';
 import { ClickAwayListener } from '../base/ClickAwayListener';
 import { TextField } from '../base/TextField';
 import { CloseIcon, SearchIcon } from '../icons';
@@ -75,11 +77,22 @@ function SearchBar({
   const searchRef = React.useRef<HTMLInputElement | null>(null);
   const theme = useTheme();
 
+  // Debounce the onSearch function
+  const debouncedOnSearch = useCallback(
+    debounce((value) => {
+      onSearch(value);
+    }, 300),
+    [onSearch]
+  );
+
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    setSearchText(event.target.value);
+    const value = event.target.value;
+    setSearchText(value);
+    debouncedOnSearch(value);
   };
 
   const handleClearIconClick = (): void => {
+    debouncedOnSearch('');
     setSearchText('');
     setExpanded(false);
     if (onClear) {
@@ -89,6 +102,7 @@ function SearchBar({
 
   const handleSearchIconClick = (): void => {
     if (expanded) {
+      debouncedOnSearch('');
       setSearchText('');
       setExpanded(false);
     } else {
@@ -101,12 +115,6 @@ function SearchBar({
     }
   };
 
-  // const handleClickAway = (): void => {
-  //   if (expanded) {
-  //     setExpanded(false);
-  //   }
-  // };
-
   return (
     <ClickAwayListener
       onClickAway={(event) => {
@@ -125,10 +133,7 @@ function SearchBar({
           <TextField
             variant="standard"
             value={searchText}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              handleSearchChange(e);
-              onSearch(e.target.value);
-            }}
+            onChange={handleSearchChange} // Updated to use the new handler
             inputRef={searchRef}
             placeholder={placeholder}
             style={{

diff --git a/src/custom/SetupPrerequisite/style.tsx b/src/custom/SetupPrerequisite/style.tsx
@@ -30,7 +30,7 @@ const Card = styled('a')(({ theme }) => ({
   transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)',
   borderRadius: '10px',
   '&:hover': {
-    boxShadow: 'rgb(0, 211, 169) 0px 0px 7px'
+    boxShadow: `${theme.palette.background.brand?.default} 0px 0px 7px`
   },
   '& a': {
     margin: '0 !important',

diff --git a/src/custom/StyledChapter/StyledChapter.tsx b/src/custom/StyledChapter/StyledChapter.tsx
@@ -16,7 +16,10 @@ const StyledChapter = styled('div')(({ theme }) => ({
 
   '& a': {
     color: theme.palette.background.brand?.default,
-    textDecoration: 'none'
+    textDecoration: 'underline',
+    '&:hover': {
+      color: theme.palette.background.brand?.default
+    }
   },
   '& p > code': {
     color: 'inherit',
@@ -38,6 +41,22 @@ const StyledChapter = styled('div')(({ theme }) => ({
     width: '100%',
     margin: '1rem auto autocompleteClasses',
     fontFamily: 'Courier New, Courier, monospace'
+  },
+  '& li code': {
+    color: 'inherit',
+    padding: '.2em .4em',
+    margin: '0',
+    fontSize: '85%',
+    wordBreak: 'normal',
+    backgroundColor: theme.palette.background.code,
+    borderRadius: '.25rem'
+  },
+  '& li a': {
+    color: theme.palette.text.default,
+    textDecoration: 'underline',
+    '&:hover': {
+      color: theme.palette.background.brand?.default
+    }
   }
 }));
 export default StyledChapter;
diff --git a/src/custom/TransferModal/TransferList/TransferList.tsx b/src/custom/TransferModal/TransferList/TransferList.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Checkbox, Grid, List, ListItem, Typography } from '../../../base';
 import { KubernetesIcon, LeftArrowIcon, RightArrowIcon, SMPIcon } from '../../../icons';
+import { MesheryIcon } from '../../../icons/Meshery';
 import Tooltip from '../../../patches/Tooltip';
 import {
   ButtonGrid,
@@ -15,6 +16,17 @@ export const TRANSFER_COMPONET = {
   CHIP: 'chip',
   OTHER: 'other'
 };
+export function getFallbackImageBasedOnKind(kind: string | undefined): JSX.Element {
+  if (!kind) {
+    return <KubernetesIcon />;
+  }
+  const fallbackComponents: { [key: string]: JSX.Element } = {
+    meshery: <MesheryIcon />,
+    kubernetes: <KubernetesIcon />
+  };
+
+  return fallbackComponents[kind] || null;
+}
 
 export interface TransferListProps {
   name: string;
@@ -37,6 +49,7 @@ export interface TransferListProps {
 interface ListItemType {
   id: number;
   name: string;
+  kind: string | undefined;
 }
 
 function not<T>(a: T[], b: T[]): T[] {
@@ -227,7 +240,7 @@ function TransferList({
                       label={item.name}
                       onDelete={() => {}}
                       deleteIcon={<SMPIcon />}
-                      icon={<KubernetesIcon />}
+                      icon={getFallbackImageBasedOnKind(item?.kind) || <KubernetesIcon />}
                     />
                   </Tooltip>
                 ) : (

diff --git a/src/icons/Meshery/MesheryIcon.tsx b/src/icons/Meshery/MesheryIcon.tsx
@@ -0,0 +1,84 @@
+import { FC } from 'react';
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { CustomIconProps } from '../types';
+
+const MesheryIcon: FC<CustomIconProps> = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  primaryFill = '#00B39F',
+  secondaryFill = '#00D3A9',
+  ...props
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 135 135"
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M69.5 31.82V64.07L97.45 47.89L69.5 31.82Z" fill={secondaryFill} />
+      <path d="M69.5 70.81V103.22L97.7 87.09L69.5 70.81Z" fill={secondaryFill} />
+      <path d="M65.47 63.85V32.09L37.87 47.92L65.47 63.85Z" fill={primaryFill} />
+      <path
+        d="M10.1 103.1C15.5182 111.811 22.842 119.179 31.52 124.65V90.71L10.1 103.1Z"
+        fill={primaryFill}
+      />
+      <path d="M65.47 103.06V71.05L37.8 87.07L65.47 103.06Z" fill={primaryFill} />
+      <path d="M35.54 122.63L63.56 106.61L35.54 90.41V122.63Z" fill={secondaryFill} />
+      <path d="M99.62 122.8V90.63L71.64 106.63L99.62 122.8Z" fill={primaryFill} />
+      <path
+        d="M127.03 99.37C131.817 90.4433 134.524 80.5502 134.95 70.43L105.78 87.11L127.03 99.37Z"
+        fill={primaryFill}
+      />
+      <path d="M103.64 83.69L131.76 67.61L103.64 51.45V83.69Z" fill={secondaryFill} />
+      <path d="M99.62 44.5V12.52L71.77 28.49L99.62 44.5Z" fill={primaryFill} />
+      <path d="M99.62 83.55V51.28L71.7 67.44L99.62 83.55Z" fill={primaryFill} />
+      <path d="M35.54 51.22V83.73L63.66 67.45L35.54 51.22Z" fill={secondaryFill} />
+      <path
+        d="M65.47 0C55.1388 0.298791 45.016 2.97835 35.89 7.83L65.52 24.83L65.47 0Z"
+        fill={primaryFill}
+      />
+      <path d="M35.54 12.3V44.62L63.69 28.48L35.54 12.3Z" fill={secondaryFill} />
+      <path
+        d="M31.52 10.34C22.8442 15.8136 15.521 23.1813 10.1 31.89L31.52 44.25V10.34Z"
+        fill={primaryFill}
+      />
+      <path
+        d="M99.43 8C90.2123 3.0393 79.9635 0.299881 69.5 0V25.15L99.43 8Z"
+        fill={secondaryFill}
+      />
+      <path
+        d="M0 69.87C0.348236 80.2825 3.1145 90.4711 8.08 99.63L29.77 87.07L0 69.87Z"
+        fill={secondaryFill}
+      />
+      <path
+        d="M8.07001 35.37C3.13121 44.4917 0.372439 54.6334 0.0100098 65L29.8 47.91L8.07001 35.37Z"
+        fill={secondaryFill}
+      />
+      <path
+        d="M35.78 127.13C44.9355 132.013 55.0981 134.706 65.47 135V110.15L35.78 127.13Z"
+        fill={primaryFill}
+      />
+      <path
+        d="M124.89 32C119.512 23.3126 112.237 15.9553 103.61 10.48V44.3L124.89 32Z"
+        fill={secondaryFill}
+      />
+      <path
+        d="M103.64 124.54C112.314 119.022 119.624 111.61 125.02 102.86L103.64 90.52V124.54Z"
+        fill={secondaryFill}
+      />
+      <path
+        d="M134.96 64.81C134.572 54.5437 131.835 44.5032 126.96 35.46L105.5 47.88L134.96 64.81Z"
+        fill={primaryFill}
+      />
+      <path
+        d="M69.5 135C79.845 134.709 89.9825 132.029 99.12 127.17L69.5 110V135Z"
+        fill={secondaryFill}
+      />
+      <path d="M31.52 83.44V51.56L3.83002 67.43L31.52 83.44Z" fill={primaryFill} />
+    </svg>
+  );
+};
+
+export default MesheryIcon;
diff --git a/src/icons/Meshery/index.ts b/src/icons/Meshery/index.ts
@@ -0,0 +1 @@
+export { default as MesheryIcon } from './MesheryIcon';