feat: Add Sync button for refreshing the state

internal/dev_server/ui/src/App.tsx

@@ -3,10 +3,14 @@ import { useState } from 'react';
 import Flags from './Flags.tsx';
 import ProjectSelector from './ProjectSelector.tsx';
 import { Box } from '@launchpad-ui/core';
+import SyncButton from './Sync.tsx';
+import { LDFlagSet } from 'launchdarkly-js-client-sdk';
 
 function App() {
   const [selectedProject, setSelectedProject] = useState<string | null>(null);
 
+  const [flags, setFlags] = useState<LDFlagSet | null>(null);
+
   return (
     <>
       <Box
@@ -29,9 +33,14 @@ function App() {
             selectedProject={selectedProject}
             setSelectedProject={setSelectedProject}
           />
+          <SyncButton selectedProject={selectedProject} setFlags={setFlags} />
         </Box>
         {selectedProject != null ? (
-          <Flags selectedProject={selectedProject} />
+          <Flags
+            selectedProject={selectedProject}
+            flags={flags}
+            setFlags={setFlags}
+          />
         ) : (
           ''
         )}

internal/dev_server/ui/src/Flags.tsx

@@ -14,12 +14,15 @@ import { Box, InlineEdit, TextField } from '@launchpad-ui/core';
 import Theme from '@launchpad-ui/tokens';
 import { useEffect, useRef, useState } from 'react';
 import { Icon } from '@launchpad-ui/icons';
-import { apiRoute } from './util.ts';
+import { apiRoute, sortFlags } from './util.ts';
 
-type FlagProps = { selectedProject: string };
+type FlagProps = {
+  selectedProject: string;
+  flags: LDFlagSet | null;
+  setFlags: (flags: LDFlagSet) => void;
+};
 
-function Flags({ selectedProject }: FlagProps) {
-  const [flags, setFlags] = useState<LDFlagSet | null>(null);
+function Flags({ selectedProject, flags, setFlags }: FlagProps) {
   const [overrides, setOverrides] = useState<Record<
     string,
     { value: LDFlagValue }
@@ -93,15 +96,8 @@ function Flags({ selectedProject }: FlagProps) {
     }
 
     const { flagsState: flags, overrides } = json;
-    const sortedFlags = Object.keys(flags)
-      .sort((a, b) => a.localeCompare(b))
-      .reduce<Record<string, LDFlagValue>>((accum, flagKey) => {
-        accum[flagKey] = flags[flagKey];
 
-        return accum;
-      }, {});
-
-    setFlags(sortedFlags);
+    setFlags(sortFlags(flags));
     setOverrides(overrides);
   };
 

internal/dev_server/ui/src/ProjectSelector.tsx

@@ -7,6 +7,7 @@ import {
   MenuItem,
   MenuTrigger,
   Popover,
+  ProgressBar,
 } from '@launchpad-ui/components';
 import { Alert, CopyToClipboard } from '@launchpad-ui/core';
 
@@ -26,24 +27,48 @@ type Props = {
 
 function ProjectSelector({ selectedProject, setSelectedProject }: Props) {
   const [projects, setProjects] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
   const setProjectsAndUpdateSelectedProject = (projects: string[]) => {
     setProjects(projects);
     if (projects.length == 1) {
       setSelectedProject(projects[0]);
     }
+    setIsLoading(false);
   };
+
   useEffect(() => {
     fetchProjects()
       .then(setProjectsAndUpdateSelectedProject)
-      .catch(console.error);
+      .catch((error) => {
+        console.error(error);
+        setIsLoading(false);
+      });
   }, []);
 
+  if (isLoading) {
+    return (
+      <div style={{ textAlign: 'center' }}>
+        <ProgressBar
+          aria-label="loading"
+          isIndeterminate
+          style={{ width: '100%', height: '2rem' }}
+        />
+        <p>Projects are loading</p>
+      </div>
+    );
+  }
+
   return projects.length > 0 ? (
     <MenuTrigger>
       <Button>
-        {selectedProject == null
-          ? 'Select a project'
-          : `${selectedProject} project selected`}
+        {selectedProject == null ? (
+          'Select a project'
+        ) : (
+          <>
+            <strong>{selectedProject}</strong> project selected
+          </>
+        )}
       </Button>
       <Popover>
         <Menu>

internal/dev_server/ui/src/Sync.tsx

@@ -0,0 +1,62 @@
+import {
+  Button,
+  Tooltip,
+  TooltipTrigger,
+  ProgressBar,
+} from '@launchpad-ui/components';
+import { apiRoute, sortFlags } from './util.ts';
+import { LDFlagSet } from 'launchdarkly-js-client-sdk';
+import { useState } from 'react';
+
+const syncProject = async (selectedProject: string) => {
+  const res = await fetch(apiRoute(`/dev/projects/${selectedProject}/sync`), {
+    method: 'PATCH',
+  });
+
+  const json = await res.json();
+  if (!res.ok) {
+    throw new Error(`Got ${res.status}, ${res.statusText} from projects fetch`);
+  }
+  return json;
+};
+
+const SyncButton = ({
+  selectedProject,
+  setFlags,
+}: {
+  selectedProject: string | null;
+  setFlags: (flags: LDFlagSet) => void;
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = async () => {
+    setIsLoading(true);
+    try {
+      const result = await syncProject(selectedProject!);
+      setFlags(sortFlags(result.flagsState));
+    } catch (error) {
+      console.error('Sync failed:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (!selectedProject) {
+    return null;
+  }
+
+  return (
+    <TooltipTrigger>
+      <Button onClick={handleClick} disabled={isLoading}>
+        {isLoading ? (
+          <ProgressBar aria-label="loading" isIndeterminate />
+        ) : (
+          'Sync'
+        )}
+      </Button>
+      <Tooltip>Sync the selected project from the source environment</Tooltip>
+    </TooltipTrigger>
+  );
+};
+
+export default SyncButton;

internal/dev_server/ui/src/util.ts

@@ -1,2 +1,12 @@
+import { LDFlagValue } from "launchdarkly-js-client-sdk";
+
 const API_BASE = import.meta.env.PROD ? '' : '/api';
 export const apiRoute = (pathname: string) => `${API_BASE}${pathname}`;
+
+export const sortFlags = (flags: Record<string, LDFlagValue>) => Object.keys(flags)
+  .sort((a, b) => a.localeCompare(b)) 
+  .reduce<Record<string, LDFlagValue>>((accum, flagKey) => {
+    accum[flagKey] = flags[flagKey]; 
+
+    return accum;
+  }, {});