frontend: Add create resource UI

These changes introduce a new UI feature that allows users to create resources from the associated list view. Clicking the 'Create' button opens up the EditorDialog used in the generic 'Create / Apply' button, now accepting generic YAML/JSON text rather than explicitly expecting an item that looks like a Kubernetes resource. The dialog box also includes a generic template for each resource. The apply logic for this new feature (as well as the original 'Create / Apply' button) has been consolidated in EditorDialog, with a flag allowing external components to utilize their own dispatch functionality. Fixes: #1820 Signed-off-by: Evangelos Skopelitis <[email protected]>
headlamp-k8s · Dec 10, 2024 · 9f454b2 · 9f454b2
1 parent 22bd24c
commit 9f454b2
Show file tree

Hide file tree

Showing 67 changed files with 1,085 additions and 171 deletions.
diff --git a/frontend/src/components/common/CreateResourceButton.stories.tsx b/frontend/src/components/common/CreateResourceButton.stories.tsx
@@ -0,0 +1,98 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, waitFor } from '@storybook/test';
+import { screen } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { KubeObjectClass } from '../../lib/k8s/cluster';
+import ConfigMap from '../../lib/k8s/configMap';
+import store from '../../redux/stores/store';
+import { TestContext } from '../../test';
+import { CreateResourceButton, CreateResourceButtonProps } from './CreateResourceButton';
+
+export default {
+  title: 'CreateResourceButton',
+  component: CreateResourceButton,
+  parameters: {
+    storyshots: {
+      disable: true,
+    },
+  },
+  decorators: [
+    Story => {
+      return (
+        <Provider store={store}>
+          <TestContext>
+            <Story />
+          </TestContext>
+        </Provider>
+      );
+    },
+  ],
+} as Meta;
+
+type Story = StoryObj<CreateResourceButtonProps>;
+
+export const ValidResource: Story = {
+  args: { resourceClass: ConfigMap as unknown as KubeObjectClass },
+
+  play: async ({ args }) => {
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: `Create ${args.resourceClass.getBaseObject().kind}`,
+      })
+    );
+
+    await waitFor(() => expect(screen.getByRole('textbox')).toBeVisible());
+
+    await userEvent.click(screen.getByRole('textbox'));
+
+    await userEvent.keyboard('{Control>}a{/Control} {Backspace}');
+    await userEvent.keyboard(`apiVersion: v1{Enter}`);
+    await userEvent.keyboard(`kind: ConfigMap{Enter}`);
+    await userEvent.keyboard(`metadata:{Enter}`);
+    await userEvent.keyboard(`  name: base-configmap`);
+
+    const button = await screen.findByRole('button', { name: 'Apply' });
+    expect(button).toBeVisible();
+  },
+};
+
+export const InvalidResource: Story = {
+  args: { resourceClass: ConfigMap as unknown as KubeObjectClass },
+
+  play: async ({ args }) => {
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: `Create ${args.resourceClass.getBaseObject().kind}`,
+      })
+    );
+
+    await waitFor(() => expect(screen.getByRole('textbox')).toBeVisible());
+
+    await userEvent.click(screen.getByRole('textbox'));
+
+    await userEvent.keyboard('{Control>}a{/Control}');
+    await userEvent.keyboard(`apiVersion: v1{Enter}`);
+    await userEvent.keyboard(`kind: ConfigMap{Enter}`);
+    await userEvent.keyboard(`metadata:{Enter}`);
+    await userEvent.keyboard(`  name: base-configmap{Enter}`);
+    await userEvent.keyboard(`creationTimestamp: ''`);
+
+    const button = await screen.findByRole('button', { name: 'Apply' });
+    expect(button).toBeVisible();
+
+    await userEvent.click(button);
+
+    await waitFor(() =>
+      userEvent.click(
+        screen.getByRole('button', {
+          name: `Create ${args.resourceClass.getBaseObject().kind}`,
+        })
+      )
+    );
+
+    await waitFor(() => expect(screen.getByText(/Failed/)).toBeVisible(), {
+      timeout: 15000,
+    });
+  },
+};
diff --git a/frontend/src/components/common/CreateResourceButton.tsx b/frontend/src/components/common/CreateResourceButton.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { KubeObjectClass } from '../../lib/k8s/cluster';
+import { ActionButton, AuthVisible, EditorDialog } from '../common';
+
+export interface CreateResourceButtonProps {
+  resourceClass: KubeObjectClass;
+  resourceName?: string;
+}
+
+export function CreateResourceButton(props: CreateResourceButtonProps) {
+  const { resourceClass, resourceName } = props;
+  const { t } = useTranslation(['glossary', 'translation']);
+  const [openDialog, setOpenDialog] = React.useState(false);
+  const [errorMessage, setErrorMessage] = React.useState('');
+
+  const baseObject = resourceClass.getBaseObject();
+  const name = resourceName ?? baseObject.kind;
+
+  return (
+    <AuthVisible item={resourceClass} authVerb="create">
+      <ActionButton
+        color="primary"
+        description={t('translation|Create {{ name }}', { name })}
+        icon={'mdi:plus-circle'}
+        onClick={() => {
+          setOpenDialog(true);
+        }}
+      />
+      <EditorDialog
+        item={baseObject}
+        open={openDialog}
+        setOpen={setOpenDialog}
+        onClose={() => setOpenDialog(false)}
+        saveLabel={t('translation|Apply')}
+        errorMessage={errorMessage}
+        onEditorChanged={() => setErrorMessage('')}
+        title={t('translation|Create {{ name }}', { name })}
+      />
+    </AuthVisible>
+  );
+}
diff --git a/frontend/src/components/common/Resource/CreateButton.tsx b/frontend/src/components/common/Resource/CreateButton.tsx
@@ -6,18 +6,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
-import { useLocation } from 'react-router-dom';
 import { useClusterGroup } from '../../../lib/k8s';
