Add toggle for new "events" section on SPA.

Author: moribellamy

internal/dev_server/ui/src/App.tsx

@@ -9,6 +9,8 @@ import { Heading, Text } from '@launchpad-ui/components';
 import { FlagVariation } from './api.ts';
 import { apiRoute, sortFlags } from './util.ts';
 import { ProjectEditor } from './ProjectEditor';
+import EventsButton from './EventsButton.tsx';
+import FlagsButton from './FlagsButton.tsx';
 
 interface Environment {
   key: string;
@@ -30,6 +32,7 @@ function App() {
   >({});
   const [flags, setFlags] = useState<LDFlagSet | null>(null);
   const [showBanner, setShowBanner] = useState(false);
+  const [showEvents, setShowEvents] = useState(false);
   const [context, setContext] = useState<string>('{}');
 
   const fetchDevFlags = useCallback(async () => {
@@ -187,29 +190,35 @@ function App() {
                   updateProjectSettings={updateProjectSettings}
                 />
               )}
-              <SyncButton
-                selectedProject={selectedProject}
-                setFlags={setFlags}
-                setAvailableVariations={setAvailableVariations}
-              />
+              <Box display="flex" alignItems="center" gap="1rem">
+                <FlagsButton onPress={() => { setShowEvents(false); }} />
+                <EventsButton onPress={() => { setShowEvents(true); }} />
+                <SyncButton
+                  selectedProject={selectedProject}
+                  setFlags={setFlags}
+                  setAvailableVariations={setAvailableVariations}
+                />
+              </Box>
             </Box>
           )}
           {selectedProject && (
             <Box width="100%">
-              <Flags
-                availableVariations={availableVariations}
-                selectedProject={selectedProject}
-                flags={flags}
-                overrides={overrides}
-                setOverrides={(
-                  newOverrides: Record<
-                    string,
-                    { value: LDFlagValue; version: number }
-                  >,
-                ) => {
-                  setOverrides(newOverrides);
-                }}
-              />
+              {!showEvents && (
+                <Flags
+                  availableVariations={availableVariations}
+                  selectedProject={selectedProject}
+                  flags={flags}
+                  overrides={overrides}
+                  setOverrides={(
+                    newOverrides: Record<
+                      string,
+                      { value: LDFlagValue; version: number }
+                    >,
+                  ) => {
+                    setOverrides(newOverrides);
+                  }}
+                />
+              )}
             </Box>
           )}
         </Box>

internal/dev_server/ui/src/Events.tsx

@@ -0,0 +1,5 @@
+const Events = () => {
+  return <span>events go here</span>;
+};
+
+export default Events;

internal/dev_server/ui/src/EventsButton.tsx

@@ -0,0 +1,29 @@
+import {
+  Button,
+  Tooltip,
+  TooltipTrigger,
+} from '@launchpad-ui/components';
+import { Icon } from '@launchpad-ui/icons';
+import { Inline } from '@launchpad-ui/core';
+
+type Props = {
+  onPress: () => void;
+};
+
+const EventsButton = ({ onPress }: Props) => {
+  return (
+    <TooltipTrigger>
+      <Button onPress={onPress}>
+        <div>
+          <Inline gap="1">
+            <Icon name="play" size="small" />
+            <span>Events</span>
+          </Inline>
+        </div>
+      </Button>
+      <Tooltip>View events</Tooltip>
+    </TooltipTrigger>
+  );
+};
+
+export default EventsButton;

internal/dev_server/ui/src/FlagsButton.tsx

@@ -0,0 +1,29 @@
+import {
+  Button,
+  Tooltip,
+  TooltipTrigger,
+} from '@launchpad-ui/components';
+import { Icon } from '@launchpad-ui/icons';
+import { Inline } from '@launchpad-ui/core';
+
+type Props = {
+  onPress: () => void;
+};
+
+const FlagsButton = ({ onPress }: Props) => {
+  return (
+    <TooltipTrigger>
+      <Button onPress={onPress}>
+        <div>
+          <Inline gap="1">
+            <Icon name="flag" size="small" />
+            <span>Flags</span>
+          </Inline>
+        </div>
+      </Button>
+      <Tooltip>View flags</Tooltip>
+    </TooltipTrigger>
+  );
+};
+
+export default FlagsButton;