Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

frontend: Add create namespace ui #1727

Merged
merged 1 commit into from
Jul 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading