add instance type indicator to the badge and document title

Author: emrberk

packages/browser-tests/cypress/integration/console/topbar.spec.js

@@ -55,7 +55,7 @@ describe("TopBar", () => {
     cy.getByDataHook("topbar-instance-save-button").should("not.exist");
     cy.getByDataHook("topbar-instance-name").should(
       "have.text",
-      "test-instance"
+      "Production | test-instance"
     );
     cy.getByDataHook("topbar-instance-icon").realHover();
     cy.contains("test description of the test instance").should("be.visible");

packages/web-console/src/components/TopBar/toolbar.tsx

@@ -302,14 +302,13 @@ const CustomIconWithTooltip = ({
 
 export const Toolbar = () => {
   const { quest } = useContext(QuestContext)
-  const { settings } = useSettings()
+  const { settings, preferences, refreshSettingsAndPreferences } = useSettings()
   const { logout } = useAuth()
   const result = useSelector(selectors.query.getResult)
   const [currentUser, setCurrentUser] = useState<string | null>(null)
   const [settingsPopperActive, setSettingsPopperActive] = useState(false)
-  const [preferencesValues, setPreferencesValues] = useState<Preferences | null>(null)
   const [previewValues, setPreviewValues] = useState<Preferences | null>(null)
-  const shownValues = settingsPopperActive ? previewValues : preferencesValues
+  const shownValues = settingsPopperActive ? previewValues : preferences
   const badgeColors = useBadgeColors(shownValues?.instance_rgb ?? null)
   const theme = useTheme()
 
@@ -336,20 +335,15 @@ export const Toolbar = () => {
     }
   }
 
-  const fetchPreferences = async () => {
-    const preferences = await quest.getPreferences()
-    setPreferencesValues(preferences)
-  }
-
   useEffect(() => {
     fetchServerDetails()
-    fetchPreferences()
+    refreshSettingsAndPreferences()
   }, [])
 
   useEffect(() => {
     if (result && result.type === QuestDB.Type.DDL) {
       fetchServerDetails()
-      fetchPreferences()
+      refreshSettingsAndPreferences()
     }
   }, [result])
 
@@ -359,13 +353,13 @@ export const Toolbar = () => {
     } catch (e) {
       // Handle error
     }
-    await fetchPreferences()
+    await refreshSettingsAndPreferences()
   }
 
   const handleToggle = useCallback((active: boolean) => {
     setSettingsPopperActive(active)
-    setPreviewValues(active ? preferencesValues : null)
-  }, [preferencesValues])
+    setPreviewValues(active ? preferences : null)
+  }, [preferences])
 
   return (
     <Root>
@@ -379,7 +373,7 @@ export const Toolbar = () => {
           />
         )}
       </Box>
-      {preferencesValues && (
+      {preferences && (
         <Badge
           $badgeColors={badgeColors}
           data-hook="topbar-instance-badge"
@@ -396,14 +390,19 @@ export const Toolbar = () => {
             )}
           </Box>
           {shownValues?.instance_name
-            ? <Text data-hook="topbar-instance-name" className="instance-name">{shownValues?.instance_name}</Text>
+            ? <Text data-hook="topbar-instance-name" className="instance-name">
+                {shownValues?.instance_type
+                  ? `${shownValues?.instance_type.charAt(0).toUpperCase()}${shownValues?.instance_type.slice(1)} | `
+                  : ''}
+                {shownValues?.instance_name}
+              </Text>
             : <Text data-hook="topbar-instance-name" className="instance-name placeholder">Instance name is not set</Text>
           }
 
           <InstanceSettingsPopper
             active={settingsPopperActive}
             onToggle={handleToggle}
-            values={previewValues ?? preferencesValues}
+            values={previewValues ?? preferences}
             onSave={handleSaveSettings}
             onValuesChange={setPreviewValues}
             trigger={<Edit data-hook="topbar-instance-edit-icon" size="18px" className={`edit-icon ${shownValues?.instance_name ? '' : 'placeholder'}`} />}

packages/web-console/src/providers/SettingsProvider/index.tsx

@@ -11,6 +11,7 @@ import { Box, Button, Text } from "@questdb/react-components"
 import { Refresh } from "@styled-icons/remix-line"
 import {setValue} from "../../utils/localStorage";
 import {StoreKey} from "../../utils/localStorage/types";
+import { Preferences } from '../../utils/questdb'
 
 enum View {
   loading = 0,
@@ -26,9 +27,11 @@ const reducer = (s: State, n: Partial<State>) => ({ ...s, ...n })
 
 const SettingContext = createContext<{
   settings: Settings
+  preferences: Preferences
   consoleConfig: ConsoleConfig
   warnings: Warning[]
-}>({ settings: {}, consoleConfig: {}, warnings: [] })
+  refreshSettingsAndPreferences: () => Promise<void>
+}>({ settings: {}, preferences: {}, consoleConfig: {}, warnings: [], refreshSettingsAndPreferences: () => Promise.resolve() })
 
 const connectionError = (
   <>
@@ -47,13 +50,14 @@ export const SettingsProvider = ({
 }) => {
   const [state, dispatch] = useReducer(reducer, initialState)
   const [settings, setSettings] = useState<Settings>({})
+  const [preferences, _setPreferences] = useState<Preferences>({})
   const [warnings, setWarnings] = useState<Warning[]>([])
   const [consoleConfig, setConsoleConfig] = useState<ConsoleConfig>({})
 
   const views: { [key in View]: () => React.ReactNode } = {
     [View.loading]: () => null,
     [View.ready]: () => (
-      <SettingContext.Provider value={{ settings, consoleConfig, warnings }}>
+      <SettingContext.Provider value={{ settings, consoleConfig, warnings, preferences, refreshSettingsAndPreferences }}>
         {children}
       </SettingContext.Provider>
     ),
@@ -101,6 +105,25 @@ export const SettingsProvider = ({
     }
   }
 
+  const setPreferences = (preferences: Preferences) => {
+    if (preferences?.instance_name) {
+      const suffix = preferences?.instance_type ? `${preferences.instance_type.charAt(0).toUpperCase()}${preferences.instance_type.slice(1)}` : 'QuestDB'
+      const newTitle = `${preferences.instance_name} | ${suffix}`
+      if (document.title !== newTitle) {
+        document.title = newTitle
+      }
+    }
+    _setPreferences(preferences)
+  }
+
+  const refreshSettingsAndPreferences = async () => {
+    const result = await fetchEndpoint("settings", connectionError)
+    if (result) {
+      setSettings(result.config)
+      setPreferences({ version: result["preferences.version"], ...result.preferences })
+    }
+  }
+
   useEffect(() => {
     const fetchAll = async () => {
       const settings = await fetchEndpoint("settings", connectionError)
@@ -111,6 +134,7 @@ export const SettingsProvider = ({
       )
       if (settings) {
         setSettings(settings.config)
+        setPreferences({ version: settings["preferences.version"], ...settings.preferences })
         setValue(StoreKey.RELEASE_TYPE, settings["release.type"])
       }
       if (warnings) {

packages/web-console/src/utils/questdb/client.ts

@@ -419,19 +419,6 @@ export class Client {
     })
   }
 
-  async getPreferences(): Promise<Preferences> {
-    try {
-      const response: Response = await fetch(
-        `settings`,
-        { headers: this.commonHeaders },
-      )
-      const settings = await response.json()
-      return { version: settings["preferences.version"], ...settings.preferences }
-    } catch (error) {
-      throw error
-    }
-  }
-
   async savePreferences(preferences: Preferences): Promise<void> {
     const { version, ...prefs } = preferences;
     const response: Response = await fetch(