frontend: add default actions to ResourceListView

Signed-off-by: farodin91 <github@jan-jansen.net>
headlamp-k8s · Jul 1, 2024 · 1808383 · 1808383
1 parent df4efdd
commit 1808383
Show file tree

Hide file tree

Showing 72 changed files with 3,966 additions and 4,631 deletions.
diff --git a/frontend/src/components/cluster/__snapshots__/Overview.Events.stories.storyshot b/frontend/src/components/cluster/__snapshots__/Overview.Events.stories.storyshot
@@ -733,8 +733,8 @@
                   class="MuiTableContainer-root css-nhjqqh-MuiTableContainer-root"
                 >
                   <table
-                    class="MuiTable-root css-466wbf-MuiTable-root"
-                    style="--header-0-size: 180; --col-0-size: 180; --header-1-size: 180; --col-1-size: 180; --header-namespace-size: 180; --col-namespace-size: 180; --header-3-size: 180; --col-3-size: 180; --header-4-size: 180; --col-4-size: 180; --header-last_seen-size: 180; --col-last_seen-size: 180;"
+                    class="MuiTable-root css-1uwc46g-MuiTable-root"
+                    style="--header-0-size: 180; --col-0-size: 180; --header-1-size: 180; --col-1-size: 180; --header-namespace-size: 180; --col-namespace-size: 180; --header-3-size: 180; --col-3-size: 180; --header-4-size: 180; --col-4-size: 180; --header-last_seen-size: 180; --col-last_seen-size: 180; --header-mrt_row_actions-size: 70; --col-mrt_row_actions-size: 70;"
                   >
                     <thead
                       class="MuiTableHead-root css-114s3s2-MuiTableHead-root"
@@ -1203,6 +1203,29 @@
                             </div>
                           </div>
                         </th>
+                        <th
+                          class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeMedium css-tb4te8-MuiTableCell-root"
+                          colspan="1"
+                          data-index="6"
+                          scope="col"
+                        >
+                          <div
+                            class="Mui-TableHeadCell-Content MuiBox-root css-1w86f15"
+                          >
+                            <div
+                              class="Mui-TableHeadCell-Content-Labels MuiBox-root css-4ng264"
+                            >
+                              <div
+                                class="Mui-TableHeadCell-Content-Wrapper MuiBox-root css-bbxzxe"
+                              >
+                                Actions
+                              </div>
+                            </div>
+                            <div
+                              class="Mui-TableHeadCell-Content-Actions MuiBox-root css-epvm6"
+                            />
+                          </div>
+                        </th>
                       </tr>
                     </thead>
                     <tbody
@@ -1280,6 +1303,33 @@
                             3mo
                           </p>
                         </td>
+                        <td
+                          class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-e3iv5e-MuiTableCell-root"
+                          data-index="6"
+                        >
+                          <button
+                            aria-label="Row Actions"
+                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1cxdeyj-MuiButtonBase-root-MuiIconButton-root"
+                            data-mui-internal-clone-element="true"
+                            tabindex="0"
+                            type="button"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                              data-testid="MoreHorizIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
+                              />
+                            </svg>
+                            <span
+                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                            />
+                          </button>
+                        </td>
                       </tr>
                       <tr
                         class="MuiTableRow-root css-n8542r-MuiTableRow-root"
@@ -1353,6 +1403,33 @@
                             3mo
                           </p>
                         </td>
+                        <td
+                          class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-e3iv5e-MuiTableCell-root"
+                          data-index="6"
+                        >
+                          <button
+                            aria-label="Row Actions"
+                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1cxdeyj-MuiButtonBase-root-MuiIconButton-root"
+                            data-mui-internal-clone-element="true"
+                            tabindex="0"
+                            type="button"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                              data-testid="MoreHorizIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
+                              />
+                            </svg>
+                            <span
+                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                            />
+                          </button>
+                        </td>
                       </tr>
                       <tr
                         class="MuiTableRow-root css-n8542r-MuiTableRow-root"
@@ -1426,6 +1503,33 @@
                             3mo
                           </p>
                         </td>
+                        <td
+                          class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-e3iv5e-MuiTableCell-root"
+                          data-index="6"
+                        >
+                          <button
+                            aria-label="Row Actions"
+                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1cxdeyj-MuiButtonBase-root-MuiIconButton-root"
+                            data-mui-internal-clone-element="true"
+                            tabindex="0"
+                            type="button"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                              data-testid="MoreHorizIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
+                              />
+                            </svg>
+                            <span
+                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                            />
+                          </button>
+                        </td>
                       </tr>
                     </tbody>
                     <tfoot

diff --git a/frontend/src/components/common/ActionButton/ActionButton.tsx b/frontend/src/components/common/ActionButton/ActionButton.tsx
@@ -1,15 +1,18 @@
 import { Icon, IconifyIcon, IconProps } from '@iconify/react';
+import { ListItemIcon, ListItemText, MenuItem } from '@mui/material';
 import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
 
