Merge pull request #1854 from chirino/ui-fflags

ui: don’t show security group fields when that feature flag is off

.github/workflows/deploy.yml

@@ -4,7 +4,7 @@ concurrency: qa-${{ github.ref_name }}
 
 on:
   push:
-    branches: [main, playground]
+    branches: [main]
 
 jobs:
   build-images:

deploy/nexodus/base/apiserver/kustomization.yaml

@@ -10,7 +10,6 @@ configMapGenerator:
       - NEXAPI_INSECURE_TLS=1
       - NEXAPI_TRACE_ENDPOINT_OTLP="tempo.nexodus-monitoring.svc:4317"
       - NEXAPI_TRACE_INSECURE="1"
-      - NEXAPI_FFLAG_SECURITY_GROUPS=false
       - NEXAPI_DB_SSLMODE=require
       - NEXAPI_DOMAIN=api.try.nexodus.127.0.0.1.nip.io
       - NEXAPI_URL=https://api.try.nexodus.127.0.0.1.nip.io
@@ -24,6 +23,7 @@ configMapGenerator:
       - NEXAPI_FETCH_MGR_TIMEOUT=2s
       - NEXAPI_DEVICE_CACHE_SIZE=500
       - NEXAPI_FFLAG_DEVICES=true
+      - NEXAPI_FFLAG_SECURITY_GROUPS=true
       - NEXAPI_FFLAG_SITES=true
 resources:
   - service.yaml

deploy/nexodus/overlays/dev/kustomization.yaml

@@ -16,10 +16,6 @@ secretGenerator:
       - web-client-secret=dhEN2dsqyUg5qmaDAdqi4CmH
       - cli-client-id=nexodus-cli
 configMapGenerator:
-  - behavior: merge
-    literals:
-      - NEXAPI_FFLAG_SECURITY_GROUPS=true
-    name: apiserver
   - behavior: merge
     literals:
       - ENVOY_COMP_LOG_LEVEL=upstream:info,http:debug,router:debug,jwt:debug

deploy/nexodus/overlays/playground/kustomization.yaml

@@ -33,6 +33,7 @@ configMapGenerator:
       - NEXAPI_ORIGINS=https://playground.nexodus.io
       - NEXAPI_ENVIRONMENT=qa
       - NEXAPI_FFLAG_DEVICES=false
+      - NEXAPI_FFLAG_SECURITY_GROUPS=false
       - NEXAPI_FFLAG_SITES=true
       - NEXAPI_DEBUG=0
 patches:

deploy/nexodus/overlays/prod/kustomization.yaml

@@ -31,7 +31,6 @@ configMapGenerator:
       - NEXAPI_REDIRECT_URL=https://try.nexodus.io/#/login
       - NEXAPI_ORIGINS=https://try.nexodus.io
       - NEXAPI_ENVIRONMENT=production
-      - NEXAPI_FFLAG_SECURITY_GROUPS=true
       - NEXAPI_DEBUG=0
     name: apiserver
 

deploy/nexodus/overlays/qa/kustomization.yaml

@@ -32,7 +32,6 @@ configMapGenerator:
       - NEXAPI_REDIRECT_URL=https://qa.nexodus.io/#/login
       - NEXAPI_ORIGINS=https://qa.nexodus.io
       - NEXAPI_ENVIRONMENT=qa
-      - NEXAPI_FFLAG_SECURITY_GROUPS=true
       - NEXAPI_DEBUG=0
     name: apiserver
 patches:

ui/src/App.tsx

