From 972bf28ca7a352874b35afda0b7a335018413ead Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat, 14 Dec 2024 11:04:19 +0000 Subject: [PATCH 01/26] chore(deps): bump nanoid from 3.3.7 to 3.3.8 in /site Bumps [nanoid](https://github.com/ai/nanoid) from 3.3.7 to 3.3.8. - [Release notes](https://github.com/ai/nanoid/releases) - [Changelog](https://github.com/ai/nanoid/blob/main/CHANGELOG.md) - [Commits](https://github.com/ai/nanoid/compare/3.3.7...3.3.8) --- updated-dependencies: - dependency-name: nanoid dependency-type: indirect ... Signed-off-by: dependabot[bot] --- site/package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/package-lock.json b/site/package-lock.json index 9fc2d53c3..1156c65c2 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -11407,9 +11407,9 @@ } }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", "funding": [ { "type": "github", From e197b7b98a1def15837f3958f6164180f526275c Mon Sep 17 00:00:00 2001 From: root Date: Fri, 27 Dec 2024 05:42:14 +0000 Subject: [PATCH 02/26] feat: Added Panel component to sistent Signed-off-by: root --- package-lock.json | 45 +++- package.json | 2 + src/custom/Panel/Panel.tsx | 237 ++++++++++++++++++ src/custom/Panel/index.tsx | 3 + src/custom/index.tsx | 1 + .../PanelDragHandle/PanelDragHandleIcon.tsx | 34 +++ src/icons/PanelDragHandle/index.tsx | 1 + 7 files changed, 320 insertions(+), 3 deletions(-) create mode 100644 src/custom/Panel/Panel.tsx create mode 100644 src/custom/Panel/index.tsx create mode 100644 src/icons/PanelDragHandle/PanelDragHandleIcon.tsx create mode 100644 src/icons/PanelDragHandle/index.tsx diff --git a/package-lock.json b/package-lock.json index 0034a3902..ed4e5204b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,8 @@ "dependencies": { "js-yaml": "^4.1.0", "lodash": "^4.17.21", + "re-resizable": "^6.10.3", + "react-draggable": "^4.4.6", "react-share": "^5.1.0" }, "devDependencies": { @@ -4530,7 +4532,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", - "dev": true, "engines": { "node": ">=6" } @@ -11503,6 +11504,16 @@ "performance-now": "^2.1.0" } }, + "node_modules/re-resizable": { + "version": "6.10.3", + "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.10.3.tgz", + "integrity": "sha512-zvWb7X3RJMA4cuSrqoxgs3KR+D+pEXnGrD2FAD6BMYAULnZsSF4b7AOVyG6pC3VVNVOtlagGDCDmZSwWLjjBBw==", + "license": "MIT", + "peerDependencies": { + "react": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -11559,6 +11570,20 @@ "react": "^18.2.0" } }, + "node_modules/react-draggable": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz", + "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==", + "license": "MIT", + "dependencies": { + "clsx": "^1.1.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": ">= 16.3.0", + "react-dom": ">= 16.3.0" + } + }, "node_modules/react-error-boundary": { "version": "4.0.12", "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.12.tgz", @@ -17372,8 +17397,7 @@ "clsx": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", - "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", - "dev": true + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==" }, "co": { "version": "4.6.0", @@ -22160,6 +22184,12 @@ "performance-now": "^2.1.0" } }, + "re-resizable": { + "version": "6.10.3", + "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.10.3.tgz", + "integrity": "sha512-zvWb7X3RJMA4cuSrqoxgs3KR+D+pEXnGrD2FAD6BMYAULnZsSF4b7AOVyG6pC3VVNVOtlagGDCDmZSwWLjjBBw==", + "requires": {} + }, "react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -22206,6 +22236,15 @@ "scheduler": "^0.23.0" } }, + "react-draggable": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz", + "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==", + "requires": { + "clsx": "^1.1.1", + "prop-types": "^15.8.1" + } + }, "react-error-boundary": { "version": "4.0.12", "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.12.tgz", diff --git a/package.json b/package.json index 04cee394a..8436340c7 100644 --- a/package.json +++ b/package.json @@ -118,6 +118,8 @@ "dependencies": { "js-yaml": "^4.1.0", "lodash": "^4.17.21", + "re-resizable": "^6.10.3", + "react-draggable": "^4.4.6", "react-share": "^5.1.0" } } diff --git a/src/custom/Panel/Panel.tsx b/src/custom/Panel/Panel.tsx new file mode 100644 index 000000000..2de7e48e6 --- /dev/null +++ b/src/custom/Panel/Panel.tsx @@ -0,0 +1,237 @@ +import { ListItemProps, styled } from '@mui/material'; +import { Resizable } from 're-resizable'; +import React from 'react'; +import Draggable from 'react-draggable'; +import { Box, BoxProps, IconButton, ListItem, Tooltip } from '../../base'; +import { CloseIcon, CollapseAllIcon, ExpandAllIcon } from '../../icons'; +import { PanelDragHandleIcon } from '../../icons/PanelDragHandle'; +import { useTheme } from '../../theme'; +import { ErrorBoundary } from '../ErrorBoundary'; + +export const ListHeader = styled(ListItem)(({ theme }) => ({ + padding: theme.spacing(0.5, 0.5), + marginBlock: theme.spacing(1), + '& .MuiListItemText-primary': { + fontSize: '1rem', + textTransform: 'capitalize', + fontWeight: 700 + }, + cursor: 'pointer', + '&:hover': { + backgroundColor: theme.palette.action.hover + }, + '& .MuiSvgIcon-root': { + opacity: 0, + transition: 'opacity 0.2s' + }, + '&:hover .MuiSvgIcon-root': { + opacity: 1 + } +})); + +interface CustomListItemProps extends ListItemProps { + isVisible: boolean; +} + +// Use the new interface in the styled component +export const StyledListItem = styled(ListItem, { + shouldForwardProp: (props) => props !== 'isVisible' +})(({ theme, isVisible }) => ({ + padding: theme.spacing(0.05, 0.5), + fontStyle: isVisible ? 'normal' : 'italic', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + '& .MuiSvgIcon-root': { + height: 20, + width: 20 + }, + '& .MuiListItemIcon-root': { + minWidth: 0, + opacity: isVisible ? 0.8 : 0.3 + }, + '& .MuiTypography-root': { + fontSize: '0.9rem', + opacity: isVisible ? 1 : 0.5 + } +})); + +type PanelProps = { + isOpen: boolean; + children: React.ReactNode; + areAllExpanded?: boolean; + toggleExpandAll?: () => void; + handleClose: () => void; + sx?: BoxProps['sx']; + id?: string; + intitialPosition?: { + left?: string | number; + right?: string | number; + top?: string | number; + bottom?: string | number; + }; +}; + +export const DrawerHeader = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + padding: theme.spacing(4, 2), + alignContent: 'stretch', + justifyContent: 'space-between', + cursor: 'move', + background: + theme.palette.mode === 'light' + ? 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)' + : 'linear-gradient(90deg, #28353A 0%, #3D4F57 100%)', + height: '3rem', + flexShrink: 0 +})); + +const PanelBody = styled(Box)(({ theme }) => ({ + padding: theme.spacing(2), + backgroundColor: theme.palette.background.surfaces, + overflow: 'auto', + flex: 1, + minHeight: 0 +})); + +// New container for Resizable content +const ResizableContent = styled('div')({ + height: '100%', + display: 'flex', + flexDirection: 'column', + minHeight: '3rem' +}); + +// // watches for the size of the element +// const useDimensions = (ref: React.RefObject) => { +// const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 }); +// React.useEffect(() => { +// const { current } = ref; +// if (current) { +// const resizeObserver = new ResizeObserver((entries) => { +// entries.forEach((entry) => { +// setDimensions({ +// width: entry.contentRect.width, +// height: entry.contentRect.height +// }); +// }); +// }); +// resizeObserver.observe(current); +// return () => { +// resizeObserver.unobserve(current); +// }; +// } +// }, [ref]); +// return dimensions; +// }; + +const Panel_: React.FC = ({ + isOpen, + id = 'panel', + children, + areAllExpanded, + toggleExpandAll, + handleClose, + intitialPosition, + sx +}) => { + const theme = useTheme(); + // const mode = theme?.palette?.type; + if (!isOpen) return null; + return ( + // + + + { + window.dispatchEvent(new Event('panel-resize')); + }} + enable={{ + top: true, + right: true, + bottom: true, + left: true, + topRight: true, + bottomRight: true, + bottomLeft: true, + topLeft: true + }} + > + + +
+ + + {toggleExpandAll && ( + + + {areAllExpanded ? : } + + + )} + + +
+
+ + + +
+ +
+ + {children} + + + + + + // + ); +}; + +export const Panel: React.FC = ({ ...props }) => { + return ( + // + + // + ); +}; diff --git a/src/custom/Panel/index.tsx b/src/custom/Panel/index.tsx new file mode 100644 index 000000000..0abd9a3ca --- /dev/null +++ b/src/custom/Panel/index.tsx @@ -0,0 +1,3 @@ +import { Panel } from './Panel'; + +export { Panel }; diff --git a/src/custom/index.tsx b/src/custom/index.tsx index ac4022ff8..0da7c1984 100644 --- a/src/custom/index.tsx +++ b/src/custom/index.tsx @@ -56,6 +56,7 @@ export { InputSearchField } from './InputSearchField'; export { LearningContent } from './LearningContent'; export { NavigationNavbar } from './NavigationNavbar'; export { Note } from './Note'; +export { Panel } from './Panel'; export { PerformersSection, PerformersSectionButton } from './PerformersSection'; export { SetupPreReq } from './SetupPrerequisite'; export { StyledChapter } from './StyledChapter'; diff --git a/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx b/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx new file mode 100644 index 000000000..b6fe307e2 --- /dev/null +++ b/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx @@ -0,0 +1,34 @@ +import { FC } from 'react'; +import { IconProps } from '../types'; + +export const PanelDragHandleIcon: FC = ({ + height = 24, + width = 24, + fill = 'currentColor', + ...props +}) => { + return ( + + + + + + + + + + + ); +}; + +export default PanelDragHandleIcon; diff --git a/src/icons/PanelDragHandle/index.tsx b/src/icons/PanelDragHandle/index.tsx new file mode 100644 index 000000000..3abe60e39 --- /dev/null +++ b/src/icons/PanelDragHandle/index.tsx @@ -0,0 +1 @@ +export { default as PanelDragHandleIcon } from './PanelDragHandleIcon'; From 7061c6e2aa33c236373c21a8f5eef522c9336417 Mon Sep 17 00:00:00 2001 From: Vidit-Kushwaha Date: Fri, 27 Dec 2024 10:07:37 +0000 Subject: [PATCH 03/26] fix: seperated logic of styling in Panel Signed-off-by: Vidit-Kushwaha --- src/custom/Panel/Panel.tsx | 119 +----------------- src/custom/Panel/style.tsx | 80 ++++++++++++ .../PanelDragHandle/PanelDragHandleIcon.tsx | 2 +- 3 files changed, 85 insertions(+), 116 deletions(-) create mode 100644 src/custom/Panel/style.tsx diff --git a/src/custom/Panel/Panel.tsx b/src/custom/Panel/Panel.tsx index 2de7e48e6..ff5c20d4c 100644 --- a/src/custom/Panel/Panel.tsx +++ b/src/custom/Panel/Panel.tsx @@ -1,60 +1,12 @@ -import { ListItemProps, styled } from '@mui/material'; import { Resizable } from 're-resizable'; import React from 'react'; import Draggable from 'react-draggable'; -import { Box, BoxProps, IconButton, ListItem, Tooltip } from '../../base'; +import { Box, BoxProps, IconButton, Tooltip } from '../../base'; import { CloseIcon, CollapseAllIcon, ExpandAllIcon } from '../../icons'; import { PanelDragHandleIcon } from '../../icons/PanelDragHandle'; import { useTheme } from '../../theme'; import { ErrorBoundary } from '../ErrorBoundary'; - -export const ListHeader = styled(ListItem)(({ theme }) => ({ - padding: theme.spacing(0.5, 0.5), - marginBlock: theme.spacing(1), - '& .MuiListItemText-primary': { - fontSize: '1rem', - textTransform: 'capitalize', - fontWeight: 700 - }, - cursor: 'pointer', - '&:hover': { - backgroundColor: theme.palette.action.hover - }, - '& .MuiSvgIcon-root': { - opacity: 0, - transition: 'opacity 0.2s' - }, - '&:hover .MuiSvgIcon-root': { - opacity: 1 - } -})); - -interface CustomListItemProps extends ListItemProps { - isVisible: boolean; -} - -// Use the new interface in the styled component -export const StyledListItem = styled(ListItem, { - shouldForwardProp: (props) => props !== 'isVisible' -})(({ theme, isVisible }) => ({ - padding: theme.spacing(0.05, 0.5), - fontStyle: isVisible ? 'normal' : 'italic', - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - '& .MuiSvgIcon-root': { - height: 20, - width: 20 - }, - '& .MuiListItemIcon-root': { - minWidth: 0, - opacity: isVisible ? 0.8 : 0.3 - }, - '& .MuiTypography-root': { - fontSize: '0.9rem', - opacity: isVisible ? 1 : 0.5 - } -})); +import { DrawerHeader, PanelBody, ResizableContent } from './style'; type PanelProps = { isOpen: boolean; @@ -72,60 +24,6 @@ type PanelProps = { }; }; -export const DrawerHeader = styled('div')(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - padding: theme.spacing(4, 2), - alignContent: 'stretch', - justifyContent: 'space-between', - cursor: 'move', - background: - theme.palette.mode === 'light' - ? 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)' - : 'linear-gradient(90deg, #28353A 0%, #3D4F57 100%)', - height: '3rem', - flexShrink: 0 -})); - -const PanelBody = styled(Box)(({ theme }) => ({ - padding: theme.spacing(2), - backgroundColor: theme.palette.background.surfaces, - overflow: 'auto', - flex: 1, - minHeight: 0 -})); - -// New container for Resizable content -const ResizableContent = styled('div')({ - height: '100%', - display: 'flex', - flexDirection: 'column', - minHeight: '3rem' -}); - -// // watches for the size of the element -// const useDimensions = (ref: React.RefObject) => { -// const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 }); -// React.useEffect(() => { -// const { current } = ref; -// if (current) { -// const resizeObserver = new ResizeObserver((entries) => { -// entries.forEach((entry) => { -// setDimensions({ -// width: entry.contentRect.width, -// height: entry.contentRect.height -// }); -// }); -// }); -// resizeObserver.observe(current); -// return () => { -// resizeObserver.unobserve(current); -// }; -// } -// }, [ref]); -// return dimensions; -// }; - const Panel_: React.FC = ({ isOpen, id = 'panel', @@ -137,10 +35,8 @@ const Panel_: React.FC = ({ sx }) => { const theme = useTheme(); - // const mode = theme?.palette?.type; if (!isOpen) return null; return ( - // = ({ )}
= ({ }} >
- + - {children} - // ); }; export const Panel: React.FC = ({ ...props }) => { - return ( - // - - // - ); + return ; }; diff --git a/src/custom/Panel/style.tsx b/src/custom/Panel/style.tsx new file mode 100644 index 000000000..c94449de4 --- /dev/null +++ b/src/custom/Panel/style.tsx @@ -0,0 +1,80 @@ +import { ListItemProps } from '@mui/material'; +import { Box, ListItem } from '../../base'; +import { styled } from '../../theme'; + +export const ListHeader = styled(ListItem)(({ theme }) => ({ + padding: theme.spacing(0.5, 0.5), + marginBlock: theme.spacing(1), + '& .MuiListItemText-primary': { + fontSize: '1rem', + textTransform: 'capitalize', + fontWeight: 700 + }, + cursor: 'pointer', + '&:hover': { + backgroundColor: theme.palette.action.hover + }, + '& .MuiSvgIcon-root': { + opacity: 0, + transition: 'opacity 0.2s' + }, + '&:hover .MuiSvgIcon-root': { + opacity: 1 + } +})); + +interface CustomListItemProps extends ListItemProps { + isVisible: boolean; +} + +export const StyledListItem = styled(ListItem, { + shouldForwardProp: (props) => props !== 'isVisible' +})(({ theme, isVisible }) => ({ + padding: theme.spacing(0.05, 0.5), + fontStyle: isVisible ? 'normal' : 'italic', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + '& .MuiSvgIcon-root': { + height: 20, + width: 20 + }, + '& .MuiListItemIcon-root': { + minWidth: 0, + opacity: isVisible ? 0.8 : 0.3 + }, + '& .MuiTypography-root': { + fontSize: '0.9rem', + opacity: isVisible ? 1 : 0.5 + } +})); + +export const DrawerHeader = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + padding: theme.spacing(4, 2), + alignContent: 'stretch', + justifyContent: 'space-between', + cursor: 'move', + background: + theme.palette.mode === 'light' + ? 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)' + : 'linear-gradient(90deg, #28353A 0%, #3D4F57 100%)', + height: '3rem', + flexShrink: 0 +})); + +export const PanelBody = styled(Box)(({ theme }) => ({ + padding: theme.spacing(2), + backgroundColor: theme.palette.background.surfaces, + overflow: 'auto', + flex: 1, + minHeight: 0 +})); + +export const ResizableContent = styled('div')({ + height: '100%', + display: 'flex', + flexDirection: 'column', + minHeight: '3rem' +}); diff --git a/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx b/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx index b6fe307e2..31f4a9e22 100644 --- a/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx +++ b/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx @@ -4,7 +4,7 @@ import { IconProps } from '../types'; export const PanelDragHandleIcon: FC = ({ height = 24, width = 24, - fill = 'currentColor', + fill = '#E8EFF3', ...props }) => { return ( From 971c97dc4d4d8a02e0942dc951aa2019ad77f460 Mon Sep 17 00:00:00 2001 From: Vidit-Kushwaha Date: Mon, 30 Dec 2024 12:09:34 +0000 Subject: [PATCH 04/26] chore: Replace inline CSS with styled components in Panel component Signed-off-by: Vidit-Kushwaha --- src/custom/Panel/Panel.tsx | 61 ++++++++++++-------------------------- src/custom/Panel/style.tsx | 37 +++++++++++++++++++++++ 2 files changed, 56 insertions(+), 42 deletions(-) diff --git a/src/custom/Panel/Panel.tsx b/src/custom/Panel/Panel.tsx index ff5c20d4c..cc0409f1a 100644 --- a/src/custom/Panel/Panel.tsx +++ b/src/custom/Panel/Panel.tsx @@ -6,9 +6,17 @@ import { CloseIcon, CollapseAllIcon, ExpandAllIcon } from '../../icons'; import { PanelDragHandleIcon } from '../../icons/PanelDragHandle'; import { useTheme } from '../../theme'; import { ErrorBoundary } from '../ErrorBoundary'; -import { DrawerHeader, PanelBody, ResizableContent } from './style'; +import { + DragHandle, + DrawerHeader, + HeaderActionsContainer, + HeaderContainer, + PanelBody, + PanelContainer, + ResizableContent +} from './style'; -type PanelProps = { +export type PanelProps = { isOpen: boolean; children: React.ReactNode; areAllExpanded?: boolean; @@ -38,25 +46,7 @@ const Panel_: React.FC = ({ if (!isOpen) return null; return ( - + { @@ -86,37 +76,24 @@ const Panel_: React.FC = ({ )} - -
-
+ + + +
+ > -
+ {children} - + ); }; diff --git a/src/custom/Panel/style.tsx b/src/custom/Panel/style.tsx index c94449de4..8f9daf8a2 100644 --- a/src/custom/Panel/style.tsx +++ b/src/custom/Panel/style.tsx @@ -1,6 +1,7 @@ import { ListItemProps } from '@mui/material'; import { Box, ListItem } from '../../base'; import { styled } from '../../theme'; +import { PanelProps } from './Panel'; export const ListHeader = styled(ListItem)(({ theme }) => ({ padding: theme.spacing(0.5, 0.5), @@ -78,3 +79,39 @@ export const ResizableContent = styled('div')({ flexDirection: 'column', minHeight: '3rem' }); + +export const PanelContainer = styled(Box)<{ intitialPosition: PanelProps['intitialPosition'] }>( + ({ theme, intitialPosition }) => ({ + borderRadius: '8px', + overflow: 'hidden', + flexShrink: 0, + zIndex: 99999, + position: 'absolute', + backgroundColor: theme.palette.background.blur?.light, + boxShadow: '0 4px 16px #05003812', + maxHeight: '80%', + display: 'flex', + boxSizing: 'border-box', + ...intitialPosition + }) +); + +export const DragHandle = styled('div')({ + position: 'absolute', + top: '-3rem', + left: '50%' +}); + +export const HeaderActionsContainer = styled('div')({ + display: 'flex', + gap: '1rem', + justifyContent: 'flex-end', + alignItems: 'center' +}); + +export const HeaderContainer = styled('div')({ + display: 'flex', + justifyContent: 'end', + alignItems: 'center', + flex: '1' +}); From ca3e8ba51285f938a651fcf8351cdb7ff1d5caa8 Mon Sep 17 00:00:00 2001 From: aabidsofi19 Date: Mon, 13 Jan 2025 02:41:22 +0530 Subject: [PATCH 05/26] 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 06/26] 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 07/26] 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 08/26] 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 09/26] 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 10/26] 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 11/26] 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 12/26] 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 13/26] 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 14/26] 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 15/26] 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 16/26] 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 17/26] 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 18/26] 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 19/26] 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 20/26] 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 21/26] 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 22/26] 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 23/26] 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 24/26] 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 25/26] 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: { From 516c81b79e8e4d2aa15f935be589c87cc8008c7e Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Thu, 30 Jan 2025 09:32:52 +0530 Subject: [PATCH 26/26] fix: workspace teams table undefined issue Signed-off-by: Amit Amrutiya --- src/custom/Workspaces/DesignTable.tsx | 4 ++-- src/custom/Workspaces/WorkspaceTeamsTable.tsx | 4 ++-- src/custom/Workspaces/hooks/useDesignAssignment.tsx | 3 +++ 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/custom/Workspaces/DesignTable.tsx b/src/custom/Workspaces/DesignTable.tsx index 46c3d9cf1..0ad01f4d9 100644 --- a/src/custom/Workspaces/DesignTable.tsx +++ b/src/custom/Workspaces/DesignTable.tsx @@ -257,8 +257,8 @@ const DesignTable: React.FC = ({ emptyStateIcon={} handleAssignablePage={designAssignment.handleAssignablePage} handleAssignedPage={designAssignment.handleAssignedPage} - originalLeftCount={designAssignment.data?.length} - originalRightCount={designAssignment.assignedItems?.length} + originalLeftCount={designAssignment.data?.length || 0} + originalRightCount={designAssignment.assignedItems?.length || 0} onAssign={designAssignment.handleAssign} disableTransfer={designAssignment.disableTransferButton} helpText={`Assign Designs to ${workspaceName}`} diff --git a/src/custom/Workspaces/WorkspaceTeamsTable.tsx b/src/custom/Workspaces/WorkspaceTeamsTable.tsx index 5dca13041..61475377b 100644 --- a/src/custom/Workspaces/WorkspaceTeamsTable.tsx +++ b/src/custom/Workspaces/WorkspaceTeamsTable.tsx @@ -181,8 +181,8 @@ const TeamsTable: React.FC = ({ } handleAssignablePage={teamAssignment.handleAssignablePage} handleAssignedPage={teamAssignment.handleAssignedPage} - originalLeftCount={teamAssignment.data?.length} - originalRightCount={teamsOfWorkspace?.total_count} + originalLeftCount={teamAssignment.data?.length || 0} + originalRightCount={teamsOfWorkspace?.total_count || 0} onAssign={teamAssignment.handleAssign} disableTransfer={teamAssignment.disableTransferButton} helpText={`Assign Teams to ${workspaceName}`} diff --git a/src/custom/Workspaces/hooks/useDesignAssignment.tsx b/src/custom/Workspaces/hooks/useDesignAssignment.tsx index 4f6f5fb33..31f268ff9 100644 --- a/src/custom/Workspaces/hooks/useDesignAssignment.tsx +++ b/src/custom/Workspaces/hooks/useDesignAssignment.tsx @@ -95,6 +95,9 @@ const useDesignAssignment = ({ }; const getAddedAndRemovedDesigns = (allAssignedDesigns: Pattern[]): AddedAndRemovedDesigns => { + if (Array.isArray(workspaceDesignsData) && workspaceDesignsData.length === 0) { + return { addedDesignsIds: [], removedDesignsIds: [] }; + } const originalDesignsIds = workspaceDesignsData.map((design) => design.id); const updatedDesignsIds = allAssignedDesigns.map((design) => design.id);