diff --git a/package-lock.json b/package-lock.json index f140f18b..51cf5208 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "@layer5/sistent", "version": "0.14.11", "dependencies": { + "lodash": "^4.17.21", "@types/lodash": "^4.17.7" }, "devDependencies": { @@ -17,6 +18,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", diff --git a/package.json b/package.json index 7ace0c0a..8d1e1786 100644 --- 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 index 2b238337..16622404 100644 --- 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,7 +64,8 @@ const CatalogCard: React.FC = ({ cardHeight, cardWidth, cardStyles, - cardLink + cardLink, + onCardClick }) => { const outerStyles = { height: cardHeight, @@ -71,7 +73,7 @@ const CatalogCard: React.FC = ({ ...cardStyles }; return ( - + diff --git a/src/custom/ChapterCard/style.tsx b/src/custom/ChapterCard/style.tsx index 6f8b5153..eb36738d 100644 --- 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 index c9b8e28b..9ec05f7b 100644 --- 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 index 3f68868d..db72eaf4 100644 --- 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(null); const theme = useTheme(); + // Debounce the onSearch function + const debouncedOnSearch = useCallback( + debounce((value) => { + onSearch(value); + }, 300), + [onSearch] + ); + const handleSearchChange = (event: React.ChangeEvent): 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 ( { @@ -125,10 +133,7 @@ function SearchBar({ ) => { - 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 index 2499c81a..d0a5a779 100644 --- 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 index 83464462..887b8960 100644 --- 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 index ffaea425..8fe1d302 100644 --- 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 ; + } + const fallbackComponents: { [key: string]: JSX.Element } = { + meshery: , + kubernetes: + }; + + 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(a: T[], b: T[]): T[] { @@ -227,7 +240,7 @@ function TransferList({ label={item.name} onDelete={() => {}} deleteIcon={} - icon={} + icon={getFallbackImageBasedOnKind(item?.kind) || } /> ) : ( diff --git a/src/icons/Meshery/MesheryIcon.tsx b/src/icons/Meshery/MesheryIcon.tsx new file mode 100644 index 00000000..c8421126 --- /dev/null +++ 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 = ({ + width = DEFAULT_WIDTH, + height = DEFAULT_HEIGHT, + primaryFill = '#00B39F', + secondaryFill = '#00D3A9', + ...props +}) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default MesheryIcon; diff --git a/src/icons/Meshery/index.ts b/src/icons/Meshery/index.ts new file mode 100644 index 00000000..5e90c5e7 --- /dev/null +++ b/src/icons/Meshery/index.ts @@ -0,0 +1 @@ +export { default as MesheryIcon } from './MesheryIcon';