@@ -40,6 +40,7 @@ import {
 import { SiteEdit, SiteList, SiteShow } from "./pages/Sites";
 import { authProvider, dataProvider } from "./DataProvider";
 import { createTheme } from "@mui/material";
+import { FlagsProvider } from "./common/FlagsContext";
 
 const darkTheme = createTheme({
   palette: { mode: "dark" },

ui/src/common/FlagsContext.tsx

@@ -0,0 +1,42 @@
+import {
+  useState,
+  createContext,
+  useEffect,
+  PropsWithChildren,
+  ReactNode,
+  useContext,
+} from "react";
+import { dataProvider } from "../DataProvider";
+import { useGetIdentity } from "react-admin";
+
+const FlagsContext = createContext(
+  {} as {
+    [index: string]: boolean;
+  },
+);
+
+export function FlagsProvider(props: PropsWithChildren<{}>) {
+  const { data, isLoading } = useGetIdentity();
+  const [flags, setFlags] = useState({} as { [index: string]: boolean });
+  useEffect(() => {
+    isLoading ||
+      (async () => {
+        try {
+          const flags = await dataProvider.getFlags();
+          setFlags(flags);
+        } catch (e) {
+          console.log(e);
+        }
+      })();
+  }, [data]); // we can only fetch flags after we have logged in
+
+  return (
+    <FlagsContext.Provider value={flags}>
+      {props.children}
+    </FlagsContext.Provider>
+  );
+}
+
+export const useFlags = () => {
+  return useContext(FlagsContext);
+};

ui/src/layout/Layout.tsx

@@ -1,6 +1,11 @@
 import { Layout, LayoutProps } from "react-admin";
 import AppBar from "./AppBar";
+import { FlagsProvider } from "../common/FlagsContext";
 
 export default (props: LayoutProps) => {
-  return <Layout {...props} appBar={AppBar} />;
+  return (
+    <FlagsProvider>
+      <Layout {...props} appBar={AppBar} />
+    </FlagsProvider>
+  );
 };

ui/src/layout/Menus.tsx

@@ -1,26 +1,15 @@
-import { DashboardMenuItem, MenuItemLink, Menu } from "react-admin";
+import { DashboardMenuItem, Menu, MenuItemLink, MenuProps } from "react-admin";
 import SecurityIcon from "@mui/icons-material/Security";
 import DeviceIcon from "@mui/icons-material/Devices";
 import SiteIcon from "@mui/icons-material/BorderOuter";
 import OrganizationIcon from "@mui/icons-material/People";
 import InvitationIcon from "@mui/icons-material/Rsvp";
-import { MenuProps } from "react-admin";
 import RegKeyIcon from "@mui/icons-material/Key";
 import VPCIcon from "@mui/icons-material/Cloud";
-import { dataProvider } from "../DataProvider";
-import { useEffect, useState } from "react";
+import { useFlags } from "../common/FlagsContext";
 
 export const CustomMenu = (props: MenuProps) => {
-  const [flags, setFlags] = useState({} as { [index: string]: boolean });
-  useEffect(() => {
-    (async () => {
-      try {
-        setFlags(await dataProvider.getFlags());
-      } catch (e) {
-        console.log(e);
-      }
-    })();
-  }, []);
+  const flags = useFlags();
 
   return (
     <Menu {...props}>

ui/src/pages/Devices.tsx

@@ -1,32 +1,29 @@
 import React, { FC, forwardRef } from "react";
 import {
-  Datagrid,
-  List,
-  TextField,
-  SimpleShowLayout,
-  ReferenceField,
-  BulkExportButton,
-  BulkDeleteButton,
   ArrayField,
-  DateField,
+  AutocompleteInput,
   BooleanField,
   BooleanFieldProps,
-  Show,
-  useRecordContext,
-  useGetIdentity,
+  BulkDeleteButton,
+  BulkExportButton,
+  Datagrid,
+  DateField,
   Edit,
+  List,
+  ReferenceField,
+  ReferenceInput,
+  Show,
   SimpleForm,
+  SimpleShowLayout,
+  TextField,
   TextInput,
-  ReferenceInput,
-  AutocompleteInput,
-  BooleanInput,
-  DateTimeInput,
+  useGetIdentity,
+  useRecordContext,
 } from "react-admin";
 import OnlineIcon from "@mui/icons-material/CheckCircleOutline";
 import HighlightOffIcon from "@mui/icons-material/HighlightOff";
-import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import { useTheme } from "@mui/material/styles";
-import { Tooltip, Accordion, AccordionDetails, SvgIcon } from "@mui/material";
+import { Accordion, AccordionDetails, SvgIcon } from "@mui/material";
 
 interface DeviceAccordionDetailsProps {
   id: string | number;

ui/src/pages/RegKeys.tsx

@@ -29,6 +29,7 @@ import {
 import { JsonInput } from "./JsonInput";
 // @ts-ignore
 import { JsonField } from "./JsonField";
+import { useFlags } from "../common/FlagsContext";
 
 const RegKeyListBulkActions = () => (
   <Fragment>
@@ -59,42 +60,52 @@ export const RegKeyFlagField = (
   ) : null;
 };
 
-export const RegKeyShow = () => (
-  <Show>
-    <SimpleShowLayout>
-      <TextField label="ID" source="id" />
-      <RegKeyFlagField label="Command Line Flag" />
-      <TextField label="Bearer Token" source="bearer_token" />
-      <ReferenceField
-        label="Organization"
-        source="vpc_id"
-        reference="vpcs"
-        link="show"
-      />
-      <ReferenceField
-        label="Security Group"
-        source="security_group_id"
-        reference="security-groups"
-        // We can't deep link to security groups yet...
-        // link={(record) =>{
-        //   return `/_security-groups/${record.id}`
-        // }}
-      />
-      <ReferenceField
-        label="Device"
-        source="device_id"
-        reference="devices"
-        link="show"
-      />
-      <BooleanField label="Single Use" source="device_id" looseValue={true} />
-      <DateField label="Expiration" source="expiration" showTime={true} />
-      <TextField label="Description" source="description" />
-      <JsonField label="Settings" source="settings" />
-    </SimpleShowLayout>
-  </Show>
-);
+export const RegKeyShow = () => {
+  const flags = useFlags();
+  return (
+    <Show>
+      <SimpleShowLayout>
+        <TextField label="ID" source="id" />
+        <RegKeyFlagField label="Command Line Flag" />
+        <TextField label="Bearer Token" source="bearer_token" />
+        <ReferenceField
+          label="Organization"
+          source="vpc_id"
+          reference="vpcs"
+          link="show"
+        />
+        {flags["security-groups"] && (
+          <ReferenceField
+            label="Security Group"
+            source="security_group_id"
+            reference="security-groups"
+            // We can't deep link to security groups yet...
+            // link={(record) =>{
+            //   return `/_security-groups/${record.id}`
+            // }}
+          />
+        )}
+        {flags["devices"] && (
+          <ReferenceField
+            label="Device"
+            source="device_id"
+            reference="devices"
+            link="show"
+          />
+        )}
+        <BooleanField label="Single Use" source="device_id" looseValue={true} />
+        <DateField label="Expiration" source="expiration" showTime={true} />
+        <TextField label="Description" source="description" />
+        {/*
+        <JsonField label="Settings" source="settings" />
+        */}
+      </SimpleShowLayout>
+    </Show>
+  );
+};
 
 export const RegKeyCreate = () => {
+  const flags = useFlags();
   const { identity, isLoading, error } = useGetIdentity();
   if (isLoading || error) {
     return <div />;
@@ -111,13 +122,15 @@ export const RegKeyCreate = () => {
         <ReferenceInput name="vpc_id" source="vpc_id" reference="vpcs">
           <AutocompleteInput fullWidth />
         </ReferenceInput>
-        <ReferenceInput
-          name="security_group_id"
-          source="security_group_id"
-          reference="security-groups"
-        >
-          <AutocompleteInput fullWidth />
-        </ReferenceInput>
+        {flags["security-groups"] && (
+          <ReferenceInput
+            name="security_group_id"
+            source="security_group_id"
+            reference="security-groups"
+          >
+            <AutocompleteInput fullWidth />
+          </ReferenceInput>
+        )}
         <BooleanInput
           label="Single Use"
           name="single_use"
@@ -130,19 +143,22 @@ export const RegKeyCreate = () => {
           source="expiration"
           fullWidth
         />
+        {/*
         <JsonInput
           label="Settings"
           name="settings"
           source="settings"
           fullWidth
           multiline={true}
         />
+        */}
       </SimpleForm>
     </Create>
   );
 };
 
 export const RegKeyEdit = () => {
+  const flags = useFlags();
   const { identity, isLoading, error } = useGetIdentity();
   if (isLoading || error) {
     return <div />;
@@ -156,13 +172,15 @@ export const RegKeyEdit = () => {
           source="description"
           fullWidth
         />
-        <ReferenceInput
-          name="security_group_id"
-          source="security_group_id"
-          reference="security-groups"
-        >
-          <AutocompleteInput fullWidth />
-        </ReferenceInput>
+        {flags["security-groups"] && (
+          <ReferenceInput
+            name="security_group_id"
+            source="security_group_id"
+            reference="security-groups"
+          >
+            <AutocompleteInput fullWidth />
+          </ReferenceInput>
+        )}
         <BooleanInput
           label="Single Use"
           name="single_use"
@@ -175,13 +193,15 @@ export const RegKeyEdit = () => {
           source="expiration"
           fullWidth
         />
+        {/*
         <JsonInput
           label="Settings"
           name="settings"
           source="settings"
           fullWidth
           multiline={true}
         />
+        */}
       </SimpleForm>
     </Edit>
   );