[2159] "About Fides" page for features and version info

clients/admin-ui/src/features/common/CommonSubscriptions.tsx

@@ -1,12 +1,14 @@
+import { useGetHealthQuery } from "~/features/common/health.slice";
 import {
   INITIAL_CONNECTIONS_FILTERS,
   useGetAllDatastoreConnectionsQuery,
 } from "~/features/datastore-connections/datastore-connection.slice";
-import { useGetHealthQuery } from "~/features/plus/plus.slice";
+import { useGetHealthQuery as useGetPlusHealthQuery } from "~/features/plus/plus.slice";
 import { useGetAllSystemsQuery } from "~/features/system/system.slice";
 
 const useCommonSubscriptions = () => {
   useGetHealthQuery();
+  useGetPlusHealthQuery();
   useGetAllSystemsQuery();
   useGetAllDatastoreConnectionsQuery(INITIAL_CONNECTIONS_FILTERS);
 };

clients/admin-ui/src/features/common/Header.tsx

@@ -10,7 +10,6 @@ import {
   QuestionIcon,
   Stack,
   Text,
-  useDisclosure,
   UserIcon,
 } from "@fidesui/react";
 import NextLink from "next/link";
@@ -19,26 +18,18 @@ import { useDispatch, useSelector } from "react-redux";
 
 import { INDEX_ROUTE } from "~/constants";
 import { logout, selectUser, useLogoutMutation } from "~/features/auth";
-import { useFeatures } from "~/features/common/features";
-import FeaturesPanel from "~/features/common/features/FeaturesPanel";
-import { useGetHealthQuery } from "~/features/common/health.slice";
 import Image from "~/features/common/Image";
 
 const useHeader = () => {
   const { username } = useSelector(selectUser) ?? { username: "" };
-  const { data } = useGetHealthQuery();
-  return { username, versionNumber: data ? data.version : undefined };
+  return { username };
 };
 
 const Header: React.FC = () => {
-  const features = useFeatures();
-
-  const { username, versionNumber } = useHeader();
+  const { username } = useHeader();
   const [logoutMutation] = useLogoutMutation();
   const dispatch = useDispatch();
 
-  const featuresPanelDisclosure = useDisclosure();
-
   const handleLogout = async () => {
     logoutMutation({})
       .unwrap()
@@ -69,40 +60,14 @@ const Header: React.FC = () => {
                 size="sm"
                 variant="ghost"
                 data-testid="header-menu-button"
-                onDoubleClick={() => featuresPanelDisclosure.onOpen()}
               >
                 <UserIcon color="gray.700" />
               </MenuButton>
               <MenuList shadow="xl">
                 <Stack px={3} py={2} spacing={1}>
                   <Text fontWeight="medium">{username}</Text>
-                  {/* This text should only show if actually an admin */}
-                  {/* <Text fontSize="sm" color="gray.600">
-              Administrator
-            </Text> */}
-                  {versionNumber ? (
-                    <Text fontWeight="light" color="gray.600">
-                      Fides {versionNumber}
-                    </Text>
-                  ) : null}
                 </Stack>
 
-                {features.flags.featuresPanel ? (
-                  <>
-                    <MenuDivider />
-
-                    <MenuItem
-                      _focus={{ color: "complimentary.500", bg: "gray.100" }}
-                      onClick={() => featuresPanelDisclosure.onOpen()}
-                    >
-                      Features
-                      <Text as="i" ml={2}>
-                        Beta
-                      </Text>{" "}
-                    </MenuItem>
-                  </>
-                ) : null}
-
                 <MenuDivider />
                 <MenuItem
                   _focus={{ color: "complimentary.500", bg: "gray.100" }}
@@ -128,7 +93,6 @@ const Header: React.FC = () => {
           )}
         </Flex>
       </Flex>
-      <FeaturesPanel {...featuresPanelDisclosure} />
     </header>
   );
 };

clients/admin-ui/src/features/common/features/FlagControl.tsx

