From a88ff1d6f0dc15cd826a831a4c4169ce3b923308 Mon Sep 17 00:00:00 2001 From: Senthil Athiban Date: Thu, 8 Aug 2024 16:01:35 +0530 Subject: [PATCH 1/5] feat(searchbar): add lodash debounce mechanism in searchbar Signed-off-by: Senthil Athiban --- package-lock.json | 22 ++++++++++++++++++---- package.json | 4 ++++ src/custom/SearchBar.tsx | 28 ++++++++++++++++------------ 3 files changed, 38 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 78589c9b..390ca2e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "@layer5/sistent", "version": "0.14.11", + "dependencies": { + "lodash": "^4.17.21" + }, "devDependencies": { "@commitlint/cli": "^17.7.2", "@commitlint/config-conventional": "^17.7.0", @@ -14,6 +17,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", "@typescript-eslint/eslint-plugin": "^6.12.0", @@ -2969,6 +2973,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/lodash": { + "version": "4.17.7", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz", + "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==", + "dev": true + }, "node_modules/@types/mdast": { "version": "3.0.15", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz", @@ -9011,8 +9021,7 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/lodash.assignwith": { "version": "4.2.0", @@ -15819,6 +15828,12 @@ "version": "7.0.13", "dev": true }, + "@types/lodash": { + "version": "4.17.7", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz", + "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==", + "dev": true + }, "@types/mdast": { "version": "3.0.15", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz", @@ -19966,8 +19981,7 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash.assignwith": { "version": "4.2.0", diff --git a/package.json b/package.json index 5bebb1e1..6f9ca400 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", "@typescript-eslint/eslint-plugin": "^6.12.0", @@ -106,5 +107,8 @@ }, "publishConfig": { "access": "public" + }, + "dependencies": { + "lodash": "^4.17.21" } } diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index 3f68868d..af61ca65 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -1,6 +1,7 @@ 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 +76,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 +101,7 @@ function SearchBar({ const handleSearchIconClick = (): void => { if (expanded) { + debouncedOnSearch(''); setSearchText(''); setExpanded(false); } else { @@ -101,12 +114,6 @@ function SearchBar({ } }; - // const handleClickAway = (): void => { - // if (expanded) { - // setExpanded(false); - // } - // }; - return ( { @@ -125,10 +132,7 @@ function SearchBar({ ) => { - handleSearchChange(e); - onSearch(e.target.value); - }} + onChange={handleSearchChange} // Updated to use the new handler inputRef={searchRef} placeholder={placeholder} style={{ From 0ea46e01d377c5ad7b7ee8a152315d1d523815e3 Mon Sep 17 00:00:00 2001 From: Senthil Athiban Date: Wed, 21 Aug 2024 10:28:48 +0530 Subject: [PATCH 2/5] fix(lint): lint issue Signed-off-by: Senthil Athiban --- src/custom/SearchBar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index af61ca65..db72eaf4 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import { outlinedInputClasses } from '@mui/material/OutlinedInput'; import { Theme, ThemeProvider, createTheme, useTheme } from '@mui/material/styles'; import debounce from 'lodash/debounce'; From 1c2a89d7efc33e0ff51a6ddad9aabacf07a58ffe Mon Sep 17 00:00:00 2001 From: captain-Akshay Date: Mon, 26 Aug 2024 15:00:03 +0530 Subject: [PATCH 3/5] chore: addition of transferlist kind based org Signed-off-by: captain-Akshay --- .../TransferList/TransferList.tsx | 15 +++- src/icons/Meshery/MesheryIcon.tsx | 84 +++++++++++++++++++ src/icons/Meshery/index.ts | 1 + 3 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 src/icons/Meshery/MesheryIcon.tsx create mode 100644 src/icons/Meshery/index.ts 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'; From 20e8fd0d5c3a82ddf0563348465452beb101cdf2 Mon Sep 17 00:00:00 2001 From: rishabhsharma1997 Date: Tue, 27 Aug 2024 18:55:41 +0530 Subject: [PATCH 4/5] fix: styling issue learning-path content Signed-off-by: rishabhsharma1997 --- src/custom/ChapterCard/style.tsx | 4 ++-- src/custom/LearningCard/style.tsx | 4 ++-- src/custom/SetupPrerequisite/style.tsx | 2 +- src/custom/StyledChapter/StyledChapter.tsx | 21 ++++++++++++++++++++- 4 files changed, 25 insertions(+), 6 deletions(-) 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/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; From 61905603f4e00c76e16f893cfab86cce802305a2 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 28 Aug 2024 18:01:50 +0530 Subject: [PATCH 5/5] fix(click): add click to card Signed-off-by: Sudhanshu Dasgupta --- src/custom/CatalogCard/CatalogCard.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 ( - +