From 49a2ccb992e25a5192501c6e88c82da98777a3d8 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Fri, 22 Nov 2024 18:13:20 +0530 Subject: [PATCH 1/2] feat(icon): headericon for prompt Signed-off-by: Sudhanshu Dasgupta --- src/custom/Prompt/promt-component.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/custom/Prompt/promt-component.tsx b/src/custom/Prompt/promt-component.tsx index 44022d73..90824d95 100644 --- a/src/custom/Prompt/promt-component.tsx +++ b/src/custom/Prompt/promt-component.tsx @@ -25,6 +25,7 @@ interface State { primaryOption: string; showInfoIcon?: string; variant?: PromptVariant; + headerIcon?: React.ReactNode; } interface ShowParams { @@ -33,6 +34,7 @@ interface ShowParams { primaryOption: string; variant: PromptVariant; showInfoIcon?: string; + headerIcon?: React.ReactNode; } export interface PromptRef { @@ -46,7 +48,8 @@ const PromptComponent = forwardRef(({ variant }, ref) => subtitle: '', primaryOption: '', showInfoIcon: '', - variant + variant, + headerIcon: undefined }); /* This ref is used to store the resolve and reject functions of the promise returned by the show method */ @@ -78,7 +81,7 @@ const PromptComponent = forwardRef(({ variant }, ref) => show })); - const { isOpen, primaryOption, title, subtitle, showInfoIcon } = state; + const { isOpen, primaryOption, title, subtitle, showInfoIcon, headerIcon } = state; const { resolve } = promiseInfoRef.current; return ( @@ -87,7 +90,7 @@ const PromptComponent = forwardRef(({ variant }, ref) => closeModal={hide} title={title} id="searchClick" - headerIcon={undefined} + headerIcon={headerIcon} reactNode={undefined} > {subtitle && ( From 367ba54e154241f10e4fbbc42fa511cd605078e2 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Tue, 26 Nov 2024 18:12:58 +0530 Subject: [PATCH 2/2] fix(buttons): position and add info action Signed-off-by: Sudhanshu Dasgupta --- src/custom/CatalogDetail/ActionButton.tsx | 112 ++++++++++++++-------- src/custom/CatalogDetail/LeftPanel.tsx | 8 +- src/custom/CatalogDetail/style.tsx | 5 +- 3 files changed, 79 insertions(+), 46 deletions(-) diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx index 5e9b6350..ee6cb48c 100644 --- a/src/custom/CatalogDetail/ActionButton.tsx +++ b/src/custom/CatalogDetail/ActionButton.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { CircularProgress } from '../../base'; -import { CopyIcon, KanvasIcon, PublishIcon } from '../../icons'; +import { CopyIcon, EditIcon, KanvasIcon, PublishIcon } from '../../icons'; import Download from '../../icons/Download/Download'; import { charcoal, useTheme } from '../../theme'; import { Pattern } from '../CustomCatalog/CustomCard'; @@ -19,6 +19,8 @@ interface ActionButtonsProps { showUnpublishAction: boolean; showOpenPlaygroundAction: boolean; onOpenPlaygroundClick: (designId: string, name: string) => void; + showInfoAction?: boolean; + handleInfoClick?: () => void; } const ActionButtons: React.FC = ({ @@ -31,12 +33,34 @@ const ActionButtons: React.FC = ({ showUnpublishAction, handleUnpublish, showOpenPlaygroundAction, - onOpenPlaygroundClick + onOpenPlaygroundClick, + showInfoAction, + handleInfoClick }) => { const cleanedType = type.replace('my-', '').replace(/s$/, ''); const theme = useTheme(); return ( + {showOpenPlaygroundAction && ( + onOpenPlaygroundClick(details.id, details.name)} + > + + Open in Playground + + )} {actionItems && (
= ({ cleanedType === RESOURCE_TYPES.FILTERS @@ -59,7 +84,7 @@ const ActionButtons: React.FC = ({ : downloadYaml(details.pattern_file, details.name) } > - + Download @@ -68,8 +93,9 @@ const ActionButtons: React.FC = ({ sx={{ borderRadius: '0.2rem', gap: '10px', - color: charcoal[100], - backgroundColor: theme.palette.background.cta?.default + color: theme.palette.text.default, + backgroundColor: 'transparent', + border: `1px solid ${theme.palette.border.normal}` }} onClick={() => handleClone(details?.name, details?.id)} disabled={isCloneDisabled} @@ -78,7 +104,7 @@ const ActionButtons: React.FC = ({ ) : ( <> - + Clone )} @@ -86,41 +112,43 @@ const ActionButtons: React.FC = ({ )}
)} - {showOpenPlaygroundAction && ( - onOpenPlaygroundClick(details.id, details.name)} - > - - Open in Playground - - )} - {showUnpublishAction && ( - - - Unpublish - - )} +
+ {showInfoAction && ( + + + Edit + + )} + {showUnpublishAction && ( + + + Unpublish + + )} +
); }; diff --git a/src/custom/CatalogDetail/LeftPanel.tsx b/src/custom/CatalogDetail/LeftPanel.tsx index 18fa7073..82d7fe99 100644 --- a/src/custom/CatalogDetail/LeftPanel.tsx +++ b/src/custom/CatalogDetail/LeftPanel.tsx @@ -23,6 +23,8 @@ interface LeftPanelProps { showUnpublishAction?: boolean; showOpenPlaygroundAction?: boolean; onOpenPlaygroundClick: (designId: string, name: string) => void; + showInfoAction?: boolean; + handleInfoClick?: () => void; } const LeftPanel: React.FC = ({ @@ -40,7 +42,9 @@ const LeftPanel: React.FC = ({ fontFamily, showUnpublishAction = false, showOpenPlaygroundAction = true, - onOpenPlaygroundClick + onOpenPlaygroundClick, + showInfoAction = false, + handleInfoClick }) => { const theme = useTheme(); @@ -83,6 +87,8 @@ const LeftPanel: React.FC = ({ isCloneDisabled={isCloneDisabled} showOpenPlaygroundAction={showOpenPlaygroundAction} onOpenPlaygroundClick={onOpenPlaygroundClick} + showInfoAction={showInfoAction} + handleInfoClick={handleInfoClick} /> {showTechnologies && ( (({ disabled = fa justifyContent: 'center', alignItems: 'center', borderRadius: '0.5rem', - backgroundColor: 'transparent', - border: `1px solid ${theme.palette.border.normal}`, + backgroundColor: theme.palette.background.error?.default, padding: '0.5rem', - color: theme.palette.text.default, + color: theme.palette.text.inverse, gap: '0.625rem', flex: '1' }));