From d5f718c6ad2dbc60e6bbf4a556bb284e1c9b751a Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Fri, 8 Nov 2024 14:07:50 -0800
Subject: [PATCH] improve: improve template form buttons

---
 .../components/EditProjectTemplate.tsx        | 103 +++++++-----------
 .../ProjectTemplateEnvironmentsForm.tsx       |  14 +--
 2 files changed, 46 insertions(+), 71 deletions(-)

diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx
index d6b6e0d68..6aebb3ca3 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx
@@ -1,17 +1,9 @@
-import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  DeleteActionModal,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  IconButton
-} from "@app/components/v2";
+import { Button, DeleteActionModal } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { TProjectTemplate, useDeleteProjectTemplate } from "@app/hooks/api/projectTemplates";
@@ -58,63 +50,48 @@ export const EditProjectTemplate = ({ isInfisicalTemplate, projectTemplate, onBa
 
   return (
     <>
-      <div className="mb-4 flex items-center justify-between border-b border-bunker-400">
-        <div className="mb-4 flex flex-col">
+      <div className="mb-4 flex items-start justify-between border-b border-bunker-400 pb-4">
+        <div className=" flex flex-col">
           <h3 className="text-xl font-semibold">{name}</h3>
           <h2 className="text-sm text-mineshaft-400">{description || "Project Template"}</h2>
         </div>
         {!isInfisicalTemplate && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <IconButton
-                colorSchema="secondary"
-                variant="plain"
-                size="lg"
-                ariaLabel="More options"
-                className="mr-2"
-              >
-                <FontAwesomeIcon icon={faEllipsis} />
-              </IconButton>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="p-1">
-              <OrgPermissionCan
-                I={OrgPermissionActions.Edit}
-                a={OrgPermissionSubjects.ProjectTemplates}
-              >
-                {(isAllowed) => (
-                  <DropdownMenuItem
-                    className={twMerge(
-                      !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                    )}
-                    onClick={() => handlePopUpOpen("editDetails")}
-                    disabled={!isAllowed}
-                  >
-                    Edit Details
-                  </DropdownMenuItem>
-                )}
-              </OrgPermissionCan>
-              <OrgPermissionCan
-                I={OrgPermissionActions.Delete}
-                a={OrgPermissionSubjects.ProjectTemplates}
-              >
-                {(isAllowed) => (
-                  <DropdownMenuItem
-                    className={twMerge(
-                      isAllowed
-                        ? "hover:!bg-red-500 hover:!text-white"
-                        : "pointer-events-none cursor-not-allowed opacity-50"
-                    )}
-                    onClick={() => {
-                      handlePopUpOpen("removeTemplate");
-                    }}
-                    disabled={!isAllowed}
-                  >
-                    Delete Template
-                  </DropdownMenuItem>
-                )}
-              </OrgPermissionCan>
-            </DropdownMenuContent>
-          </DropdownMenu>
+          <div className="flex gap-2">
+            <OrgPermissionCan
+              I={OrgPermissionActions.Edit}
+              a={OrgPermissionSubjects.ProjectTemplates}
+            >
+              {(isAllowed) => (
+                <Button
+                  isDisabled={!isAllowed}
+                  leftIcon={<FontAwesomeIcon icon={faPencil} />}
+                  size="xs"
+                  colorSchema="secondary"
+                  onClick={() => handlePopUpOpen("editDetails")}
+                >
+                  Edit Details
+                </Button>
+              )}
+            </OrgPermissionCan>
+            <OrgPermissionCan
+              I={OrgPermissionActions.Delete}
+              a={OrgPermissionSubjects.ProjectTemplates}
+            >
+              {(isAllowed) => (
+                <Button
+                  isDisabled={!isAllowed}
+                  onClick={() => {
+                    handlePopUpOpen("removeTemplate");
+                  }}
+                  leftIcon={<FontAwesomeIcon icon={faTrash} />}
+                  size="xs"
+                  colorSchema="danger"
+                >
+                  Delete Template
+                </Button>
+              )}
+            </OrgPermissionCan>
+          </div>
         )}
       </div>
       <ProjectTemplateEnvironmentsForm
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx
index fc3b16ccb..677a7c773 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx
@@ -138,21 +138,19 @@ export const ProjectTemplateEnvironmentsForm = ({
                     <OrgPermissionCan
                       I={OrgPermissionActions.Edit}
                       a={OrgPermissionSubjects.ProjectTemplates}
-                      renderTooltip
-                      allowedLabel="Add Environment"
                     >
                       {(isAllowed) => (
-                        <IconButton
+                        <Button
                           onClick={() => append({ name: "", slug: "" })}
-                          colorSchema="primary"
+                          colorSchema="secondary"
                           className="ml-auto"
-                          variant="outline_bg"
+                          variant="solid"
                           size="xs"
-                          ariaLabel="Add environment"
+                          leftIcon={<FontAwesomeIcon icon={faPlus} />}
                           isDisabled={!isAllowed}
                         >
-                          <FontAwesomeIcon icon={faPlus} />
-                        </IconButton>
+                          Add Environment
+                        </Button>
                       )}
                     </OrgPermissionCan>
                   </div>