From 1f2f4525e332230a9439a13010876e81d61c3846 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Tue, 14 Nov 2023 12:36:15 +0200
Subject: [PATCH] feat(ui/buttons): introduce Add and Delete buttons [EE-6296]
 (#10585)

---
 .../components/buttons/AddButton.module.css   |  3 -
 .../components/buttons/AddButton.stories.tsx  | 15 ++---
 .../components/buttons/AddButton.test.tsx     | 18 +++---
 app/react/components/buttons/AddButton.tsx    | 55 ++++++++++---------
 app/react/components/buttons/DeleteButton.tsx | 40 ++++++++++++++
 .../components/CreateFromManifestButton.tsx   | 24 ++++++++
 6 files changed, 108 insertions(+), 47 deletions(-)
 delete mode 100644 app/react/components/buttons/AddButton.module.css
 create mode 100644 app/react/components/buttons/DeleteButton.tsx
 create mode 100644 app/react/kubernetes/components/CreateFromManifestButton.tsx

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 <AddButton label={label} onClick={onClick} />;
+type Args = {
+  label: string;
+};
+
+function Template({ label }: Args) {
+  return <AddButton>{label}</AddButton>;
 }
 
-export const Primary: Story<Props> = Template.bind({});
+export const Primary: Story<Args> = 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<Props> = {}) {
-  return render(<AddButton label={label} onClick={onClick} />);
+}: Partial<{ label: string }> = {}) {
+  return render(<AddButton to="">{label}</AddButton>);
 }
 
-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<typeof Button>['color'];
+    disabled?: boolean;
+  } & AutomationTestingProps
+>) {
   return (
-    <button
-      className={clsx(
-        className,
-        'label',
-        'label-default',
-        'vertical-center',
-        'interactive',
-        'vertical-center',
-        styles.addButton
-      )}
-      type="button"
-      onClick={onClick}
+    <Button
+      as={Link}
+      props={{ to, params }}
+      icon={Plus}
+      className="!m-0"
+      data-cy={dataCy}
+      color={color}
       disabled={disabled}
     >
-      <Icon icon={PlusCircle} />
-      {label}
-    </button>
+      {children || 'Add'}
+    </Button>
   );
 }
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<typeof Button>['size'];
+  disabled?: boolean;
+  confirmMessage: ReactNode;
+  onConfirmed(): Promise<void> | void;
+}>) {
+  return (
+    <Button
+      size={size}
+      color="dangerlight"
+      disabled={disabled}
+      onClick={() => handleClick()}
+      icon={Trash2}
+      className="!m-0"
+    >
+      {children || 'Remove'}
+    </Button>
+  );
+
+  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 (
+    <AddButton
+      to="kubernetes.deploy"
+      params={{
+        referrer: state.name,
+        ...params,
+      }}
+      data-cy={dataCy}
+    >
+      Create from manifest
+    </AddButton>
+  );
+}