From dc09dca91a982d2445732281a8710090e733fdc3 Mon Sep 17 00:00:00 2001 From: Ayobami Akingbade Date: Sun, 14 Jan 2024 11:24:37 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(buttons):=20add=20ellipsis=20t?= =?UTF-8?q?o=20button=20group=20on=20threshold?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dump.rdb | Bin 279 -> 0 bytes .../actions/__tests__/run-action.spec.ts | 1 - .../dashboard-widgets.service.ts | 2 - .../components/Button/ActionButtons/index.tsx | 60 ++++++++++++------ .../design-system/components/Button/Button.ts | 22 +++---- .../components/Button/DeleteButton.tsx | 1 - .../components/ConfirmAlert/index.tsx | 10 +-- .../components/DropdownMenu/index.tsx | 2 +- .../views/integrations/actions/index.tsx | 19 ------ 9 files changed, 52 insertions(+), 65 deletions(-) delete mode 100644 dump.rdb diff --git a/dump.rdb b/dump.rdb deleted file mode 100644 index 54b36731d0ce221cacad9c631903973be37f8d00..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 279 zcmXBNJxjw-7zN-r)o67Pshv87JDT2-4?)P3L4~Z=RW3KVZ;}h9iOFppO1J)u4jujY z2`;7n3#YD5?h&k&EDwhRhjV*<6$~xQw(Fx3g{cagw*Y_xm`gz& z{dG!sg2Z$BL<-^=`-jvaeKO*i(LEtU+^vNXD9p&r^zD|bzbtKVH(JBqT`J3!1?Rp6 z7aIt7X#YvG^qYKKs&pA@<`#O*JB@ghBISY?DlZxH;ygc_lAXjOBYdJ0{xC)|+rEE3 JzjeNY { await indexHandler(req, res); - // expect(res._getStatusCode()).toBe(201); expect(res._getJSONData()).toMatchInlineSnapshot(` { "id": 44, diff --git a/src/backend/dashboard-widgets/dashboard-widgets.service.ts b/src/backend/dashboard-widgets/dashboard-widgets.service.ts index 101dfbc1f..1f004dd77 100644 --- a/src/backend/dashboard-widgets/dashboard-widgets.service.ts +++ b/src/backend/dashboard-widgets/dashboard-widgets.service.ts @@ -74,8 +74,6 @@ export class DashboardWidgetsApiService implements IApplicationService { return "{}"; } - await RDBMSDataApiService.getInstance(); - const script = script$1.replaceAll( `$.${WIDGET_SCRIPT_RELATIVE_TIME_MARKER}`, relativeDateNotationToActualDate(relativeDate).toISOString() diff --git a/src/frontend/design-system/components/Button/ActionButtons/index.tsx b/src/frontend/design-system/components/Button/ActionButtons/index.tsx index 87f8f9a45..a40fedb6e 100644 --- a/src/frontend/design-system/components/Button/ActionButtons/index.tsx +++ b/src/frontend/design-system/components/Button/ActionButtons/index.tsx @@ -2,6 +2,9 @@ import { Stack } from "frontend/design-system/primitives/Stack"; import { SoftButton } from "../SoftButton"; import { DeleteButton } from "../DeleteButton"; import { IActionButton } from "./types"; +import { DropDownMenu } from "../../DropdownMenu"; + +const ELLIPSIS_THRESHOLD = 3; export function ActionButtons({ actionButtons, @@ -13,29 +16,44 @@ export function ActionButtons({ if (actionButtons.length === 0) { return null; } + + const sortedActions = actionButtons.sort((a, b) => a.order - b.order); + + const buttonsToShow = sortedActions.slice(0, ELLIPSIS_THRESHOLD); + const ellipsisButtons = sortedActions.slice(ELLIPSIS_THRESHOLD); + return ( - {actionButtons - .sort((a, b) => a.order - b.order) - .map((actionButton) => - actionButton._type === "normal" ? ( - - ) : ( - - ) - )} + {buttonsToShow.map((actionButton) => + actionButton._type === "normal" ? ( + + ) : ( + + ) + )} + {ellipsisButtons.length > 0 && ( + ({ + id: button._type === "delete" ? "Delete" : button.label, + label: button._type === "delete" ? "Delete" : button.label, + onClick: typeof button.action === "function" && button.action, + }))} + /> + )} ); } diff --git a/src/frontend/design-system/components/Button/Button.ts b/src/frontend/design-system/components/Button/Button.ts index 427063ed5..6adc11cc3 100644 --- a/src/frontend/design-system/components/Button/Button.ts +++ b/src/frontend/design-system/components/Button/Button.ts @@ -54,23 +54,21 @@ export const StyledBaseButton = styled.button` ${(props) => props.size === "xs" && css` - padding: .25rem .5rem; - font-size: .71rem; - line-height: 1.2; - border-radius: 4px; - } + padding: 0.25rem 0.5rem; + font-size: 0.71rem; + line-height: 1.2; + border-radius: 4px; `} ${(props) => props.justIcon && css` - padding: 8px; - font-size: 10px; - line-height: initial; - border-radius: 50%; - width: 29px; - } - `} + padding: 8px; + font-size: 10px; + line-height: initial; + border-radius: 50%; + width: 29px; + `} &:disabled { diff --git a/src/frontend/design-system/components/Button/DeleteButton.tsx b/src/frontend/design-system/components/Button/DeleteButton.tsx index 750676be6..1d7a01400 100644 --- a/src/frontend/design-system/components/Button/DeleteButton.tsx +++ b/src/frontend/design-system/components/Button/DeleteButton.tsx @@ -31,7 +31,6 @@ export function DeleteButton({ if (shouldConfirmAlert) { return ConfirmAlert({ title: "Confirm Delete", - message: "Are you sure you want to do this.", action: onDelete, }); } diff --git a/src/frontend/design-system/components/ConfirmAlert/index.tsx b/src/frontend/design-system/components/ConfirmAlert/index.tsx index c6082d514..7ecade731 100644 --- a/src/frontend/design-system/components/ConfirmAlert/index.tsx +++ b/src/frontend/design-system/components/ConfirmAlert/index.tsx @@ -13,7 +13,6 @@ import { SHADOW_CSS } from "../Card"; interface IProps { action: () => void; title: string; - message: string; } const Body = styled.div` @@ -57,12 +56,7 @@ export interface IPresentationProps extends IProps { onClose: () => void; } -export function Presentation({ - action, - message, - onClose, - title, -}: IPresentationProps) { +export function Presentation({ action, title, onClose }: IPresentationProps) { return ( - {message} {" "} + Are you sure you want to do this diff --git a/src/frontend/design-system/components/DropdownMenu/index.tsx b/src/frontend/design-system/components/DropdownMenu/index.tsx index 8b7d3de2d..f38b95a16 100644 --- a/src/frontend/design-system/components/DropdownMenu/index.tsx +++ b/src/frontend/design-system/components/DropdownMenu/index.tsx @@ -179,7 +179,7 @@ export function DropDownMenu({ ); - if (menuItems.length === 1) { + if (menuItems.length === 1 && !ellipsis) { return ( setIsDocOpen(true), - icon: "help", - label: DOCUMENTATION_LABEL.CONCEPT(DOCS_TITLE), - }, - ]} > - ); }