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]>

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,
+ });
+ },
+};

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}
+ onClose={() => setOpenDialog(false)}
+ onSave={() => setOpenDialog(false)}
+ saveLabel={t('translation|Apply')}
+ errorMessage={errorMessage}
+ onEditorChanged={() => setErrorMessage('')}
+ title={t('translation|Create {{ name }}', { name })}
+ />
+ </AuthVisible>
+ );
+}

frontend/src/components/common/Resource/EditButton.tsx

@@ -115,6 +115,7 @@ export default function EditButton(props: EditButtonProps) {
  onSave={handleSave}
  errorMessage={errorMessage}
  onEditorChanged={() => setErrorMessage('')}
+ applyOnSave
  />
  )}
  </AuthVisible>

frontend/src/components/common/Resource/EditorDialog.stories.tsx

@@ -1,10 +1,21 @@
 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 => {

frontend/src/components/common/Resource/EditorDialog.tsx

@@ -17,9 +17,18 @@ import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { getCluster } from '../../../lib/cluster';
+import { apply } from '../../../lib/k8s/apiProxy';
 import { KubeObjectInterface } from '../../../lib/k8s/cluster';
 import { getThemeName } from '../../../lib/themes';
 import { useId } from '../../../lib/util';
+import { clusterAction } from '../../../redux/clusterActionSlice';
+import {
+ EventStatus,
+ HeadlampEventType,
+ useEventCallback,
+} from '../../../redux/headlampEventSlice';
 import ConfirmButton from '../ConfirmButton';
 import { Dialog, DialogProps } from '../Dialog';
 import Loader from '../Loader';
@@ -62,11 +71,22 @@ export interface EditorDialogProps extends DialogProps {
  errorMessage?: string;
  /** The dialog title. */
  title?: string;
+ /** The flag for applying the onSave function. */
+ applyOnSave?: boolean;
 }
 
 export default function EditorDialog(props: EditorDialogProps) {
- const { item, onClose, onSave, onEditorChanged, saveLabel, errorMessage, title, ...other } =
- props;
+ const {
+ item,
+ onClose,
+ onSave,
+ onEditorChanged,
+ saveLabel,
+ errorMessage,
+ title,
+ applyOnSave,
+ ...other
+ } = props;
  const editorOptions = {
  selectOnLineNumbers: true,
  readOnly: isReadOnly(),
@@ -94,6 +114,8 @@ export default function EditorDialog(props: EditorDialogProps) {
  const localData = localStorage.getItem('useSimpleEditor');
  return localData ? JSON.parse(localData) : false;
  });
+ const dispatchCreateEvent = useEventCallback(HeadlampEventType.CREATE_RESOURCE);
+ const dispatch = useDispatch();
 
  function setUseSimpleEditor(data: boolean) {
  localStorage.setItem('useSimpleEditor', JSON.stringify(data));
@@ -257,6 +279,32 @@ export default function EditorDialog(props: EditorDialogProps) {
  setCode(originalCodeRef.current);
  }
 
+ 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,
+ });
+ }
+ setError(msg);
+ throw msg;
+ }
+ });
+ }
+ );
+ };
+
  function handleSave() {
  // Verify the YAML even means anything before trying to use it.
  const { obj, format, error } = getObjectsFromCode(code);
@@ -273,6 +321,36 @@ export default function EditorDialog(props: EditorDialogProps) {
  setError(t("Error parsing the code. Please verify it's valid YAML or JSON!"));
  return;
  }
+
+ const newItemDefs = obj!;
+
+ if (!applyOnSave) {
+ const resourceNames = newItemDefs.map(newItemDef => newItemDef.metadata.name);
+ const clusterName = getCluster() || '';
+
+ dispatch(
+ clusterAction(() => applyFunc(newItemDefs, clusterName), {
+ 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: location.pathname,
+ })
+ );
+
+ dispatchCreateEvent({
+ status: EventStatus.CONFIRMED,
+ });
+ }
+
  onSave!(obj);
  }
 