-import { apply } from '../../../lib/k8s/apiProxy';
-import { KubeObjectInterface } from '../../../lib/k8s/KubeObject';
-import { clusterAction } from '../../../redux/clusterActionSlice';
-import {
-  EventStatus,
-  HeadlampEventType,
-  useEventCallback,
-} from '../../../redux/headlampEventSlice';
-import { AppDispatch } from '../../../redux/stores/store';
 import ActionButton from '../ActionButton';
 import EditorDialog from './EditorDialog';
 
@@ -27,15 +16,14 @@ interface CreateButtonProps {
 
 export default function CreateButton(props: CreateButtonProps) {
   const { isNarrow } = props;
-  const dispatch: AppDispatch = useDispatch();
 
   const [openDialog, setOpenDialog] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState('');
-  const location = useLocation();
   const { t } = useTranslation(['translation']);
-  const dispatchCreateEvent = useEventCallback(HeadlampEventType.CREATE_RESOURCE);
   const clusters = useClusterGroup();
   const [targetCluster, setTargetCluster] = React.useState(clusters[0] || '');
+
+  // We want to avoid resetting the dialog state on close.
   const itemRef = React.useRef({});
 
   // When the clusters in the group change, we want to reset the target cluster
@@ -48,82 +36,6 @@ export default function CreateButton(props: CreateButtonProps) {
     }
   }, [clusters]);
 
-  const applyFunc = async (newItems: KubeObjectInterface[], clusterName: string) => {
-    await Promise.allSettled(newItems.map(newItem => apply(newItem, clusterName))).then(
-      (values: any) => {
-        values.forEach((value: any, index: number) => {
-          if (value.status === 'rejected') {
-            let msg;
-            const kind = newItems[index].kind;
-            const name = newItems[index].metadata.name;
-            const apiVersion = newItems[index].apiVersion;
-            if (newItems.length === 1) {
-              msg = t('translation|Failed to create {{ kind }} {{ name }}.', { kind, name });
-            } else {
-              msg = t('translation|Failed to create {{ kind }} {{ name }} in {{ apiVersion }}.', {
-                kind,
-                name,
-                apiVersion,
-              });
-            }
-            setErrorMessage(msg);
-            setOpenDialog(true);
-            throw msg;
-          }
-        });
-      }
-    );
-  };
-
-  function handleSave(newItemDefs: KubeObjectInterface[]) {
-    let massagedNewItemDefs = newItemDefs;
-    const cancelUrl = location.pathname;
-
-    // check if all yaml objects are valid
-    for (let i = 0; i < massagedNewItemDefs.length; i++) {
-      if (massagedNewItemDefs[i].kind === 'List') {
-        // flatten this List kind with the items that it has which is a list of valid k8s resources
-        const deletedItem = massagedNewItemDefs.splice(i, 1);
-        massagedNewItemDefs = massagedNewItemDefs.concat(deletedItem[0].items!);
-      }
-      if (!massagedNewItemDefs[i].metadata?.name) {
-        setErrorMessage(
-          t(`translation|Invalid: One or more of resources doesn't have a name property`)
-        );
-        return;
-      }
-      if (!massagedNewItemDefs[i].kind) {
-        setErrorMessage(t('translation|Invalid: Please set a kind to the resource'));
-        return;
-      }
-    }
-    // all resources name
-    const resourceNames = massagedNewItemDefs.map(newItemDef => newItemDef.metadata.name);
-    setOpenDialog(false);
-
-    dispatch(
-      clusterAction(() => applyFunc(massagedNewItemDefs, targetCluster), {
-        startMessage: t('translation|Applying {{ newItemName }}…', {
-          newItemName: resourceNames.join(','),
-        }),
-        cancelledMessage: t('translation|Cancelled applying {{ newItemName }}.', {
-          newItemName: resourceNames.join(','),
-        }),
-        successMessage: t('translation|Applied {{ newItemName }}.', {
-          newItemName: resourceNames.join(','),
-        }),
-        errorMessage: t('translation|Failed to apply {{ newItemName }}.', {
-          newItemName: resourceNames.join(','),
-        }),
-        cancelUrl,
-      })
-    );
-
-    dispatchCreateEvent({
-      status: EventStatus.CONFIRMED,
-    });
-  }
-
   return (
     <React.Fragment>
       {isNarrow ? (
@@ -152,7 +64,7 @@ export default function CreateButton(props: CreateButtonProps) {
         item={itemRef.current}
         open={openDialog}
         onClose={() => setOpenDialog(false)}
-        onSave={handleSave}
+        setOpen={setOpenDialog}
         saveLabel={t('translation|Apply')}
         errorMessage={errorMessage}
         onEditorChanged={() => setErrorMessage('')}

diff --git a/frontend/src/components/common/Resource/EditorDialog.stories.tsx b/frontend/src/components/common/Resource/EditorDialog.stories.tsx
@@ -2,12 +2,23 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import FormGroup from '@mui/material/FormGroup';
 import Switch from '@mui/material/Switch';
 import { Meta, StoryFn } from '@storybook/react';
+import { Provider } from 'react-redux';
+import store from '../../../redux/stores/store';
 import { EditorDialog, EditorDialogProps } from '..';
 
 export default {
   title: 'Resource/EditorDialog',
   component: EditorDialog,
   argTypes: {},
+  decorators: [
+    Story => {
+      return (
+        <Provider store={store}>
+          <Story />
+        </Provider>
+      );
+    },
+  ],
 } as Meta;
 
 const Template: StoryFn<EditorDialogProps> = args => {