Skip to content

Commit

Permalink
frontend: Add create namespace ui
Browse files Browse the repository at this point in the history
Signed-off-by: Vincent T <vtaylor@microsoft.com>
  • Loading branch information
vyncent-t committed Jul 15, 2024
1 parent a976bf1 commit 688ae64
Show file tree
Hide file tree
Showing 57 changed files with 6,855 additions and 2,124 deletions.
2 changes: 1 addition & 1 deletion frontend/.storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export default {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],

addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],

core: {
builder: '@storybook/builder-vite',
Expand Down
7,348 changes: 5,292 additions & 2,056 deletions frontend/package-lock.json

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"@types/humanize-duration": "^3.27.1",
"@types/js-yaml": "^4.0.3",
"@types/json-patch": "0.0.30",
"@types/lodash": "^4.14.175",
"@types/lodash": "4.17.4",
"@types/node": "^20.12.11",
"@types/react": "^17.0.27",
"@types/react-dom": "^17.0.9",
Expand Down Expand Up @@ -182,11 +182,13 @@
"@axe-core/react": "^4.3.2",
"@storybook/addon-actions": "7.6.7",
"@storybook/addon-essentials": "7.6.7",
"@storybook/addon-interactions": "7.6.20",
"@storybook/addon-links": "7.6.7",
"@storybook/builder-vite": "^8.1.0",
"@storybook/node-logger": "7.6.7",
"@storybook/react": "7.6.7",
"@storybook/react-vite": "^7.6.19",
"@storybook/test": "^8.1.10",
"@testing-library/jest-dom": "^6.4.5",
"@testing-library/user-event": "^14.5.1",
"@types/nock": "^11.1.0",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@
class="MuiBox-root css-10rqxfs"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1j0qgw8-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-ka7ti6-MuiAutocomplete-root"
>
<div
class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -531,7 +531,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
11 changes: 5 additions & 6 deletions frontend/src/components/common/Resource/Resource.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -558,12 +558,11 @@ export function ConditionsTable(props: ConditionsTableProps) {
}

export interface VolumeMountsProps {
mounts?:
| {
mountPath: string;
name: string;
readOnly: boolean;
}[];
mounts?: {
mountPath: string;
name: string;
readOnly: boolean;
}[];
}

export function VolumeMounts(props: VolumeMountsProps) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<DocumentFragment>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tw9w9k-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1x6bjyf-MuiAutocomplete-root"
>
<div
class="MuiBox-root css-1dipl1t"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import { Meta, StoryObj } from '@storybook/react';
import { expect, userEvent, waitFor } from '@storybook/test';
import { screen } from '@testing-library/react';
import React from 'react';
import { TestContext } from '../../test';
import CreateNamespaceButton from './CreateNamespaceButton';

const meta: Meta<typeof CreateNamespaceButton> = {
title: 'Namespace/CreateNamespaceButton',
component: CreateNamespaceButton,
decorators: [
Story => {
return (
<TestContext>
<Story />
</TestContext>
);
},
],
};

export default meta;
type Story = StoryObj<typeof CreateNamespaceButton>;

export const OkayName: Story = {
play: async () => {
await userEvent.click(screen.getByLabelText('Create'));

await waitFor(() => expect(screen.getByLabelText('Dialog')).toBeVisible());

await waitFor(() => userEvent.type(screen.getByRole('textbox'), 'okay-name'), {
timeout: 5000,
});

const button = await screen.findByRole('button', { name: 'Create' });

expect(button).toBeEnabled();
},
};

export const EmptyName: Story = {
play: async () => {
await userEvent.click(screen.getByLabelText('Create'));

await waitFor(() => expect(screen.getByLabelText('Dialog')).toBeVisible());

await waitFor(() => userEvent.type(screen.getByRole('textbox'), ' '), { timeout: 5000 });

const button = await screen.findByRole('button', { name: 'Create' });
const errorMessage = await screen.findByText(
"Namespaces must contain only lowercase alphanumeric characters or '-', and must start and end with an alphanumeric character."
);

expect(errorMessage).toBeVisible();
expect(button).not.toBeEnabled();
},
};

export const NotValidName: Story = {
play: async () => {
await userEvent.click(screen.getByLabelText('Create'));

await waitFor(() => expect(screen.getByLabelText('Dialog')).toBeVisible());

await waitFor(() => userEvent.type(screen.getByRole('textbox'), 'not-valid-name-'), {
timeout: 5000,
});

const button = await screen.findByRole('button', { name: 'Create' });
const errorMessage = await screen.findByText(
"Namespaces must contain only lowercase alphanumeric characters or '-', and must start and end with an alphanumeric character."
);

expect(errorMessage).toBeVisible();
expect(button).not.toBeEnabled();
},
};

export const NotValidNameLong: Story = {
play: async () => {
const longName = 'w'.repeat(64);
await userEvent.click(screen.getByLabelText('Create'));

await waitFor(() => expect(screen.getByLabelText('Dialog')).toBeVisible());

await waitFor(() => userEvent.type(screen.getByRole('textbox'), longName), { timeout: 10000 });

const button = await screen.findByRole('button', { name: 'Create' });
const errorMessage = await screen.findByText('Namespaces must be under 64 characters.');

expect(errorMessage).toBeVisible();
expect(button).not.toBeEnabled();
},
};
Loading

0 comments on commit 688ae64

Please sign in to comment.