@@ -0,0 +1,50 @@
+import { Box, FormControl, FormLabel, Switch, Text } from "@fidesui/react";
+
+import { FLAG_NAMES } from "./features.slice";
+import { FlagValue } from "./types";
+
+export const FlagControl = ({
+  flag,
+  value,
+  defaultValue,
+  override,
+}: {
+  flag: typeof FLAG_NAMES[number];
+  value: FlagValue;
+  defaultValue: FlagValue;
+  override: (args: { flag: typeof FLAG_NAMES[number]; value: boolean }) => void;
+}) => {
+  if (typeof value !== "boolean") {
+    // Only supporting modifying boolean flags for now.
+    return (
+      <>
+        <Text>{flag}</Text>
+        <Text>{value}</Text>
+      </>
+    );
+  }
+
+  return (
+    <FormControl display="contents">
+      <Box>
+        <FormLabel htmlFor={`flag-${flag}`}>{flag}</FormLabel>
+      </Box>
+
+      <Box>
+        <Switch
+          colorScheme={value !== defaultValue ? "yellow" : "blue"}
+          id={`flag-${flag}`}
+          isChecked={value}
+          onChange={() =>
+            override({
+              flag,
+              value: !value,
+            })
+          }
+        />
+      </Box>
+    </FormControl>
+  );
+};
+
+export default FlagControl;

clients/admin-ui/src/features/common/features/features.slice.ts

@@ -3,8 +3,9 @@ import { useCallback, useMemo } from "react";
 
 import { useAppDispatch, useAppSelector } from "~/app/hooks";
 import { type RootState } from "~/app/store";
+import { selectHealth } from "~/features/common/health.slice";
 import { selectInitialConnections } from "~/features/datastore-connections";
-import { selectHealth } from "~/features/plus/plus.slice";
+import { selectHealth as selectPlusHealth } from "~/features/plus/plus.slice";
 import { selectAllSystems } from "~/features/system";
 import flagDefaults from "~/flags.json";
 
@@ -105,6 +106,7 @@ export const useFlags = () => {
 };
 
 export type Features = {
+  version: string | undefined;
   plus: boolean;
   systemsCount: number;
   connectionsCount: number;
@@ -115,11 +117,16 @@ export type Features = {
 
 export const useFeatures = (): Features => {
   const health = useAppSelector(selectHealth);
+  const plusHealth = useAppSelector(selectPlusHealth);
   const allSystems = useAppSelector(selectAllSystems);
   const initialConnections = useAppSelector(selectInitialConnections);
 
-  const plus = health !== undefined;
-  const dataFlowScanning = health ? !!health.system_scanner.enabled : false;
+  const version = health?.version;
+
+  const plus = plusHealth !== undefined;
+  const dataFlowScanning = plusHealth
+    ? !!plusHealth.system_scanner.enabled
+    : false;
 
   const systemsCount = allSystems?.length ?? 0;
 
@@ -128,6 +135,7 @@ export const useFeatures = (): Features => {
   const { flags } = useFlags();
 
   return {
+    version,
     plus,
     systemsCount,
     connectionsCount,

clients/admin-ui/src/features/common/nav/v2/nav-config.test.ts

@@ -18,6 +18,7 @@ describe("configureNavGroups", () => {
       children: [
         { title: "Taxonomy", path: "/taxonomy" },
         { title: "Users", path: "/user-management" },
+        { title: "About Fides", path: "/management/about" },
       ],
     });
   });

clients/admin-ui/src/features/common/nav/v2/nav-config.ts

@@ -51,6 +51,7 @@ export const NAV_CONFIG: NavConfigGroup[] = [
     routes: [
       { title: "Taxonomy", path: "/taxonomy" },
       { title: "Users", path: "/user-management" },
+      { title: "About Fides", path: "/management/about" },
     ],
   },
 ];

clients/admin-ui/src/flags.json

@@ -4,11 +4,6 @@
     "test": true,
     "production": true
   },
-  "featuresPanel": {
-    "development": true,
-    "test": true,
-    "production": false
-  },
   "configWizardStepper": {
     "development": true,
     "test": false,