diff --git a/app/react/components/buttons/AddButton.module.css b/app/react/components/buttons/AddButton.module.css
deleted file mode 100644
index a46fb8a6d..000000000
--- a/app/react/components/buttons/AddButton.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.add-button {
- border: none;
-}
diff --git a/app/react/components/buttons/AddButton.stories.tsx b/app/react/components/buttons/AddButton.stories.tsx
index d03344058..42a29fa76 100644
--- a/app/react/components/buttons/AddButton.stories.tsx
+++ b/app/react/components/buttons/AddButton.stories.tsx
@@ -1,20 +1,21 @@
import { Meta, Story } from '@storybook/react';
-import { AddButton, Props } from './AddButton';
+import { AddButton } from './AddButton';
export default {
component: AddButton,
title: 'Components/Buttons/AddButton',
} as Meta;
-function Template({ label, onClick }: JSX.IntrinsicAttributes & Props) {
- return ;
+type Args = {
+ label: string;
+};
+
+function Template({ label }: Args) {
+ return {label};
}
-export const Primary: Story = Template.bind({});
+export const Primary: Story = Template.bind({});
Primary.args = {
label: 'Create new container',
- onClick: () => {
- alert('Hello AddButton!');
- },
};
diff --git a/app/react/components/buttons/AddButton.test.tsx b/app/react/components/buttons/AddButton.test.tsx
index dd7c2b917..1b7413983 100644
--- a/app/react/components/buttons/AddButton.test.tsx
+++ b/app/react/components/buttons/AddButton.test.tsx
@@ -1,22 +1,18 @@
-import { fireEvent, render } from '@testing-library/react';
+import { render } from '@/react-tools/test-utils';
-import { AddButton, Props } from './AddButton';
+import { AddButton } from './AddButton';
function renderDefault({
label = 'default label',
- onClick = () => {},
-}: Partial = {}) {
- return render();
+}: Partial<{ label: string }> = {}) {
+ return render({label});
}
-test('should display a AddButton component and allow onClick', async () => {
+test('should display a AddButton component', async () => {
const label = 'test label';
- const onClick = jest.fn();
- const { findByText } = renderDefault({ label, onClick });
+
+ const { findByText } = renderDefault({ label });
const buttonLabel = await findByText(label);
expect(buttonLabel).toBeTruthy();
-
- fireEvent.click(buttonLabel);
- expect(onClick).toHaveBeenCalled();
});
diff --git a/app/react/components/buttons/AddButton.tsx b/app/react/components/buttons/AddButton.tsx
index 46553f419..9891839f8 100644
--- a/app/react/components/buttons/AddButton.tsx
+++ b/app/react/components/buttons/AddButton.tsx
@@ -1,35 +1,38 @@
-import clsx from 'clsx';
-import { PlusCircle } from 'lucide-react';
+import { Plus } from 'lucide-react';
+import { ComponentProps, PropsWithChildren } from 'react';
-import { Icon } from '@/react/components/Icon';
+import { AutomationTestingProps } from '@/types';
-import styles from './AddButton.module.css';
+import { Link } from '@@/Link';
-export interface Props {
- className?: string;
- label: string;
- disabled?: boolean;
- onClick: () => void;
-}
+import { Button } from './Button';
-export function AddButton({ label, onClick, className, disabled }: Props) {
+export function AddButton({
+ to = '.new',
+ params,
+ children,
+ color = 'primary',
+ disabled,
+ 'data-cy': dataCy,
+}: PropsWithChildren<
+ {
+ to?: string;
+ params?: object;
+ color?: ComponentProps['color'];
+ disabled?: boolean;
+ } & AutomationTestingProps
+>) {
return (
-
+ {children || 'Add'}
+
);
}
diff --git a/app/react/components/buttons/DeleteButton.tsx b/app/react/components/buttons/DeleteButton.tsx
new file mode 100644
index 000000000..148d750f1
--- /dev/null
+++ b/app/react/components/buttons/DeleteButton.tsx
@@ -0,0 +1,40 @@
+import { Trash2 } from 'lucide-react';
+import { ComponentProps, PropsWithChildren, ReactNode } from 'react';
+
+import { confirmDelete } from '@@/modals/confirm';
+
+import { Button } from './Button';
+
+export function DeleteButton({
+ disabled,
+ confirmMessage,
+ onConfirmed,
+ size,
+ children,
+}: PropsWithChildren<{
+ size?: ComponentProps['size'];
+ disabled?: boolean;
+ confirmMessage: ReactNode;
+ onConfirmed(): Promise | void;
+}>) {
+ return (
+
+ );
+
+ async function handleClick() {
+ if (!(await confirmDelete(confirmMessage))) {
+ return undefined;
+ }
+
+ return onConfirmed();
+ }
+}
diff --git a/app/react/kubernetes/components/CreateFromManifestButton.tsx b/app/react/kubernetes/components/CreateFromManifestButton.tsx
new file mode 100644
index 000000000..0038735dd
--- /dev/null
+++ b/app/react/kubernetes/components/CreateFromManifestButton.tsx
@@ -0,0 +1,24 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+
+import { AutomationTestingProps } from '@/types';
+
+import { AddButton } from '@@/buttons';
+
+export function CreateFromManifestButton({
+ params = {},
+ 'data-cy': dataCy,
+}: { params?: object } & AutomationTestingProps) {
+ const { state } = useCurrentStateAndParams();
+ return (
+
+ Create from manifest
+
+ );
+}