+export type ButtonStyle = 'action' | 'menu';
+
 export interface ActionButtonProps {
   /** A short description of the action. */
   description: string;
   /** Either a string icon, or imported icon. */
   icon: string | IconifyIcon;
   /** The action when it's activated. */
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  onClick: React.MouseEventHandler<HTMLElement>;
   /** A longer description of the action. Used in the tooltip. */
   longDescription?: string;
   /** The icon color. */
@@ -22,6 +25,7 @@ export interface ActionButtonProps {
    * with content above or below, without ruining the border size and shape).
    */
   edge?: false | 'end' | 'start' | undefined;
+  buttonStyle?: ButtonStyle;
   iconButtonProps?: IconButtonProps;
   iconProps?: IconProps;
 }
@@ -41,7 +45,18 @@ export default function ActionButton({
   edge,
   iconButtonProps,
   iconProps,
+  buttonStyle = 'action',
 }: ActionButtonProps) {
+  if (buttonStyle === 'menu') {
+    return (
+      <MenuItem onClick={onClick}>
+        <ListItemIcon>
+          <Icon icon={icon} color={color} width={width} {...iconProps} />
+        </ListItemIcon>
+        <ListItemText>{longDescription || description}</ListItemText>
+      </MenuItem>
+    );
+  }
   return (
     <Tooltip title={longDescription || description}>
       <IconButton

diff --git a/frontend/src/components/common/Resource/DeleteButton.tsx b/frontend/src/components/common/Resource/DeleteButton.tsx
@@ -9,18 +9,20 @@ import {
   HeadlampEventType,
   useEventCallback,
 } from '../../../redux/headlampEventSlice';
-import ActionButton from '../ActionButton';
+import ActionButton, { ButtonStyle } from '../ActionButton';
 import { ConfirmDialog } from '../Dialog';
 import AuthVisible from './AuthVisible';
 
 interface DeleteButtonProps {
   item?: KubeObject;
   options?: CallbackActionOptions;
+  buttonStyle?: ButtonStyle;
+  afterConfirm?: () => void;
 }
 
 export default function DeleteButton(props: DeleteButtonProps) {
   const dispatch = useDispatch();
-  const { item, options } = props;
+  const { item, options, buttonStyle, afterConfirm } = props;
   const [openAlert, setOpenAlert] = React.useState(false);
   const location = useLocation();
   const { t } = useTranslation(['translation']);
@@ -68,22 +70,29 @@ export default function DeleteButton(props: DeleteButtonProps) {
     >
       <ActionButton
         description={t('translation|Delete')}
+        buttonStyle={buttonStyle}
         onClick={() => {
           setOpenAlert(true);
         }}
         icon="mdi:delete"
       />
+
       <ConfirmDialog
         open={openAlert}
         title={t('translation|Delete item')}
-        description={t('translation|Are you sure you want to delete this item?')}
+        description={t('translation|Are you sure you want to delete item {{ itemName }}?', {
+          itemName: item.metadata.name,
+        })}
         handleClose={() => setOpenAlert(false)}
         onConfirm={() => {
           deleteFunc();
           dispatchDeleteEvent({
             resource: item,
             status: EventStatus.CONFIRMED,
           });
+          if (afterConfirm) {
+            afterConfirm();
+          }
         }}
       />
     </AuthVisible>

diff --git a/frontend/src/components/common/Resource/EditButton.tsx b/frontend/src/components/common/Resource/EditButton.tsx
@@ -9,19 +9,21 @@ import {
   HeadlampEventType,
   useEventCallback,
 } from '../../../redux/headlampEventSlice';
-import ActionButton from '../ActionButton';
+import ActionButton, { ButtonStyle } from '../ActionButton';
 import AuthVisible from './AuthVisible';
 import EditorDialog from './EditorDialog';
 import ViewButton from './ViewButton';
 
 interface EditButtonProps {
   item: KubeObject;
   options?: CallbackActionOptions;
+  buttonStyle?: ButtonStyle;
+  afterConfirm?: () => void;
 }
 
 export default function EditButton(props: EditButtonProps) {
   const dispatch = useDispatch();
-  const { item, options = {} } = props;
+  const { item, options = {}, buttonStyle, afterConfirm } = props;
   const [openDialog, setOpenDialog] = React.useState(false);
   const [isReadOnly, setIsReadOnly] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState<string>('');
@@ -73,6 +75,9 @@ export default function EditButton(props: EditButtonProps) {
       resource: item,
       status: EventStatus.CLOSED,
     });
+    if (afterConfirm) {
+      afterConfirm();
+    }
   }
 
   if (!item) {
@@ -97,6 +102,7 @@ export default function EditButton(props: EditButtonProps) {
     >
       <ActionButton
         description={t('translation|Edit')}
+        buttonStyle={buttonStyle}
         onClick={() => {
           setOpenDialog(true);
           dispatchHeadlampEditEvent({

diff --git a/frontend/src/components/common/Resource/ResourceListView.tsx b/frontend/src/components/common/Resource/ResourceListView.tsx
@@ -38,7 +38,7 @@ export default function ResourceListView<ItemType>(
         )
       }
     >
-      <ResourceTable {...tableProps} />
+      <ResourceTable enableRowActions {...tableProps} />
       {children}
     </SectionBox>
   );