ui/about: About page doc links and flag names (#2689)

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

@@ -1,5 +1,7 @@
 import { Box, FormControl, FormLabel, Switch, Text } from "@fidesui/react";
 
+import { camelToSentenceCase } from "~/features/common/utils";
+
 import { FLAG_CONFIG, FLAG_NAMES } from "./features.slice";
 import { FlagValue } from "./types";
 
@@ -27,7 +29,9 @@ export const FlagControl = ({
   return (
     <FormControl display="contents">
       <Box>
-        <FormLabel htmlFor={`flag-${flag}`}>{flag}</FormLabel>
+        <FormLabel htmlFor={`flag-${flag}`} title={flag}>
+          {camelToSentenceCase(flag)}
+        </FormLabel>
       </Box>
 
       <Box>

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

@@ -3,6 +3,25 @@ import { format } from "date-fns-tz";
 export const capitalize = (text: string): string =>
   text.replace(/^\w/, (c) => c.toUpperCase());
 
+/**
+ * "Fun On A Bun" => "Fun on a bun"
+ * "fun on a bun" => "Fun on a bun"
+ */
+export const sentenceCase = (text: string) => {
+  const lower = text.toLocaleLowerCase();
+  const init = lower.substring(0, 1);
+  const rest = lower.substring(1);
+  return `${init.toLocaleUpperCase()}${rest}`;
+};
+
+/**
+ * "funOnABun" => "Fun on a bun"
+ */
+export const camelToSentenceCase = (text: string) => {
+  const withSpaces = text.replaceAll(/([a-z])([A-Z])/g, "$1 $2");
+  return sentenceCase(withSpaces);
+};
+
 export const debounce = (fn: Function, ms = 0) => {
   let timeoutId: ReturnType<typeof setTimeout>;
   // eslint-disable-next-line func-names

clients/admin-ui/src/features/system/DataFlowsAccordionItem.tsx

@@ -12,6 +12,7 @@ import { useFormikContext } from "formik";
 import { ReactNode } from "react";
 
 import { useAppSelector } from "~/app/hooks";
+import { sentenceCase } from "~/features/common/utils";
 import { initialDataCategories } from "~/features/plus/helpers";
 import {
   selectDataCategories,
@@ -133,9 +134,7 @@ const DataFlowsAccordionItem = ({ classifyDataFlows, type }: Props) => {
     <AccordionItem p={0} data-testid={`accordion-item-${type}`}>
       <AccordionItemContents
         headingLevel="h2"
-        title={`Connected ${
-          typeLabel[0].toLocaleUpperCase() + typeLabel.slice(1)
-        } Systems`}
+        title={`Connected ${sentenceCase(typeLabel)} Systems`}
       >
         {flows.map((flow, idx) => (
           <DataFlowAccordionItem

clients/admin-ui/src/pages/management/about.tsx

@@ -64,14 +64,27 @@ const About: NextPage = () => {
 
         <Box>
           <Text fontSize="sm">
-            Please visit docs.ethyca.com for more information on these features.
+            Please visit{" "}
+            <Link
+              color="complimentary.500"
+              href="https://docs.ethyca.com/fides/overview"
+              isExternal
+            >
+              docs.ethyca.com
+            </Link>{" "}
+            for more information on these features.
           </Text>
 
           <Text fontSize="sm">
             For questions and feedback, please join us at{" "}
-            <Link href="fidescommunity.slack.com" isExternal>
+            <Link
+              color="complimentary.500"
+              href="https://fidescommunity.slack.com"
+              isExternal
+            >
               fidescommunity.slack.com
             </Link>
+            .
           </Text>
         </Box>
       </Flex>