From d47458f720311afaa3f16d6d823043bbe9752b8a Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Wed, 16 Oct 2024 17:56:07 +0530 Subject: [PATCH 1/5] feat: add new skeleton component Signed-off-by: Amit Amrutiya --- src/base/Skeleton/Skeleton.tsx | 7 +++++++ src/base/Skeleton/index.tsx | 5 +++++ src/base/index.tsx | 1 + 3 files changed, 13 insertions(+) create mode 100644 src/base/Skeleton/Skeleton.tsx create mode 100644 src/base/Skeleton/index.tsx diff --git a/src/base/Skeleton/Skeleton.tsx b/src/base/Skeleton/Skeleton.tsx new file mode 100644 index 00000000..da715007 --- /dev/null +++ b/src/base/Skeleton/Skeleton.tsx @@ -0,0 +1,7 @@ +import { Skeleton as MuiSkeleton, type SkeletonProps as MuiSkeletonProps } from '@mui/material'; + +export function Skeleton(props: MuiSkeletonProps): JSX.Element { + return ; +} + +export default Skeleton; diff --git a/src/base/Skeleton/index.tsx b/src/base/Skeleton/index.tsx new file mode 100644 index 00000000..190aa18c --- /dev/null +++ b/src/base/Skeleton/index.tsx @@ -0,0 +1,5 @@ +import { SkeletonProps } from '@mui/material'; +import Skeleton from './Skeleton'; + +export { Skeleton }; +export type { SkeletonProps }; diff --git a/src/base/index.tsx b/src/base/index.tsx index 0f7d8850..e2e44121 100644 --- a/src/base/index.tsx +++ b/src/base/index.tsx @@ -55,6 +55,7 @@ export * from './Paper'; export * from './Popper'; export * from './RadioGroup'; export * from './Select'; +export * from './Skeleton'; export * from './Slide'; export * from './Stack'; export * from './Switch'; From 1920b061f6bff584acd932334bb2d331acd36087 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Wed, 16 Oct 2024 17:59:25 +0530 Subject: [PATCH 2/5] chore: update filter theme in mobile devices Signed-off-by: Amit Amrutiya --- src/custom/CatalogCard/CatalogCard.tsx | 86 +++++++++---------- .../CatalogFilterSidebar.tsx | 12 ++- src/custom/CatalogFilterSection/style.tsx | 9 +- 3 files changed, 53 insertions(+), 54 deletions(-) diff --git a/src/custom/CatalogCard/CatalogCard.tsx b/src/custom/CatalogCard/CatalogCard.tsx index 16622404..a038e925 100644 --- a/src/custom/CatalogCard/CatalogCard.tsx +++ b/src/custom/CatalogCard/CatalogCard.tsx @@ -33,7 +33,6 @@ type CatalogCardProps = { // eslint-disable-next-line @typescript-eslint/no-explicit-any pattern: any; patternType: string; - cardLink: string; cardHeight: string; cardWidth: string; cardStyles: React.CSSProperties; @@ -64,7 +63,6 @@ const CatalogCard: React.FC = ({ cardHeight, cardWidth, cardStyles, - cardLink, onCardClick }) => { const outerStyles = { @@ -73,49 +71,47 @@ const CatalogCard: React.FC = ({ ...cardStyles }; return ( - - - - - {patternType} - - - {pattern.name} - - - - - - - - - {pattern.download_count} - - - - {pattern.clone_count} - - - - {pattern.view_count} - - - - {pattern.deployment_count} - - - - {pattern.share_count} - - - - - + + + + {patternType} + + + {pattern.name} + + + + + + + + + {pattern.download_count} + + + + {pattern.clone_count} + + + + {pattern.view_count} + + + + {pattern.deployment_count} + + + + {pattern.share_count} + + + + ); }; diff --git a/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx b/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx index d020d341..9b929158 100644 --- a/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx +++ b/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx @@ -4,6 +4,7 @@ import { useCallback, useState } from 'react'; import { Box, Drawer, Typography } from '../../base'; import { CloseIcon } from '../../icons'; import { darkTeal } from '../../theme'; +import { SLIGHT_BLUE } from '../../theme/colors/colors'; import { CloseBtn } from '../Modal'; import CatalogFilterSidebarState from './CatalogFilterSidebarState'; import { @@ -103,7 +104,11 @@ const CatalogFilterSidebar: React.FC = ({ > - + Filters @@ -114,7 +119,7 @@ const CatalogFilterSidebar: React.FC = ({ style={{ height: '75vh', overflowY: 'auto', - background: theme.palette.background.default + background: theme.palette.background.surfaces }} > = ({ styleProps={styleProps} /> - - {/* Use theme-aware color */} + diff --git a/src/custom/CatalogFilterSection/style.tsx b/src/custom/CatalogFilterSection/style.tsx index a7694c57..a6c1b983 100644 --- a/src/custom/CatalogFilterSection/style.tsx +++ b/src/custom/CatalogFilterSection/style.tsx @@ -1,5 +1,6 @@ import { styled } from '@mui/material/styles'; import { Box, Button, ListItemButton } from '../../base'; +import { SLIGHT_BLUE } from '../../theme/colors/colors'; import { StyleProps } from './CatalogFilterSidebar'; export const FiltersCardDiv = styled(Box)<{ styleProps: StyleProps }>(({ styleProps }) => ({ @@ -41,15 +42,13 @@ export const FilterButton = styled(Button)(({ theme }) => ({ } })); -export const FiltersDrawerHeader = styled(Box)(({ theme }) => ({ +export const FiltersDrawerHeader = styled(Box)(() => ({ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.5rem 1rem', - backgroundColor: theme.palette.border.strong, - height: '10vh', - boxShadow: '0px 4px 4px rgba(0, 179, 159, 0.4)', - marginBottom: '0.625rem' + backgroundColor: SLIGHT_BLUE, + height: '10vh' })); export const CheckBoxButton = styled(ListItemButton)(({ theme }) => ({ From afc3aa5e3f0f4c27114aff17597dfeda6c613b28 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Wed, 16 Oct 2024 18:00:54 +0530 Subject: [PATCH 3/5] feat: add deboncing on the search bar Signed-off-by: Amit Amrutiya --- .../StyledSearchBar/StyledSearchBar.tsx | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/src/custom/StyledSearchBar/StyledSearchBar.tsx b/src/custom/StyledSearchBar/StyledSearchBar.tsx index 2e2799bd..f3dcce72 100644 --- a/src/custom/StyledSearchBar/StyledSearchBar.tsx +++ b/src/custom/StyledSearchBar/StyledSearchBar.tsx @@ -1,5 +1,6 @@ import { SxProps, Theme, useTheme } from '@mui/material'; -import React from 'react'; +import { debounce } from 'lodash'; +import React, { useCallback, useState } from 'react'; import { InputAdornment } from '../../base'; import { SearchIcon } from '../../icons'; import { InputAdornmentEnd, StyledSearchInput } from './style'; @@ -36,14 +37,31 @@ function StyledSearchBar({ endAdornment }: SearchBarProps): JSX.Element { const theme = useTheme(); + const [inputValue, setInputValue] = useState(value); + + const debouncedOnChange = useCallback( + (event: React.ChangeEvent) => { + debounce(() => { + if (onChange) { + onChange(event); + } + }, 300)(); + }, + [onChange] + ); + + const handleChange = (event: React.ChangeEvent) => { + setInputValue(event.target.value); + debouncedOnChange(event); + }; return ( Date: Wed, 16 Oct 2024 18:01:10 +0530 Subject: [PATCH 4/5] feat: add new meshery filter icon Signed-off-by: Amit Amrutiya --- src/icons/MesheryFilter/MesheryFilterIcon.tsx | 32 +++++++++++++++++++ src/icons/MesheryFilter/index.tsx | 1 + src/icons/index.ts | 1 + 3 files changed, 34 insertions(+) create mode 100644 src/icons/MesheryFilter/MesheryFilterIcon.tsx create mode 100644 src/icons/MesheryFilter/index.tsx diff --git a/src/icons/MesheryFilter/MesheryFilterIcon.tsx b/src/icons/MesheryFilter/MesheryFilterIcon.tsx new file mode 100644 index 00000000..ac9ee4da --- /dev/null +++ b/src/icons/MesheryFilter/MesheryFilterIcon.tsx @@ -0,0 +1,32 @@ +import { FC } from 'react'; +import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants'; +import { CustomIconProps } from '../types'; + +const MesheryFilterIcon: FC = ({ + width = DEFAULT_WIDTH, + height = DEFAULT_HEIGHT, + primaryFill = '#654ff0', + secondaryFill = '#ffffff', + ...props +}) => { + return ( + + + + + ); +}; + +export default MesheryFilterIcon; diff --git a/src/icons/MesheryFilter/index.tsx b/src/icons/MesheryFilter/index.tsx new file mode 100644 index 00000000..c6a3c59e --- /dev/null +++ b/src/icons/MesheryFilter/index.tsx @@ -0,0 +1 @@ +export { default as MesheryFilterIcon } from './MesheryFilterIcon'; diff --git a/src/icons/index.ts b/src/icons/index.ts index 6a8b4430..2a8522ad 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -55,6 +55,7 @@ export * from './Kubernetes'; export * from './LeftAngledArrow'; export * from './LeftArrow'; export * from './Menu'; +export * from './MesheryFilter'; export * from './MesheryOperator'; export * from './Open'; export * from './PanTool'; From 7a53c92df8da8d89544d5352578619e65033719b Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Wed, 16 Oct 2024 23:25:12 +0530 Subject: [PATCH 5/5] fix: catalog dialogue font family issue Signed-off-by: Amit Amrutiya --- .../CatalogFilterSidebar.tsx | 21 +++++++++++++------ .../CatalogFilterSection/FilterSection.tsx | 8 ++++--- src/custom/CatalogFilterSection/style.tsx | 3 ++- src/custom/CustomCatalog/custom-card.tsx | 11 +--------- src/custom/CustomCatalog/style.tsx | 11 ++++++---- 5 files changed, 30 insertions(+), 24 deletions(-) diff --git a/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx b/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx index 9b929158..1fd35bd5 100644 --- a/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx +++ b/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx @@ -38,6 +38,7 @@ export interface CatalogFilterSidebarProps { setData: (callback: (prevFilters: FilterValues) => FilterValues) => void; lists: FilterList[]; value?: FilterValues; + styleProps?: StyleProps; } export type FilterValues = Record; @@ -45,6 +46,7 @@ export type FilterValues = Record; export interface StyleProps { backgroundColor?: string; sectionTitleBackgroundColor?: string; + fontFamily?: string; } /** @@ -57,7 +59,8 @@ export interface StyleProps { const CatalogFilterSidebar: React.FC = ({ lists, setData, - value = {} + value = {}, + styleProps }) => { const theme = useTheme(); // Get the current theme const [openDrawer, setOpenDrawer] = useState(false); @@ -70,23 +73,29 @@ const CatalogFilterSidebar: React.FC = ({ setOpenDrawer(false); }, []); - const styleProps: StyleProps = { + const defaultStyleProps: StyleProps = { backgroundColor: theme.palette.mode === 'light' ? theme.palette.background.default : theme.palette.background.secondary, sectionTitleBackgroundColor: - theme.palette.mode === 'light' ? theme.palette.background.surfaces : darkTeal.main + theme.palette.mode === 'light' ? theme.palette.background.surfaces : darkTeal.main, + fontFamily: theme.typography.fontFamily + }; + + const appliedStyleProps = { + ...defaultStyleProps, + ...styleProps }; return ( <> - + @@ -126,7 +135,7 @@ const CatalogFilterSidebar: React.FC = ({ lists={lists} onApplyFilters={setData} value={value} - styleProps={styleProps} + styleProps={appliedStyleProps} /> diff --git a/src/custom/CatalogFilterSection/FilterSection.tsx b/src/custom/CatalogFilterSection/FilterSection.tsx index 2777fa38..0696a6ed 100644 --- a/src/custom/CatalogFilterSection/FilterSection.tsx +++ b/src/custom/CatalogFilterSection/FilterSection.tsx @@ -55,9 +55,11 @@ const FilterSection: React.FC = ({ <> onSectionToggle(filterKey)} - style={{ backgroundColor: styleProps.sectionTitleBackgroundColor }} + style={{ + backgroundColor: styleProps.sectionTitleBackgroundColor + }} > - + {(sectionDisplayName || filterKey).toUpperCase()} {openSections[filterKey] ? : } @@ -105,7 +107,7 @@ const FilterSection: React.FC = ({ {option.Icon && } - {option.label} + {option.label} {option.totalCount !== undefined && `(${option.totalCount || 0})`} diff --git a/src/custom/CatalogFilterSection/style.tsx b/src/custom/CatalogFilterSection/style.tsx index a6c1b983..105a244c 100644 --- a/src/custom/CatalogFilterSection/style.tsx +++ b/src/custom/CatalogFilterSection/style.tsx @@ -15,7 +15,8 @@ export const FiltersCardDiv = styled(Box)<{ styleProps: StyleProps }>(({ stylePr backgroundColor: styleProps.backgroundColor, ['@media (max-width:900px)']: { display: 'none' - } + }, + fontFamily: styleProps.fontFamily })); export const FilterDrawerDiv = styled('div')(() => ({ diff --git a/src/custom/CustomCatalog/custom-card.tsx b/src/custom/CustomCatalog/custom-card.tsx index 1f835192..004f5079 100644 --- a/src/custom/CustomCatalog/custom-card.tsx +++ b/src/custom/CustomCatalog/custom-card.tsx @@ -190,16 +190,7 @@ const CustomCatalogCard: React.FC = ({ <> {patternType} - - - {pattern.name} - + {pattern.name} )} diff --git a/src/custom/CustomCatalog/style.tsx b/src/custom/CustomCatalog/style.tsx index 863caa41..7e89b190 100644 --- a/src/custom/CustomCatalog/style.tsx +++ b/src/custom/CustomCatalog/style.tsx @@ -134,20 +134,23 @@ export const MetricsCount = styled('p')(({ theme }) => ({ color: theme.palette.text.secondary, fontWeight: '600' })); -export const DesignName = styled(Typography)(({ theme }) => ({ +export const DesignName = styled(Typography)(() => ({ fontWeight: 'bold', textTransform: 'capitalize', - color: theme.palette.text.default, + color: '#000D12', fontSize: '1.125rem', marginTop: '2rem', - padding: '0rem 1rem', // "0rem 1.5rem" + padding: '0rem 1rem', position: 'relative', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', textAlign: 'center', - width: '100%' + width: '100%', + margin: '3rem 0 1.59rem 0', + fontFamily: 'inherit' })); + export const MetricsContainerFront = styled('div')(({ isDetailed }) => ({ display: 'flex', justifyContent: 'space-around',