✨ feat(buttons): add ellipsis to button group on threshold

dashpresshq · Jan 14, 2024 · dc09dca · dc09dca
1 parent 7c18bc2
commit dc09dca
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 65 deletions.
diff --git a/dump.rdb b/dump.rdb
diff --git a/src/backend/actions/__tests__/run-action.spec.ts b/src/backend/actions/__tests__/run-action.spec.ts
@@ -163,7 +163,6 @@ describe("Run Action", () => {
 
       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
@@ -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
@@ -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 (
     <Stack>
-      {actionButtons
-        .sort((a, b) => a.order - b.order)
-        .map((actionButton) =>
-          actionButton._type === "normal" ? (
-            <SoftButton
-              key={actionButton.icon}
-              action={actionButton.action}
-              label={actionButton.label}
-              justIcon={justIcons}
-              isMakingActionRequest={actionButton.isMakingActionRequest}
-              icon={actionButton.icon}
-            />
-          ) : (
-            <DeleteButton
-              key={actionButton._type}
-              onDelete={actionButton.action}
-              shouldConfirmAlert={actionButton.shouldConfirmAlert}
-              isMakingDeleteRequest={actionButton.isMakingDeleteRequest}
-            />
-          )
-        )}
+      {buttonsToShow.map((actionButton) =>
+        actionButton._type === "normal" ? (
+          <SoftButton
+            key={actionButton.icon}
+            action={actionButton.action}
+            label={actionButton.label}
+            justIcon={justIcons}
+            isMakingActionRequest={actionButton.isMakingActionRequest}
+            icon={actionButton.icon}
+          />
+        ) : (
+          <DeleteButton
+            key={actionButton._type}
+            onDelete={actionButton.action}
+            shouldConfirmAlert={actionButton.shouldConfirmAlert}
+            isMakingDeleteRequest={actionButton.isMakingDeleteRequest}
+          />
+        )
+      )}
+      {ellipsisButtons.length > 0 && (
+        <DropDownMenu
+          ellipsis
+          ariaLabel="More Actions"
+          menuItems={ellipsisButtons.map((button) => ({
+            id: button._type === "delete" ? "Delete" : button.label,
+            label: button._type === "delete" ? "Delete" : button.label,
+            onClick: typeof button.action === "function" && button.action,
+          }))}
+        />
+      )}
     </Stack>
   );
 }
diff --git 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<IStyledBaseButton>`
     ${(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
@@ -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
@@ -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 (
     <Overlay
       role="alertdialog"
@@ -77,7 +71,7 @@ export function Presentation({
         </Typo.MD>
         <Spacer size="xl" />
         <Typo.XS>
-          <span id="confirm_delete_desc"> {message} </span>{" "}
+          <span id="confirm_delete_desc">Are you sure you want to do this</span>
         </Typo.XS>
         <Spacer size="xxl" />
         <Stack justify="center" spacing={8}>

diff --git 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({
     </Stack>
   );
 
-  if (menuItems.length === 1) {
+  if (menuItems.length === 1 && !ellipsis) {
     return (
       <SoftButtonStyled
         size="sm"

diff --git a/src/frontend/views/integrations/actions/index.tsx b/src/frontend/views/integrations/actions/index.tsx
@@ -1,8 +1,5 @@
 import { USER_PERMISSIONS } from "shared/constants/user";
 import { ViewStateMachine } from "frontend/components/ViewStateMachine";
-import { useState } from "react";
-import { DOCUMENTATION_LABEL } from "frontend/docs";
-import { FormIntegrationsDocumentation } from "frontend/docs/form-integrations";
 import { useRouteParam } from "frontend/lib/routing/useRouteParam";
 import { useSetPageDetails } from "frontend/lib/routing/usePageDetails";
 import {
@@ -16,11 +13,8 @@ import { ACTIONS_VIEW_KEY } from "../constants";
 import { ActionSettingsView } from "./View";
 import { ACTION_INTEGRATIONS_CRUD_CONFIG } from "./constants";
 
-const DOCS_TITLE = ACTION_INTEGRATIONS_CRUD_CONFIG.TEXT_LANG.TITLE;
-
 export function ActionsIntegrations() {
   const currentKey = useRouteParam("key");
-  const [isDocOpen, setIsDocOpen] = useState(false);
 
   const integrationsList = useIntegrationsList();
   const activeActionsList = useActiveIntegrations();
@@ -45,14 +39,6 @@ export function ActionsIntegrations() {
         isLoading={!integrationDetail}
         title={integrationDetail?.title}
         description={integrationDetail ? integrationDetail.description : ""}
-        actionButtons={[
-          {
-            _type: "normal",
-            action: () => setIsDocOpen(true),
-            icon: "help",
-            label: DOCUMENTATION_LABEL.CONCEPT(DOCS_TITLE),
-          },
-        ]}
       >
         <ViewStateMachine
           loading={integrationsList.isLoading || activeActionsList.isLoading}
@@ -74,11 +60,6 @@ export function ActionsIntegrations() {
           />
         </ViewStateMachine>
       </SectionBox>
-      <FormIntegrationsDocumentation
-        title={DOCS_TITLE}
-        close={setIsDocOpen}
-        isOpen={isDocOpen}
-      />
     </BaseActionsLayout>
   );
 }