add buttons to swap

Author: moribellamy

internal/dev_server/sdk/sdk_events.go

@@ -4,7 +4,6 @@ import (
 	"io"
 	"log"
 	"net/http"
-	"sync"
 
 	"github.com/launchdarkly/ldcli/internal/dev_server/model"
 	"github.com/pkg/errors"
@@ -22,14 +21,9 @@ func (o sdkEventObserver) Handle(message interface{}) {
 	o.updateChan <- Message{Event: TYPE_PUT, Data: []byte(str)}
 }
 
-var observers *model.Observers
-var once sync.Once
+var observers *model.Observers = model.NewObservers()
 
 func SdkEventsReceiveHandler(writer http.ResponseWriter, request *http.Request) {
-	once.Do(func() {
-		observers = model.NewObservers()
-	})
-
 	bodyStr, err := io.ReadAll(request.Body)
 	if err != nil {
 		log.Printf("SdkEventsReceiveHandler: error reading request body: %v", err)
@@ -42,10 +36,6 @@ func SdkEventsReceiveHandler(writer http.ResponseWriter, request *http.Request)
 }
 
 func SdkEventsTeeHandler(writer http.ResponseWriter, request *http.Request) {
-	once.Do(func() {
-		observers = model.NewObservers()
-	})
-
 	updateChan, errChan := OpenStream(
 		writer,
 		request.Context().Done(),

internal/dev_server/ui/src/App.tsx

@@ -0,0 +1,44 @@
+import './App.css';
+import { useState } from 'react';
+import { Box } from '@launchpad-ui/core';
+import FlagsButton from './FlagsButton.tsx';
+import EventsButton from './EventsButton.tsx';
+import FlagsPage from './FlagsPage.tsx';
+import EventsPage from './EventsPage.tsx';
+
+function App() {
+  const [mode, setMode] = useState<'flags' | 'events'>('flags');
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: '1rem',
+      }}
+    >
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        width="100%"
+        maxWidth="900px"
+        minWidth="600px"
+        padding="2rem"
+      >
+        <Box display="flex" gap="10px" justifyContent="flex-start" width="100%">
+          <FlagsButton onPress={() => { setMode('flags'); }} />
+          <EventsButton onPress={() => { setMode('events'); }} />
+        </Box>
+        <Box padding="1rem" width="100%">
+          {mode === 'flags' && <FlagsPage />}
+          {mode === 'events' && <EventsPage />}
+        </Box>
+      </Box>
+    </div>
+  );
+}
+
+
+export default App;

internal/dev_server/ui/src/EventsButton.tsx

@@ -0,0 +1,31 @@
+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/EventsPage.tsx

@@ -0,0 +1,10 @@
+type Props = {
+};
+
+const EventsPage = ({}: Props) => {
+  return (
+    <span>events stream</span>
+  );
+};
+
+export default EventsPage;

internal/dev_server/ui/src/FlagsButton.tsx

@@ -0,0 +1,31 @@
+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 and edit flags for the selected project</Tooltip>
+    </TooltipTrigger>
+  );
+};
+
+export default FlagsButton;

internal/dev_server/ui/src/FlagsPage.tsx

@@ -131,24 +131,9 @@ function App() {
   );
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: '1rem',
-      }}
-    >
-      <Box
-        display="flex"
-        flexDirection="column"
-        alignItems="center"
-        width="100%"
-        maxWidth="900px"
-        minWidth="600px"
-        padding="2rem"
-      >
-        <Box display="flex" flexDirection="column" padding="1rem" width="100%">
+    <div style={{ width: '100%' }}>
+      <Box width="100%" minWidth="600px">
+        <Box display="flex" flexDirection="column" width="100%">
           {showBanner && (
             <Box marginBottom="2rem" width="100%">
               <Alert kind="error">

internal/dev_server/ui/src/main.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './FlagsPage.tsx';
+import App from './App.tsx';
 import { IconProvider } from './IconProvider.tsx';
 import { ToastContainer } from '@launchpad-ui/components';