From 31abd24502ff6bc9e5a5c2ef0eccb51d212f5c49 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 5 Dec 2024 10:23:29 -0500
Subject: [PATCH] feat(eventtemplates): enable custom event template UI to
 display when no target is selected

---
 src/app/Events/EventTemplates.tsx |  5 ++-
 src/app/Events/Events.tsx         | 64 +++++++++++++++++++++++--------
 2 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/src/app/Events/EventTemplates.tsx b/src/app/Events/EventTemplates.tsx
index 88cb453fb..21e81f1ef 100644
--- a/src/app/Events/EventTemplates.tsx
+++ b/src/app/Events/EventTemplates.tsx
@@ -165,9 +165,10 @@ export const EventTemplates: React.FC<EventTemplatesProps> = () => {
       context.target
         .target()
         .pipe(
-          filter((target) => !!target),
           first(),
-          concatMap((target: Target) => context.api.getTargetEventTemplates(target)),
+          concatMap((target: Target) =>
+            target ? context.api.getTargetEventTemplates(target) : context.api.getEventTemplates(),
+          ),
         )
         .subscribe({
           next: handleTemplates,
diff --git a/src/app/Events/Events.tsx b/src/app/Events/Events.tsx
index 4156e7220..4061bb598 100644
--- a/src/app/Events/Events.tsx
+++ b/src/app/Events/Events.tsx
@@ -25,24 +25,48 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { concatMap, filter } from 'rxjs';
 import { EventTemplates } from './EventTemplates';
 import { EventTypes } from './EventTypes';
+import { BreadcrumbPage } from '@app/BreadcrumbPage/BreadcrumbPage';
+import { TargetContextSelector } from '@app/TargetView/TargetContextSelector';
 
 export interface EventsProps {}
 
 export const Events: React.FC<EventsProps> = ({ ...props }) => {
+  const context = React.useContext(ServiceContext);
+  const addSubscription = useSubscriptions();
+  const [targetSelected, setTargetSelected] = React.useState(false);
+
+  React.useEffect(() => {
+    addSubscription(context.target.target().subscribe((t) => setTargetSelected(!!t)));
+  }, [context, context.target, setTargetSelected]);
+
   return (
-    <TargetView {...props} pageTitle="Events">
-      <Card isFullHeight>
-        <CardBody isFilled>
-          <EventTabs />
-        </CardBody>
-      </Card>
-      <Card isFullHeight>
-        <CardBody isFilled>
-          <AgentTabs />
-        </CardBody>
-      </Card>
-      <></>
-    </TargetView>
+    <>
+      <TargetContextSelector />
+      <BreadcrumbPage {...props} pageTitle="Events">
+        {targetSelected ? (
+          <>
+            <Card>
+              <CardBody isFilled>
+                <EventTabs targetSelected={targetSelected} />
+              </CardBody>
+            </Card>
+            <Card isFullHeight>
+              <CardBody isFilled>
+                <AgentTabs />
+              </CardBody>
+            </Card>
+          </>
+        ) : (
+          <>
+            <Card>
+              <CardBody isFilled>
+                <EventTabs targetSelected={targetSelected} />
+              </CardBody>
+            </Card>
+          </>
+        )}
+      </BreadcrumbPage>
+    </>
   );
 };
 
@@ -51,7 +75,11 @@ enum EventTab {
   EVENT_TYPE = 'event-type',
 }
 
-export const EventTabs: React.FC = () => {
+export interface EventTabsProps {
+  targetSelected: boolean;
+}
+
+export const EventTabs: React.FC<EventTabsProps> = (props: EventTabsProps) => {
   const { search, pathname } = useLocation();
   const navigate = useNavigate();
 
@@ -70,9 +98,11 @@ export const EventTabs: React.FC = () => {
       <Tab eventKey={EventTab.EVENT_TEMPLATE} title="Event Templates">
         <EventTemplates />
       </Tab>
-      <Tab eventKey={EventTab.EVENT_TYPE} title="Event types">
-        <EventTypes />
-      </Tab>
+      {props?.targetSelected && (
+        <Tab eventKey={EventTab.EVENT_TYPE} title="Event types">
+          <EventTypes />
+        </Tab>
+      )}
     </Tabs>
   );
 };