fix: move the add form into the notification tabs

flanksource · Oct 7, 2024 · a47f99f · a47f99f
1 parent 14f6d10
commit a47f99f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 52 deletions.
diff --git a/src/components/Notifications/NotificationTabsLinks.tsx b/src/components/Notifications/NotificationTabsLinks.tsx
@@ -17,9 +17,9 @@ import { ErrorBoundary } from "../ErrorBoundary";
 import { AuthorizationAccessCheck } from "../Permissions/AuthorizationAccessCheck";
 
 const tabLinks = [
-  { label: "Notifications", path: "/notifications" },
-  { label: "Rules", path: "/notifications/rules" },
-  { label: "Silences", path: "/notifications/silences" }
+  { label: "Notifications", path: "/notifications", key: "Notifications" },
+  { label: "Rules", path: "/notifications/rules", key: "Rules" },
+  { label: "Silences", path: "/notifications/silences", key: "Silences" }
 ];
 
 type NotificationTabsLinksProps = {
@@ -29,6 +29,7 @@ type NotificationTabsLinksProps = {
   isLoading?: boolean;
   className?: string;
   setIsModalOpen?: (isOpen: boolean) => void;
+  isAddSilence?: boolean;
 };
 
 export default function NotificationTabsLinks({
@@ -37,9 +38,10 @@ export default function NotificationTabsLinks({
   refresh = () => {},
   isLoading,
   className,
-  setIsModalOpen = () => {}
+  setIsModalOpen = () => {},
+  isAddSilence = false
 }: NotificationTabsLinksProps) {
-  const pageTitle = activeTab;
+  const pageTitle = isAddSilence ? "Add Notification Silence" : activeTab;
 
   const [, setRefreshButtonClickedTrigger] = useAtom(
     refreshButtonClickedTrigger
@@ -81,20 +83,31 @@ export default function NotificationTabsLinks({
                       Silences
                     </BreadcrumbChild>,
 
-                    <AuthorizationAccessCheck
-                      resource={tables.notifications}
-                      action="write"
-                      key="add-notifications"
-                    >
-                      <Link
-                        key="notifications-silenced-add"
-                        type="button"
-                        className=""
-                        to="/notifications/silences/add"
-                      >
-                        <AiFillPlusCircle size={32} className="text-blue-600" />
-                      </Link>
-                    </AuthorizationAccessCheck>
+                    ...(isAddSilence
+                      ? [
+                          <BreadcrumbChild key="silenced-notifications-add">
+                            Add
+                          </BreadcrumbChild>
+                        ]
+                      : [
+                          <AuthorizationAccessCheck
+                            resource={tables.notifications}
+                            action="write"
+                            key="add-notifications"
+                          >
+                            <Link
+                              key="notifications-silenced-add"
+                              type="button"
+                              className=""
+                              to="/notifications/silences/add"
+                            >
+                              <AiFillPlusCircle
+                                size={32}
+                                className="text-blue-600"
+                              />
+                            </Link>
+                          </AuthorizationAccessCheck>
+                        ])
                   ]
                 : [])
             ]}

diff --git a/src/pages/Settings/notifications/NotificationSilencedAddPage.tsx b/src/pages/Settings/notifications/NotificationSilencedAddPage.tsx
@@ -1,42 +1,18 @@
+import NotificationTabsLinks from "@flanksource-ui/components/Notifications/NotificationTabsLinks";
 import NotificationSilenceForm from "@flanksource-ui/components/Notifications/SilenceNotificationForm/NotificationSilenceForm";
-import {
-  BreadcrumbChild,
-  BreadcrumbNav,
-  BreadcrumbRoot
-} from "@flanksource-ui/ui/BreadcrumbNav";
-import { Head } from "@flanksource-ui/ui/Head";
-import { SearchLayout } from "@flanksource-ui/ui/Layout/SearchLayout";
 import { useNavigate } from "react-router-dom";
 
 export default function NotificationSilencedAddPage() {
   const navigate = useNavigate();
 
   return (
-    <>
-      <Head prefix="Silence Notification" />
-      <SearchLayout
-        title={
-          <BreadcrumbNav
-            list={[
-              <BreadcrumbRoot link="/notifications" key="breadcrumb">
-                Notifications
-              </BreadcrumbRoot>,
-              <BreadcrumbChild link="/notifications/silences" key={"silence"}>
-                Silences
-              </BreadcrumbChild>,
-              <BreadcrumbChild key={"add"}>Add</BreadcrumbChild>
-            ]}
-          />
-        }
-        contentClass="p-0 h-full"
-      >
-        <div className="mx-auto flex h-full max-w-screen-md flex-1 flex-col px-6 py-6 pb-0">
-          <h3 className="text-xl font-semibold">Silence Notification</h3>
-          <NotificationSilenceForm
-            onSuccess={() => navigate("/notifications/silences")}
-          />
-        </div>
-      </SearchLayout>
-    </>
+    <NotificationTabsLinks activeTab={"Silences"} isAddSilence>
+      <div className="mx-auto flex h-full max-w-screen-md flex-1 flex-col px-6 py-6 pb-0">
+        <h3 className="px-4 text-xl font-semibold">Silence Notification</h3>
+        <NotificationSilenceForm
+          onSuccess={() => navigate("/notifications/silences")}
+        />
+      </div>
+    </NotificationTabsLinks>
   );
 }