From ca3e8ba51285f938a651fcf8351cdb7ff1d5caa8 Mon Sep 17 00:00:00 2001 From: aabidsofi19 Date: Mon, 13 Jan 2025 02:41:22 +0530 Subject: [PATCH 01/21] fix: code block styling for markdown renderer Signed-off-by: aabidsofi19 --- src/custom/Markdown/index.tsx | 4 +++- src/custom/Markdown/style.tsx | 9 +++++++++ src/theme/palette.ts | 3 ++- 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/custom/Markdown/index.tsx b/src/custom/Markdown/index.tsx index cc0c8ee9b..22302793b 100644 --- a/src/custom/Markdown/index.tsx +++ b/src/custom/Markdown/index.tsx @@ -5,6 +5,7 @@ import { BasicAnchorMarkdown, StyledMarkdown, StyledMarkdownBlockquote, + StyledMarkdownCode, StyledMarkdownH1, StyledMarkdownH2, StyledMarkdownH3, @@ -54,7 +55,8 @@ export const RenderMarkdown: React.FC = ({ content }) => { li: ({ ...props }) => {props.children}, th: ({ ...props }) => {props.children}, td: ({ ...props }) => {props.children}, - pre: ({ ...props }) => {props.children} + pre: ({ ...props }) => {props.children}, + code: ({ ...props }) => {props.children} }} > {content} diff --git a/src/custom/Markdown/style.tsx b/src/custom/Markdown/style.tsx index 5af5c13bf..0139f598a 100644 --- a/src/custom/Markdown/style.tsx +++ b/src/custom/Markdown/style.tsx @@ -98,3 +98,12 @@ export const StyledMarkdownPre = styled('pre')(({ theme }) => ({ whiteSpace: 'pre-line', fontFamily: 'inherit' })); + +export const StyledMarkdownCode = styled('code')(({ theme }) => ({ + background: theme.palette.background.code, + whiteSpace: 'pre-line', + padding: '1.5px', + paddingInline: '5px', + fontFamily: 'inherit', + borderRadius: 3 +})); diff --git a/src/theme/palette.ts b/src/theme/palette.ts index d1165091c..cbcc66836 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -255,6 +255,7 @@ export const lightModePalette: PaletteOptions = { tertiary: Colors.red[70] }, code: Colors.charcoal[90], + constant: { white: Colors.accentGrey[100], disabled: Colors.charcoal[70], @@ -369,7 +370,7 @@ export const darkModePalette: PaletteOptions = { secondary: Colors.red[20], tertiary: Colors.red[10] }, - code: Colors.accentGrey[90], + code: Colors.charcoal[10], constant: { white: Colors.accentGrey[100], disabled: Colors.charcoal[70], From 89eed9c0fc86dbe320de19c63ffb65019f132e80 Mon Sep 17 00:00:00 2001 From: aabidsofi19 Date: Mon, 13 Jan 2025 02:41:47 +0530 Subject: [PATCH 02/21] chore: add componentIcon util Signed-off-by: aabidsofi19 --- src/index.tsx | 1 + src/utils/components.ts | 6 ++++++ src/utils/index.ts | 1 + 3 files changed, 8 insertions(+) create mode 100644 src/utils/components.ts create mode 100644 src/utils/index.ts diff --git a/src/index.tsx b/src/index.tsx index 58752c32b..ee7835fe2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,3 +6,4 @@ export * from './icons'; export * from './redux-persist'; export * from './schemas'; export * from './theme'; +export * from './utils'; diff --git a/src/utils/components.ts b/src/utils/components.ts new file mode 100644 index 000000000..eb5b4c210 --- /dev/null +++ b/src/utils/components.ts @@ -0,0 +1,6 @@ +export const componentIcon = ({ kind, model, color }) => { + if (!kind || !model || !color) { + return null; + } + return `/ui/public/static/img/meshmodels/${model}/${color}/${kind.toLowerCase()}-${color}.svg`; +}; diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 000000000..07635cbbc --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1 @@ +export * from './components'; From 6a2dcf442f037b98efe856729066f95406424106 Mon Sep 17 00:00:00 2001 From: aabidsofi19 Date: Mon, 13 Jan 2025 02:52:15 +0530 Subject: [PATCH 03/21] fix: any types Signed-off-by: aabidsofi19 --- src/utils/components.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/utils/components.ts b/src/utils/components.ts index eb5b4c210..2d1e4afff 100644 --- a/src/utils/components.ts +++ b/src/utils/components.ts @@ -1,4 +1,12 @@ -export const componentIcon = ({ kind, model, color }) => { +export const componentIcon = ({ + kind, + model, + color +}: { + kind: string; + model: string; + color: 'white' | 'color' | 'complete'; +}) => { if (!kind || !model || !color) { return null; } From ad3d092d0e374b972cb7eca2cf284f2aa1d071fc Mon Sep 17 00:00:00 2001 From: aabidsofi19 <65964225+aabidsofi19@users.noreply.github.com> Date: Mon, 13 Jan 2025 02:57:40 +0530 Subject: [PATCH 04/21] Update README.md Signed-off-by: aabidsofi19 <65964225+aabidsofi19@users.noreply.github.com> --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 970da2e13..44f41491a 100644 --- a/README.md +++ b/README.md @@ -91,7 +91,6 @@ Find out more on the Layer5 community.



-
 
From 2c99bd34cd0351f02e6c92727ac7230335999f3b Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Mon, 13 Jan 2025 23:20:10 +0530 Subject: [PATCH 05/21] fix: disable color for the button Signed-off-by: Amit Amrutiya --- src/theme/palette.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/palette.ts b/src/theme/palette.ts index d1165091c..00a6fa75d 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -326,7 +326,7 @@ export const darkModePalette: PaletteOptions = { brand: { default: Colors.keppel[40], hover: Colors.keppel[50], - disabled: Colors.charcoal[20], + disabled: Colors.charcoal[30], pressed: Colors.keppel[60], secondary: Colors.keppel[20], tertiary: Colors.keppel[10] From 9cc0f2f4b410eeaa3e56325a6c4ef615531f1183 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 15 Jan 2025 20:10:03 +0530 Subject: [PATCH 06/21] fix(tabs): theme changes Signed-off-by: Sudhanshu Dasgupta --- src/theme/components/tab.modifier.ts | 2 +- src/theme/components/tabs.modifier.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/theme/components/tab.modifier.ts b/src/theme/components/tab.modifier.ts index ed7ca5875..f9bced139 100644 --- a/src/theme/components/tab.modifier.ts +++ b/src/theme/components/tab.modifier.ts @@ -6,7 +6,7 @@ export const MuiTab: Components['MuiTab'] = { const { palette: { text: { default: defaultText }, - background: { default: defaultBackground } + background: { neutral: defaultBackground } } } = theme; return { diff --git a/src/theme/components/tabs.modifier.ts b/src/theme/components/tabs.modifier.ts index 63173a06c..79bdca246 100644 --- a/src/theme/components/tabs.modifier.ts +++ b/src/theme/components/tabs.modifier.ts @@ -3,7 +3,7 @@ import { Components, Theme } from '@mui/material'; export const MuiTabs: Components['MuiTabs'] = { styleOverrides: { root: ({ theme }) => ({ - backgroundColor: theme.palette.background.default + backgroundColor: theme.palette.background.neutral?.default }), indicator: ({ theme }) => ({ backgroundColor: theme.palette.background.brand?.default From a1432b8181df3b7266092c5bd06d302467df02be Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Thu, 16 Jan 2025 19:41:19 +0530 Subject: [PATCH 07/21] fix(colors): reuse colors Signed-off-by: Sudhanshu Dasgupta --- src/theme/colors/colors.ts | 5 +++++ src/theme/colors/index.ts | 1 + src/theme/components/tab.modifier.ts | 2 +- src/theme/components/tabs.modifier.ts | 2 +- src/theme/palette.ts | 4 ++-- 5 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/theme/colors/colors.ts b/src/theme/colors/colors.ts index 45c94f786..5136bfda0 100644 --- a/src/theme/colors/colors.ts +++ b/src/theme/colors/colors.ts @@ -102,6 +102,11 @@ export const charcoal = { 10: '#000D12' }; +export const gray = { + 10: '#1A1A1A', + 20: '#212121' +}; + export const accentGrey = { 100: '#F6F8F8', 90: '#E8EFF3', diff --git a/src/theme/colors/index.ts b/src/theme/colors/index.ts index 096a406b8..3d1a19607 100644 --- a/src/theme/colors/index.ts +++ b/src/theme/colors/index.ts @@ -57,6 +57,7 @@ export { darkSlateGray, darkTeal, eerieBlack, + gray, green, jungleGreen, keppel, diff --git a/src/theme/components/tab.modifier.ts b/src/theme/components/tab.modifier.ts index f9bced139..58e49f42e 100644 --- a/src/theme/components/tab.modifier.ts +++ b/src/theme/components/tab.modifier.ts @@ -6,7 +6,7 @@ export const MuiTab: Components['MuiTab'] = { const { palette: { text: { default: defaultText }, - background: { neutral: defaultBackground } + background: { tabs: defaultBackground } } } = theme; return { diff --git a/src/theme/components/tabs.modifier.ts b/src/theme/components/tabs.modifier.ts index 79bdca246..1fb4ed457 100644 --- a/src/theme/components/tabs.modifier.ts +++ b/src/theme/components/tabs.modifier.ts @@ -3,7 +3,7 @@ import { Components, Theme } from '@mui/material'; export const MuiTabs: Components['MuiTabs'] = { styleOverrides: { root: ({ theme }) => ({ - backgroundColor: theme.palette.background.neutral?.default + backgroundColor: theme.palette.background.tabs }), indicator: ({ theme }) => ({ backgroundColor: theme.palette.background.brand?.default diff --git a/src/theme/palette.ts b/src/theme/palette.ts index 4fa6034d8..a8dda89f0 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -195,7 +195,7 @@ export const lightModePalette: PaletteOptions = { default: Colors.charcoal[100], secondary: Colors.accentGrey[90], tertiary: Colors.accentGrey[80], - tabs: Colors.charcoal[70], + tabs: Colors.accentGrey[100], // TODO: Make this name or token to more genric hover: Colors.charcoal[90], supplementary: Colors.accentGrey[40], blur: { @@ -312,7 +312,7 @@ export const darkModePalette: PaletteOptions = { default: Colors.charcoal[10], secondary: Colors.accentGrey[20], tertiary: Colors.accentGrey[30], - tabs: Colors.charcoal[110], + tabs: Colors.gray[10], // TODO: Make this name or token to more genric hover: Colors.charcoal[20], supplementary: Colors.accentGrey[40], blur: { From 732373bdfd2b5eeade22316af20eadbf43365f92 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Fri, 17 Jan 2025 15:09:02 +0530 Subject: [PATCH 08/21] chore: pass the container in the useResourceCleanData function Signed-off-by: Amit Amrutiya --- src/custom/ResourceDetailFormatters/Formatter.tsx | 3 ++- src/custom/ResourceDetailFormatters/styles.ts | 13 ++++++++++--- src/custom/ResourceDetailFormatters/types.ts | 1 + .../useResourceCleanData.ts | 4 +++- 4 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/custom/ResourceDetailFormatters/Formatter.tsx b/src/custom/ResourceDetailFormatters/Formatter.tsx index 11cde80b5..85b5855ae 100644 --- a/src/custom/ResourceDetailFormatters/Formatter.tsx +++ b/src/custom/ResourceDetailFormatters/Formatter.tsx @@ -35,6 +35,7 @@ import { StyledEnvironmentVariablesCode, StyledEnvironmentVariablesPre, StyledTitle, + TextValue, Wrap } from './styles'; import { @@ -201,7 +202,7 @@ export const OperatorDynamicFormatter: React.FC = return ( <> - {data} + {data} {regex.test(data) && } diff --git a/src/custom/ResourceDetailFormatters/styles.ts b/src/custom/ResourceDetailFormatters/styles.ts index 523eafb48..e60bd6501 100644 --- a/src/custom/ResourceDetailFormatters/styles.ts +++ b/src/custom/ResourceDetailFormatters/styles.ts @@ -52,7 +52,7 @@ export const Title = styled('span')({ fontFamily: 'Qanelas Soft, sans-serif' }); -export const ElementData = styled('span')({ +export const ElementData = styled('div')({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', @@ -184,14 +184,21 @@ export const EnvironmentVariableValue = styled('span')({ export const CodeFormatterPre = styled('pre')(({ theme }) => ({ backgroundColor: theme.palette.mode === 'light' ? '#e9eff1' : '#212121', color: theme.palette.text.primary, - width: '100%', wordWrap: 'break-word', overflowWrap: 'break-word', wordBreak: 'break-all', margin: 0, - padding: '0.5rem' + padding: '0.5rem', + maxWidth: '-moz-available' })); +export const TextValue = styled(Box)({ + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + width: 'inherit', + overflow: 'hidden' +}); + export const CodeFormatterCode = styled('code')(({ theme }) => ({ backgroundColor: theme.palette.mode === 'light' ? '#e9eff1' : '#212121', color: theme.palette.text.primary, diff --git a/src/custom/ResourceDetailFormatters/types.ts b/src/custom/ResourceDetailFormatters/types.ts index 9305cbaaf..93a3613a1 100644 --- a/src/custom/ResourceDetailFormatters/types.ts +++ b/src/custom/ResourceDetailFormatters/types.ts @@ -264,4 +264,5 @@ export interface GetResourceCleanDataProps { dispatchMsgToEditor?: (msg: any) => void; activeLabels?: string[]; showStatus?: boolean; + container?: any; } diff --git a/src/custom/ResourceDetailFormatters/useResourceCleanData.ts b/src/custom/ResourceDetailFormatters/useResourceCleanData.ts index 4d4a0f1e3..b34d98ba4 100644 --- a/src/custom/ResourceDetailFormatters/useResourceCleanData.ts +++ b/src/custom/ResourceDetailFormatters/useResourceCleanData.ts @@ -67,13 +67,15 @@ export const useResourceCleanData = () => { resource, activeLabels, dispatchMsgToEditor, - showStatus = true + showStatus = true, + container }: GetResourceCleanDataProps) => { const parsedStatus = resource?.status?.attribute && JSON.parse(resource?.status?.attribute); const parsedSpec = resource?.spec?.attribute && JSON.parse(resource?.spec.attribute); const numberStates = structureNumberStates(parsedStatus, parsedSpec); const kind = resource?.kind ?? resource?.component?.kind; const cleanData = { + container: container, age: getAge(resource?.metadata?.creationTimestamp), kind: kind, status: showStatus && getStatus(parsedStatus), From 506179a9682a6c8e75996750515bc03f1215d0e5 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Fri, 17 Jan 2025 15:44:15 +0530 Subject: [PATCH 09/21] feat: make clone button as a primary action Signed-off-by: Amit Amrutiya --- src/custom/CatalogDetail/ActionButton.tsx | 41 +++++++++++------------ 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx index bf601a09a..55eaf14c9 100644 --- a/src/custom/CatalogDetail/ActionButton.tsx +++ b/src/custom/CatalogDetail/ActionButton.tsx @@ -76,31 +76,13 @@ const ActionButtons: React.FC = ({ width: '100%' }} > - - cleanedType === VIEWS - ? downloadYaml(details.pattern_file, details.name) - : downloadPattern(details.id, details.name, getDownloadUrl) - } - > - - Download - - {cleanedType !== FILTERS && ( handleClone(details?.name, details?.id)} @@ -110,12 +92,29 @@ const ActionButtons: React.FC = ({ ) : ( <> - + Clone )} )} + + cleanedType === VIEWS + ? downloadYaml(details.pattern_file, details.name) + : downloadPattern(details.id, details.name, getDownloadUrl) + } + > + + Download + )} From f4bc02358c638945d214fb54d8794690d80e7981 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Fri, 17 Jan 2025 15:45:56 +0530 Subject: [PATCH 10/21] fix: color Signed-off-by: Amit Amrutiya --- src/custom/CatalogDetail/ActionButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx index 55eaf14c9..dddd7a0b5 100644 --- a/src/custom/CatalogDetail/ActionButton.tsx +++ b/src/custom/CatalogDetail/ActionButton.tsx @@ -92,7 +92,7 @@ const ActionButtons: React.FC = ({ ) : ( <> - + Clone )} From 3a0653686964b4601c2a0a3b835a96cad9e69cb8 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Sat, 18 Jan 2025 11:36:02 +0530 Subject: [PATCH 11/21] fix: share is not working issue Signed-off-by: Amit Amrutiya --- src/custom/ShareModal/ShareModal.tsx | 12 ++++++-- .../UserSearchField/UserSearchField.tsx | 30 ++++++++++--------- 2 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src/custom/ShareModal/ShareModal.tsx b/src/custom/ShareModal/ShareModal.tsx index 6150249cd..86b1d5dd3 100644 --- a/src/custom/ShareModal/ShareModal.tsx +++ b/src/custom/ShareModal/ShareModal.tsx @@ -167,7 +167,6 @@ const ShareModal: React.FC = ({ handleShare, hostURL = null, handleCopy, - isVisibilitySelectorDisabled = false, fetchSuggestions }: ShareModalProps): JSX.Element => { @@ -221,7 +220,6 @@ const ShareModal: React.FC = ({ setOption(selectedResource?.visibility); } }, [selectedResource]); - return (
= ({ ) : ( )} @@ -289,7 +289,13 @@ const ShareModal: React.FC = ({ ))} - + {selectedOption === SHARE_MODE.PRIVATE ? options.PRIVATE : options.PUBLIC}
diff --git a/src/custom/UserSearchField/UserSearchField.tsx b/src/custom/UserSearchField/UserSearchField.tsx index 0132ab9d8..125e93940 100644 --- a/src/custom/UserSearchField/UserSearchField.tsx +++ b/src/custom/UserSearchField/UserSearchField.tsx @@ -1,5 +1,6 @@ import Autocomplete from '@mui/material/Autocomplete'; import CircularProgress from '@mui/material/CircularProgress'; +import { debounce } from 'lodash'; import React, { useState } from 'react'; import { Avatar, Box, Chip, Grid, TextField, Tooltip, Typography } from '../../base'; import { iconSmall } from '../../constants/iconsSizes'; @@ -88,21 +89,22 @@ const UserShareSearch: React.FC = ({ } }; - const handleInputChange = (_event: React.SyntheticEvent, value: string) => { - if (value === '') { - setOptions([]); - setOpen(false); - } else { - setSearchUserLoading(true); - fetchSuggestions(value).then((filteredData) => { - setOptions(filteredData); + const handleInputChange = debounce( + async (_event: React.SyntheticEvent, value: string) => { + if (value === '') { + setOptions([]); + setOpen(false); + } else { + setSearchUserLoading(true); + const suggestions = await fetchSuggestions(value); + setOptions(suggestions); setSearchUserLoading(false); - }); - setError(false); - setOpen(true); - } - }; - + setError(false); + setOpen(true); + } + }, + 300 + ); /** * Clone customUsersList component to pass necessary props */ From 5763094f033b2a401bfda3095c24a18b471542a7 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Sat, 18 Jan 2025 11:37:55 +0530 Subject: [PATCH 12/21] feat: remove share changes Signed-off-by: Amit Amrutiya --- src/custom/ShareModal/ShareModal.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/custom/ShareModal/ShareModal.tsx b/src/custom/ShareModal/ShareModal.tsx index 86b1d5dd3..6150249cd 100644 --- a/src/custom/ShareModal/ShareModal.tsx +++ b/src/custom/ShareModal/ShareModal.tsx @@ -167,6 +167,7 @@ const ShareModal: React.FC = ({ handleShare, hostURL = null, handleCopy, + isVisibilitySelectorDisabled = false, fetchSuggestions }: ShareModalProps): JSX.Element => { @@ -220,6 +221,7 @@ const ShareModal: React.FC = ({ setOption(selectedResource?.visibility); } }, [selectedResource]); + return (
= ({ ) : ( )} @@ -289,13 +289,7 @@ const ShareModal: React.FC = ({ ))} - + {selectedOption === SHARE_MODE.PRIVATE ? options.PRIVATE : options.PUBLIC}
From f59face1e29a5221b55c86165a84a9135ba55eb9 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Sat, 18 Jan 2025 16:50:15 +0530 Subject: [PATCH 13/21] fix(hover): hover color of outlined button Signed-off-by: Sudhanshu Dasgupta --- src/theme/components/button.modifier.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/theme/components/button.modifier.ts b/src/theme/components/button.modifier.ts index 12a6495b4..7d2788b75 100644 --- a/src/theme/components/button.modifier.ts +++ b/src/theme/components/button.modifier.ts @@ -5,7 +5,7 @@ export const MuiButton: Components['MuiButton'] = { root: ({ theme }) => { const { palette: { - background: { brand, neutral: BgNeutral }, + background: { brand, hover }, text: { disabled, constant, neutral: TextNeutral }, border: { neutral } }, @@ -24,7 +24,7 @@ export const MuiButton: Components['MuiButton'] = { '&.MuiButton-outlined': { border: `1px solid ${neutral?.default}`, '&:hover': { - backgroundColor: BgNeutral?.pressed, + backgroundColor: hover, color: TextNeutral?.default } }, From 303ffc26aded1838615336033dbf8d32361d7886 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Sat, 18 Jan 2025 17:55:07 +0530 Subject: [PATCH 14/21] fix(button): share action Signed-off-by: Sudhanshu Dasgupta --- src/custom/CatalogDetail/style.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/custom/CatalogDetail/style.tsx b/src/custom/CatalogDetail/style.tsx index 10afeefa4..632f89b04 100644 --- a/src/custom/CatalogDetail/style.tsx +++ b/src/custom/CatalogDetail/style.tsx @@ -264,8 +264,7 @@ export const RedirectLink = styled(Link)(({ theme }) => ({ export const ShareButtonGroup = styled(ButtonGroup)({ boxShadow: 'none', border: 'none', - outline: 'none', - height: '76%' + outline: 'none' }); export const ShareButton = styled(Button)(({ theme }) => ({ From 95925d202ebd9e0c2e79eaa8c3e93a426f4bc229 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 22 Jan 2025 19:00:47 +0530 Subject: [PATCH 15/21] fix(CI): add legacy comand to install package in layer5 Signed-off-by: Sudhanshu Dasgupta --- .github/workflows/bump-meshery-version.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/bump-meshery-version.yml b/.github/workflows/bump-meshery-version.yml index 45722c87a..dffb40be2 100644 --- a/.github/workflows/bump-meshery-version.yml +++ b/.github/workflows/bump-meshery-version.yml @@ -116,7 +116,7 @@ jobs: cache: "npm" cache-dependency-path: '**/package-lock.json' - name: Make changes to pull request - run: npm install @layer5/sistent@${{needs.versions-check.outputs.current}} + run: npm install @layer5/sistent@${{needs.versions-check.outputs.current}} --legacy-peer-deps - name: Create Pull Request id: cpr uses: peter-evans/create-pull-request@v7 From 01248f4ee6e03d6c6e21c93b4272a9d7b494244f Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Thu, 23 Jan 2025 09:24:39 +0530 Subject: [PATCH 16/21] feat: add support for views to workspace Signed-off-by: Amit Amrutiya --- .../TransferList/TransferList.tsx | 2 +- src/custom/Workspaces/AssignmentModal.tsx | 59 ++++++- src/custom/Workspaces/DesignTable.tsx | 1 + .../Workspaces/hooks/useDesignAssignment.tsx | 6 + .../Workspaces/hooks/useViewsAssignment.tsx | 158 ++++++++++++++++++ src/custom/Workspaces/index.ts | 6 +- src/custom/Workspaces/types.ts | 1 + 7 files changed, 229 insertions(+), 4 deletions(-) create mode 100644 src/custom/Workspaces/hooks/useViewsAssignment.tsx diff --git a/src/custom/TransferModal/TransferList/TransferList.tsx b/src/custom/TransferModal/TransferList/TransferList.tsx index 40098feec..3999ecb06 100644 --- a/src/custom/TransferModal/TransferList/TransferList.tsx +++ b/src/custom/TransferModal/TransferList/TransferList.tsx @@ -29,7 +29,7 @@ export function getFallbackImageBasedOnKind(kind: string | undefined): JSX.Eleme } export interface TransferListProps { - name: string; + name?: string; assignableData: ListItemType[]; assignedData: (data: ListItemType[]) => void; originalAssignedData: ListItemType[]; diff --git a/src/custom/Workspaces/AssignmentModal.tsx b/src/custom/Workspaces/AssignmentModal.tsx index 4fc4d8652..0274426b0 100644 --- a/src/custom/Workspaces/AssignmentModal.tsx +++ b/src/custom/Workspaces/AssignmentModal.tsx @@ -1,4 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ +import { Divider } from '../../base'; import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal'; import { TransferList } from '../TransferModal/TransferList'; import { ModalActionDiv } from './styles'; @@ -22,6 +23,21 @@ interface AssignmentModalProps { isAssignAllowed: boolean; isRemoveAllowed: boolean; helpText: string; + showViews?: boolean; + nameViews?: string; + assignableViewsData?: any[]; + handleAssignedViewsData?: (data: any) => void; + originalAssignedViewsData?: any[]; + + emptyStateViewsIcon?: JSX.Element; + handleAssignableViewsPage?: () => void; + handleAssignedViewsPage?: () => void; + originalLeftViewsCount?: number; + originalRightViewsCount?: number; + onAssignViews?: () => void; + disableTransferViews?: boolean; + isAssignAllowedViews?: boolean; + isRemoveAllowedViews?: boolean; } const AssignmentModal: React.FC = ({ @@ -42,7 +58,19 @@ const AssignmentModal: React.FC = ({ disableTransfer, isAssignAllowed, isRemoveAllowed, - helpText + helpText, + showViews, + nameViews, + assignableViewsData, + handleAssignedViewsData, + originalAssignedViewsData, + emptyStateViewsIcon, + handleAssignableViewsPage, + handleAssignedViewsPage, + originalLeftViewsCount, + originalRightViewsCount, + isAssignAllowedViews = false, + isRemoveAllowedViews = false }) => { return ( = ({ rightPermission={isRemoveAllowed} transferComponentType={''} /> + + {showViews && ( + {})} + originalAssignedData={originalAssignedViewsData || []} + emptyStateIconLeft={emptyStateViewsIcon || <>} + emtyStateMessageLeft={`No views available`} + emptyStateIconRight={emptyStateViewsIcon || <>} + emtyStateMessageRight={`No views assigned`} + assignablePage={handleAssignableViewsPage || (() => {})} + assignedPage={handleAssignedViewsPage || (() => {})} + originalLeftCount={originalLeftViewsCount ?? 0} + originalRightCount={originalRightViewsCount ?? 0} + leftPermission={isAssignAllowedViews} + rightPermission={isRemoveAllowedViews} + transferComponentType={''} + /> + )} Cancel - + Save diff --git a/src/custom/Workspaces/DesignTable.tsx b/src/custom/Workspaces/DesignTable.tsx index e099cc572..46c3d9cf1 100644 --- a/src/custom/Workspaces/DesignTable.tsx +++ b/src/custom/Workspaces/DesignTable.tsx @@ -264,6 +264,7 @@ const DesignTable: React.FC = ({ helpText={`Assign Designs to ${workspaceName}`} isAssignAllowed={isAssignAllowed} isRemoveAllowed={isRemoveAllowed} + showViews={false} /> { + const { addedDesignsIds, removedDesignsIds } = getAddedAndRemovedDesigns(allAssignedDesigns); + return addedDesignsIds.length > 0 || removedDesignsIds.length > 0; + }; + const handleAssignDesigns = async (): Promise => { const { addedDesignsIds, removedDesignsIds } = getAddedAndRemovedDesigns(assignedDesigns); @@ -144,6 +149,7 @@ const useDesignAssignment = ({ handleAssignedPage: handleAssignedPageDesign, handleAssign: handleAssignDesigns, handleAssignData: handleAssignDesignsData, + isActivityOccurred: isDesignsActivityOccurred, disableTransferButton, assignedItems: assignedDesigns }; diff --git a/src/custom/Workspaces/hooks/useViewsAssignment.tsx b/src/custom/Workspaces/hooks/useViewsAssignment.tsx new file mode 100644 index 000000000..6f1294b9f --- /dev/null +++ b/src/custom/Workspaces/hooks/useViewsAssignment.tsx @@ -0,0 +1,158 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { useEffect, useState } from 'react'; +import { Pattern } from '../../CustomCatalog/CustomCard'; +import { withDefaultPageArgs } from '../../PerformersSection/PerformersSection'; +import { AssignmentHookResult } from '../types'; + +interface AddedAndRemovedViews { + addedviewsIds: string[]; + removedviewsIds: string[]; +} + +interface useViewAssignmentProps { + workspaceId: string; + useGetViewsOfWorkspaceQuery: any; + useAssignViewToWorkspaceMutation: any; + useUnassignViewFromWorkspaceMutation: any; +} + +const useViewAssignment = ({ + workspaceId, + useGetViewsOfWorkspaceQuery, + useAssignViewToWorkspaceMutation, + useUnassignViewFromWorkspaceMutation +}: useViewAssignmentProps): AssignmentHookResult => { + const [viewsPage, setviewsPage] = useState(0); + const [viewsData, setviewsData] = useState([]); + const viewsPageSize = 25; + const [viewsOfWorkspacePage, setviewsOfWorkspacePage] = useState(0); + const [workspaceviewsData, setWorkspaceviewsData] = useState([]); + const [assignviewModal, setAssignviewModal] = useState(false); + const [skipviews, setSkipviews] = useState(true); + const [disableTransferButton, setDisableTransferButton] = useState(true); + const [assignedviews, setAssignedviews] = useState([]); + + const { data: views } = useGetViewsOfWorkspaceQuery( + withDefaultPageArgs({ + workspaceId, + page: viewsPage, + pagesize: viewsPageSize, + filter: '{"assigned":false}' + }), + { + skip: skipviews + } + ); + + const { data: viewsOfWorkspace } = useGetViewsOfWorkspaceQuery( + withDefaultPageArgs({ + workspaceId, + page: viewsOfWorkspacePage, + pagesize: viewsPageSize + }), + { + skip: skipviews + } + ); + + const [assignviewToWorkspace] = useAssignViewToWorkspaceMutation(); + const [unassignviewFromWorkspace] = useUnassignViewFromWorkspaceMutation(); + + useEffect(() => { + const viewsDataRtk = views?.views ? views.views : []; + setviewsData((prevData) => [...prevData, ...viewsDataRtk]); + }, [views]); + + useEffect(() => { + const viewsOfWorkspaceDataRtk = viewsOfWorkspace?.views ? viewsOfWorkspace.views : []; + setWorkspaceviewsData((prevData) => [...prevData, ...viewsOfWorkspaceDataRtk]); + }, [viewsOfWorkspace]); + + const handleAssignviewModal = (e?: React.MouseEvent): void => { + e?.stopPropagation(); + setAssignviewModal(true); + setSkipviews(false); + }; + + const handleAssignviewModalClose = (e?: React.MouseEvent): void => { + e?.stopPropagation(); + setAssignviewModal(false); + setSkipviews(true); + }; + + const handleAssignablePageview = (): void => { + const pagesCount = Math.ceil(Number(views?.total_count) / viewsPageSize); + if (viewsPage < pagesCount - 1) { + setviewsPage((prevviewsPage) => prevviewsPage + 1); + } + }; + + const handleAssignedPageview = (): void => { + const pagesCount = Math.ceil(Number(viewsOfWorkspace?.total_count) / viewsPageSize); + if (viewsOfWorkspacePage < pagesCount - 1) { + setviewsOfWorkspacePage((prevPage) => prevPage + 1); + } + }; + + const getAddedAndRemovedviews = (allAssignedviews: Pattern[]): AddedAndRemovedViews => { + const originalviewsIds = workspaceviewsData.map((view) => view.id); + const updatedviewsIds = allAssignedviews.map((view) => view.id); + + const addedviewsIds = updatedviewsIds.filter((id) => !originalviewsIds.includes(id)); + const removedviewsIds = originalviewsIds.filter((id) => !updatedviewsIds.includes(id)); + + return { addedviewsIds, removedviewsIds }; + }; + + const isViewsActivityOccurred = (allViews: Pattern[]): boolean => { + const { addedviewsIds, removedviewsIds } = getAddedAndRemovedviews(allViews); + return addedviewsIds.length > 0 || removedviewsIds.length > 0; + }; + + const handleAssignviews = async (): Promise => { + const { addedviewsIds, removedviewsIds } = getAddedAndRemovedviews(assignedviews); + + addedviewsIds.map((id) => + assignviewToWorkspace({ + workspaceId, + viewId: id + }).unwrap() + ); + + removedviewsIds.map((id) => + unassignviewFromWorkspace({ + workspaceId, + viewId: id + }).unwrap() + ); + + setviewsData([]); + setWorkspaceviewsData([]); + setviewsPage(0); + setviewsOfWorkspacePage(0); + handleAssignviewModalClose(); + }; + + const handleAssignviewsData = (updatedAssignedData: Pattern[]): void => { + const { addedviewsIds, removedviewsIds } = getAddedAndRemovedviews(updatedAssignedData); + setDisableTransferButton(!(addedviewsIds.length > 0 || removedviewsIds.length > 0)); + setAssignedviews(updatedAssignedData); + }; + + return { + data: viewsData, + workspaceData: workspaceviewsData, + assignModal: assignviewModal, + handleAssignModal: handleAssignviewModal, + handleAssignModalClose: handleAssignviewModalClose, + handleAssignablePage: handleAssignablePageview, + handleAssignedPage: handleAssignedPageview, + handleAssign: handleAssignviews, + isActivityOccurred: isViewsActivityOccurred, + handleAssignData: handleAssignviewsData, + disableTransferButton, + assignedItems: assignedviews + }; +}; + +export default useViewAssignment; diff --git a/src/custom/Workspaces/index.ts b/src/custom/Workspaces/index.ts index 6a0dfa9d4..82cd1eacd 100644 --- a/src/custom/Workspaces/index.ts +++ b/src/custom/Workspaces/index.ts @@ -2,16 +2,20 @@ import AssignmentModal from './AssignmentModal'; import DesignTable from './DesignTable'; import EnvironmentTable from './EnvironmentTable'; import WorkspaceTeamsTable from './WorkspaceTeamsTable'; +import WorkspaceViewsTable from './WorkspaceViewsTable'; import useDesignAssignment from './hooks/useDesignAssignment'; import useEnvironmentAssignment from './hooks/useEnvironmentAssignment'; import useTeamAssignment from './hooks/useTeamAssignment'; +import useViewAssignment from './hooks/useViewsAssignment'; export { AssignmentModal, DesignTable, EnvironmentTable, WorkspaceTeamsTable, + WorkspaceViewsTable, useDesignAssignment, useEnvironmentAssignment, - useTeamAssignment + useTeamAssignment, + useViewAssignment }; diff --git a/src/custom/Workspaces/types.ts b/src/custom/Workspaces/types.ts index 5ad04b8cd..280c4ec97 100644 --- a/src/custom/Workspaces/types.ts +++ b/src/custom/Workspaces/types.ts @@ -8,6 +8,7 @@ export interface AssignmentHookResult { handleAssignedPage: () => void; handleAssign: () => void; handleAssignData: (data: T[]) => void; + isActivityOccurred?: (allItems: T[]) => boolean; disableTransferButton: boolean; assignedItems: T[]; } From a64543ea21b4729735425478ad2d46d79cfa8acc Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Thu, 23 Jan 2025 09:28:29 +0530 Subject: [PATCH 17/21] feat: use the views table for the workspace table view Signed-off-by: Amit Amrutiya --- src/custom/Workspaces/AssignmentModal.tsx | 2 +- src/custom/Workspaces/WorkspaceViewsTable.tsx | 312 ++++++++++++++++++ 2 files changed, 313 insertions(+), 1 deletion(-) create mode 100644 src/custom/Workspaces/WorkspaceViewsTable.tsx diff --git a/src/custom/Workspaces/AssignmentModal.tsx b/src/custom/Workspaces/AssignmentModal.tsx index 0274426b0..61d20fbe6 100644 --- a/src/custom/Workspaces/AssignmentModal.tsx +++ b/src/custom/Workspaces/AssignmentModal.tsx @@ -130,7 +130,7 @@ const AssignmentModal: React.FC = ({ Cancel - + Save diff --git a/src/custom/Workspaces/WorkspaceViewsTable.tsx b/src/custom/Workspaces/WorkspaceViewsTable.tsx new file mode 100644 index 000000000..2335dcf00 --- /dev/null +++ b/src/custom/Workspaces/WorkspaceViewsTable.tsx @@ -0,0 +1,312 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables'; +import React, { useState } from 'react'; +import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../base'; +import { DeleteIcon, EnvironmentIcon } from '../../icons'; +import { CHARCOAL, SistentThemeProvider } from '../../theme'; +import { NameDiv } from '../CatalogDesignTable/style'; +import { RESOURCE_TYPES } from '../CatalogDetail/types'; +import { CustomColumnVisibilityControl } from '../CustomColumnVisibilityControl'; +import { CustomTooltip } from '../CustomTooltip'; +import { ConditionalTooltip } from '../Helpers/CondtionalTooltip'; +import { useWindowDimensions } from '../Helpers/Dimension'; +import { + ColView, + updateVisibleColumns +} from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column'; +import ResponsiveDataTable, { IconWrapper } from '../ResponsiveDataTable'; +import SearchBar from '../SearchBar'; +import { TooltipIcon } from '../TooltipIconButton'; +import AssignmentModal from './AssignmentModal'; +import EditButton from './EditButton'; +import useViewAssignment from './hooks/useViewsAssignment'; +import { CellStyle, CustomBodyRenderStyle, TableHeader, TableRightActionHeader } from './styles'; + +interface ViewsTableProps { + workspaceId: string; + workspaceName: string; + useGetViewsOfWorkspaceQuery: any; + useUnassignViewFromWorkspaceMutation: any; + useAssignViewToWorkspaceMutation: any; + isRemoveAllowed: boolean; + isAssignAllowed: boolean; + handleShowDetails: (viewId: string, viewName: string, filterType: string) => void; +} + +const colViews: ColView[] = [ + ['id', 'na'], + ['name', 'xs'], + ['description', 'm'], + ['organization_id', 'l'], + ['created_at', 'xl'], + ['updated_at', 'xl'], + ['visibility', 'l'], + ['actions', 'xs'] +]; + +export const ResizableDescriptionCell = ({ value }: { value: string }) => ( +
+ + + + {value} + + + +
+); + +const WorkspaceViewsTable: React.FC = ({ + workspaceId, + workspaceName, + isRemoveAllowed, + useGetViewsOfWorkspaceQuery, + useUnassignViewFromWorkspaceMutation, + useAssignViewToWorkspaceMutation, + isAssignAllowed, + handleShowDetails +}) => { + const [expanded, setExpanded] = useState(true); + const handleAccordionChange = () => { + setExpanded(!expanded); + }; + const [search, setSearch] = useState(''); + const [isSearchExpanded, setIsSearchExpanded] = useState(false); + const [page, setPage] = useState(0); + const [pageSize, setPageSize] = useState(10); + const [sortOrder, setSortOrder] = useState('updated_at desc'); + const { data: viewsOfWorkspace } = useGetViewsOfWorkspaceQuery({ + workspaceId, + page: page, + pageSize: pageSize, + search: search, + order: sortOrder + }); + const { width } = useWindowDimensions(); + const [unassignviewFromWorkspace] = useUnassignViewFromWorkspaceMutation(); + const columns: MUIDataTableColumn[] = [ + { + name: 'id', + label: 'ID', + options: { + filter: false, + customBodyRender: (value) => + } + }, + { + name: 'name', + label: 'Name', + options: { + filter: false, + sort: true, + searchable: true, + customBodyRender: (value, tableMeta) => { + const viewId = tableMeta.tableData[tableMeta.rowIndex]?.id ?? ''; + const viewName = tableMeta.tableData[tableMeta.rowIndex]?.name ?? ''; + return ( + handleShowDetails(viewId, viewName, RESOURCE_TYPES.VIEW)}> + {value} + + ); + } + } + }, + { + name: 'created_at', + label: 'Created At', + options: { + filter: false, + sort: true, + searchable: true, + setCellHeaderProps: () => { + return { align: 'center' }; + } + } + }, + { + name: 'updated_at', + label: 'Updated At', + options: { + filter: false, + sort: true, + searchable: true, + setCellHeaderProps: () => { + return { align: 'center' }; + } + } + }, + { + name: 'visibility', + label: 'Visibility', + options: { + filter: false, + sort: false, + searchable: true, + setCellHeaderProps: () => { + return { align: 'center' }; + } + } + }, + { + name: 'actions', + label: 'Actions', + options: { + filter: false, + sort: false, + searchable: false, + customBodyRender: (_: string, tableMeta: MUIDataTableMeta) => ( + + { + isRemoveAllowed && + unassignviewFromWorkspace({ + workspaceId, + viewId: tableMeta.rowData[0] + }); + }} + iconType="delete" + > + + + + ) + } + } + ]; + + const viewAssignment = useViewAssignment({ + workspaceId, + useGetViewsOfWorkspaceQuery, + useUnassignViewFromWorkspaceMutation, + useAssignViewToWorkspaceMutation + }); + + const [columnVisibility, setColumnVisibility] = useState>(() => { + const showCols = updateVisibleColumns(colViews, width); + const initialVisibility: Record = {}; + columns.forEach((col) => { + initialVisibility[col.name] = showCols[col.name]; + }); + return initialVisibility; + }); + + const options = { + filter: false, + responsive: 'standard', + selectableRows: 'none', + count: viewsOfWorkspace?.total_count, + rowsPerPage: pageSize, + page, + elevation: 0, + sortOrder: { + name: sortOrder.split(' ')[0], + direction: sortOrder.split(' ')[1] + }, + onTableChange: (action: string, tableState: any) => { + const sortInfo = tableState.announceText ? tableState.announceText.split(' : ') : []; + let order = ''; + if (tableState.activeColumn) { + order = `${columns[tableState.activeColumn].name} desc`; + } + switch (action) { + case 'changePage': + setPage(tableState.page); + break; + case 'changeRowsPerPage': + setPageSize(tableState.rowsPerPage); + break; + case 'sort': + if (sortInfo.length == 2) { + if (sortInfo[1] === 'ascending') { + order = `${columns[tableState.activeColumn].name} asc`; + } else { + order = `${columns[tableState.activeColumn].name} desc`; + } + } + if (order !== sortOrder) { + setSortOrder(order); + } + break; + } + } + }; + const [tableCols, updateCols] = useState(columns); + + return ( + + + } + sx={{ + backgroundColor: 'background.paper' + }} + > + + + Assigned Views + + + { + setSearch(value); + }} + onClear={() => { + setSearch(''); + }} + expanded={isSearchExpanded} + setExpanded={setIsSearchExpanded} + placeholder="Search workspaces..." + /> + + + + + + + + + + + } + name="Views" + assignableData={viewAssignment.data} + handleAssignedData={viewAssignment.handleAssignData} + originalAssignedData={viewAssignment.workspaceData} + emptyStateIcon={} + handleAssignablePage={viewAssignment.handleAssignablePage} + handleAssignedPage={viewAssignment.handleAssignedPage} + originalLeftCount={viewAssignment.data?.length || 0} + originalRightCount={viewsOfWorkspace?.total_count || 0} + onAssign={viewAssignment.handleAssign} + disableTransfer={viewAssignment.disableTransferButton} + helpText={`Assign Views to ${workspaceName}`} + isAssignAllowed={isAssignAllowed} + isRemoveAllowed={isRemoveAllowed} + /> + + ); +}; + +export default WorkspaceViewsTable; From 4528710ff214dcc1f33576c06356f99d9bc6eba9 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Thu, 23 Jan 2025 23:06:52 +0530 Subject: [PATCH 18/21] fix: issue with the prompt component Signed-off-by: Amit Amrutiya --- src/custom/Prompt/index.tsx | 4 ++-- src/custom/Prompt/promt-component.tsx | 8 +++++++- src/custom/index.tsx | 3 ++- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/custom/Prompt/index.tsx b/src/custom/Prompt/index.tsx index 2a3497faf..46a7b6a75 100644 --- a/src/custom/Prompt/index.tsx +++ b/src/custom/Prompt/index.tsx @@ -1,3 +1,3 @@ -import PromptComponent from './promt-component'; - +import PromptComponent, { PROMPT_VARIANTS } from './promt-component'; +export { PROMPT_VARIANTS, PromptComponent }; export default PromptComponent; diff --git a/src/custom/Prompt/promt-component.tsx b/src/custom/Prompt/promt-component.tsx index 90824d958..052bac06e 100644 --- a/src/custom/Prompt/promt-component.tsx +++ b/src/custom/Prompt/promt-component.tsx @@ -96,7 +96,13 @@ const PromptComponent = forwardRef(({ variant }, ref) => {subtitle && ( - + {subtitle} diff --git a/src/custom/index.tsx b/src/custom/index.tsx index 2a4e5e93b..b95c87904 100644 --- a/src/custom/index.tsx +++ b/src/custom/index.tsx @@ -36,7 +36,7 @@ import { LearningCard } from './LearningCard'; import { BasicMarkdown, RenderMarkdown } from './Markdown'; import { ModalCard } from './ModalCard'; import PopperListener, { IPopperListener } from './PopperListener'; -import PromptComponent from './Prompt'; +import { PROMPT_VARIANTS, PromptComponent } from './Prompt'; import ResponsiveDataTable, { DataTableEllipsisMenu, ResponsiveDataTableProps @@ -90,6 +90,7 @@ export { InfoTooltip, LearningCard, ModalCard, + PROMPT_VARIANTS, PopperListener, PromptComponent, ResponsiveDataTable, From 12967c4c97fed29a2c424444e5b5ca19080b48a8 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Thu, 23 Jan 2025 23:44:17 +0530 Subject: [PATCH 19/21] feat: add checkbox option in the prompt component Signed-off-by: Amit Amrutiya --- src/custom/Prompt/promt-component.tsx | 38 +++++++++++++++++++++++---- 1 file changed, 33 insertions(+), 5 deletions(-) diff --git a/src/custom/Prompt/promt-component.tsx b/src/custom/Prompt/promt-component.tsx index 052bac06e..9dbecaf52 100644 --- a/src/custom/Prompt/promt-component.tsx +++ b/src/custom/Prompt/promt-component.tsx @@ -1,5 +1,5 @@ import { forwardRef, useImperativeHandle, useRef, useState } from 'react'; -import { Typography } from '../../base'; +import { Checkbox, FormControlLabel, Typography } from '../../base'; import { useTheme } from '../../theme'; import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal'; import { ActionComponent, Subtitle } from './style'; @@ -26,6 +26,8 @@ interface State { showInfoIcon?: string; variant?: PromptVariant; headerIcon?: React.ReactNode; + showCheckbox?: boolean; + isChecked?: boolean; } interface ShowParams { @@ -34,11 +36,13 @@ interface ShowParams { primaryOption: string; variant: PromptVariant; showInfoIcon?: string; + showCheckbox?: boolean; headerIcon?: React.ReactNode; } export interface PromptRef { show: (params: ShowParams) => Promise; + getCheckboxState: () => boolean; } const PromptComponent = forwardRef(({ variant }, ref) => { @@ -49,7 +53,9 @@ const PromptComponent = forwardRef(({ variant }, ref) => primaryOption: '', showInfoIcon: '', variant, - headerIcon: undefined + headerIcon: undefined, + isChecked: false, + showCheckbox: false }); /* This ref is used to store the resolve and reject functions of the promise returned by the show method */ @@ -67,7 +73,8 @@ const PromptComponent = forwardRef(({ variant }, ref) => setState({ ...params, isOpen: true, - showInfoIcon: params.showInfoIcon || '' + showInfoIcon: params.showInfoIcon || '', + showCheckbox: !!params.showCheckbox }); }); }; @@ -77,11 +84,20 @@ const PromptComponent = forwardRef(({ variant }, ref) => setState((prevState) => ({ ...prevState, isOpen: false })); }; + const handleCheckboxChange = () => { + setState((prevState) => ({ ...prevState, isChecked: !prevState.isChecked })); + }; + + const getCheckboxState = () => { + return !!state.isChecked; + }; + useImperativeHandle(ref, () => ({ - show + show, + getCheckboxState })); - const { isOpen, primaryOption, title, subtitle, showInfoIcon, headerIcon } = state; + const { isOpen, primaryOption, title, subtitle, showInfoIcon, headerIcon, showCheckbox } = state; const { resolve } = promiseInfoRef.current; return ( @@ -106,6 +122,18 @@ const PromptComponent = forwardRef(({ variant }, ref) => {subtitle} + {showCheckbox && ( + + } + label={Do not show again} + /> + )} )} From c724e7192a707c790993f03408f7409746d8e8da Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Fri, 24 Jan 2025 20:04:26 +0530 Subject: [PATCH 20/21] feat: add pagination item component to sistent Signed-off-by: Amit Amrutiya --- src/base/Pagination/Pagination.tsx | 7 ++++++- src/base/Pagination/index.tsx | 4 ++-- src/theme/palette.ts | 2 +- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/base/Pagination/Pagination.tsx b/src/base/Pagination/Pagination.tsx index 728ad7fee..85526ceb9 100644 --- a/src/base/Pagination/Pagination.tsx +++ b/src/base/Pagination/Pagination.tsx @@ -1,8 +1,13 @@ -import { Pagination as MuiPagination, PaginationProps as MuiPaginationProps } from '@mui/material'; +import { + Pagination as MuiPagination, + PaginationItem as MuiPaginationItem, + PaginationProps as MuiPaginationProps +} from '@mui/material'; import React from 'react'; const Pagination = React.forwardRef((props, ref) => { return ; }); +export { MuiPaginationItem as PaginationItem }; export default Pagination; diff --git a/src/base/Pagination/index.tsx b/src/base/Pagination/index.tsx index 1ab1d4c17..cf0100cf7 100644 --- a/src/base/Pagination/index.tsx +++ b/src/base/Pagination/index.tsx @@ -1,5 +1,5 @@ import { PaginationProps } from '@mui/material'; -import Pagination from './Pagination'; +import Pagination, { PaginationItem } from './Pagination'; -export { Pagination }; +export { Pagination, PaginationItem }; export type { PaginationProps }; diff --git a/src/theme/palette.ts b/src/theme/palette.ts index a8dda89f0..3881c6714 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -350,7 +350,7 @@ export const darkModePalette: PaletteOptions = { tertiary: Colors.blue[10] }, success: { - default: Colors.green[40], + default: Colors.KEPPEL, hover: Colors.green[50], pressed: Colors.green[60], secondary: Colors.green[20], From a3adddcf96d4a699112292dccced8f05c9820dfd Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Mon, 27 Jan 2025 20:18:31 +0530 Subject: [PATCH 21/21] feat: add card token Signed-off-by: Amit Amrutiya --- src/theme/palette.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/theme/palette.ts b/src/theme/palette.ts index a8dda89f0..c1dd1218f 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -19,6 +19,7 @@ declare module '@mui/material/styles' { default: string; }; tabs?: string; + card?: string; tertiary?: string; hover?: string; blur?: { @@ -196,6 +197,7 @@ export const lightModePalette: PaletteOptions = { secondary: Colors.accentGrey[90], tertiary: Colors.accentGrey[80], tabs: Colors.accentGrey[100], // TODO: Make this name or token to more genric + card: Colors.charcoal[100], hover: Colors.charcoal[90], supplementary: Colors.accentGrey[40], blur: { @@ -313,6 +315,7 @@ export const darkModePalette: PaletteOptions = { secondary: Colors.accentGrey[20], tertiary: Colors.accentGrey[30], tabs: Colors.gray[10], // TODO: Make this name or token to more genric + card: Colors.gray[20], hover: Colors.charcoal[20], supplementary: Colors.accentGrey[40], blur: {