@@ -309,9 +387,7 @@ export default function EditorDialog(props: EditorDialogProps) {
  const errorLabel = error || errorMessage;
  let dialogTitle = title;
  if (!dialogTitle && item) {
- const itemName = isKubeObjectIsh(item)
- ? item.metadata?.name || t('New Object')
- : t('New Object');
+ const itemName = (isKubeObjectIsh(item) && item.metadata?.name) || t('New Object');
  dialogTitle = isReadOnly()
  ? t('translation|View: {{ itemName }}', { itemName })
  : t('translation|Edit: {{ itemName }}', { itemName });

frontend/src/components/common/Resource/ResourceListView.tsx

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren } from 'react';
-import { KubeObject } from '../../../lib/k8s/cluster';
+import { KubeObject, KubeObjectClass } from '../../../lib/k8s/cluster';
+import { CreateResourceButton } from '../CreateResourceButton';
 import SectionBox from '../SectionBox';
 import SectionFilterHeader, { SectionFilterHeaderProps } from '../SectionFilterHeader';
 import ResourceTable, { ResourceTableProps } from './ResourceTable';
@@ -23,6 +24,8 @@ export default function ResourceListView<ItemType>(
  const { title, children, headerProps, ...tableProps } = props;
  const withNamespaceFilter =
  'resourceClass' in props && (props.resourceClass as KubeObject)?.isNamespaced;
+ const resourceClass = (props as ResourceListViewWithResourceClassProps<ItemType>)
+ .resourceClass as KubeObjectClass;
 
  return (
  <SectionBox
@@ -31,6 +34,10 @@ export default function ResourceListView<ItemType>(
  <SectionFilterHeader
  title={title}
  noNamespaceFilter={!withNamespaceFilter}
+ titleSideActions={
+ headerProps?.titleSideActions ||
+ (resourceClass ? [<CreateResourceButton resourceClass={resourceClass} />] : undefined)
+ }
  {...headerProps}
  />
  ) : (

frontend/src/components/common/Resource/ViewButton.stories.tsx

@@ -1,13 +1,24 @@
 import '../../../i18n/config';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
+import { Provider } from 'react-redux';
+import store from '../../../redux/stores/store';
 import ViewButton from './ViewButton';
 import { ViewButtonProps } from './ViewButton';
 
 export default {
  title: 'Resource/ViewButton',
  component: ViewButton,
  argTypes: {},
+ decorators: [
+ Story => {
+ return (
+ <Provider store={store}>
+ <Story />
+ </Provider>
+ );
+ },
+ ],
 } as Meta;
 
 const Template: StoryFn<ViewButtonProps> = args => <ViewButton {...args} />;

frontend/src/components/common/__snapshots__/CreateResourceButton.ConfigMapStory.stories.storyshot

@@ -0,0 +1 @@
+<DocumentFragment />

frontend/src/components/common/__snapshots__/CreateResourceButton.InvalidResource.stories.storyshot

@@ -0,0 +1,13 @@
+<DocumentFragment>
+ <button
+ aria-label="Create ConfigMap"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-whz9ym-MuiButtonBase-root-MuiIconButton-root"
+ data-mui-internal-clone-element="true"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+ />
+ </button>
+</DocumentFragment>

frontend/src/components/common/__snapshots__/CreateResourceButton.ValidResource.stories.storyshot

@@ -0,0 +1,13 @@
+<DocumentFragment>
+ <button
+ aria-label="Create ConfigMap"
+ class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-whz9ym-MuiButtonBase-root-MuiIconButton-root"
+ data-mui-internal-clone-element="true"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+ />
+ </button>
+</DocumentFragment>

frontend/src/components/common/index.test.ts

@@ -19,6 +19,7 @@ const checkExports = [
  'Chart',
  'ConfirmDialog',
  'ConfirmButton',
+ 'CreateResourceButton',
  'Dialog',
  'EmptyContent',
  'ErrorPage',