Add back "add vendor" buttons and styling fixes (#4499)

ethyca · Dec 8, 2023 · 31197fe · 31197fe
1 parent d4c01e6
commit 31197fe
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 13 deletions.
diff --git a/clients/admin-ui/src/features/common/nav/v2/nav-config.ts b/clients/admin-ui/src/features/common/nav/v2/nav-config.ts
@@ -93,7 +93,7 @@ export const NAV_CONFIG: NavConfigGroup[] = [
     title: "Consent",
     routes: [
       {
-        title: "Configure consent",
+        title: "Vendors",
         path: routes.CONFIGURE_CONSENT_ROUTE,
         requiresFlag: "configureConsent",
         requiresPlus: true,

diff --git a/clients/admin-ui/src/features/common/table/v2/cells.tsx b/clients/admin-ui/src/features/common/table/v2/cells.tsx
@@ -26,7 +26,15 @@ export const BadgeCell = ({
   suffix?: string;
 }) => (
   <Flex alignItems="center" height="100%" mr="2">
-    <Badge textTransform="none">
+    <Badge
+      textTransform="none"
+      fontWeight="400"
+      fontSize="xs"
+      lineHeight={4}
+      color="gray.600"
+      px={2}
+      py={1}
+    >
       {value}
       {suffix ? ` ${suffix}` : null}
     </Badge>

diff --git a/clients/admin-ui/src/features/configure-consent/ConsentMangagementTable.tsx b/clients/admin-ui/src/features/configure-consent/ConsentMangagementTable.tsx
@@ -180,15 +180,15 @@ export const ConsentManagementTable = () => {
         cell: (props) => (
           <BadgeCell suffix="data uses" value={props.getValue()} />
         ),
-        header: (props) => <DefaultHeaderCell value="Data uses" {...props} />,
+        header: (props) => <DefaultHeaderCell value="Data use" {...props} />,
         meta: {
           width: "175px",
         },
       }),
       columnHelper.accessor((row) => row.legal_bases, {
         id: "legal_bases",
         cell: (props) => <BadgeCell suffix="bases" value={props.getValue()} />,
-        header: (props) => <DefaultHeaderCell value="Legal bases" {...props} />,
+        header: (props) => <DefaultHeaderCell value="Legal basis" {...props} />,
         meta: {
           width: "175px",
         },

diff --git a/clients/admin-ui/src/pages/consent/configure/index.tsx b/clients/admin-ui/src/pages/consent/configure/index.tsx
@@ -1,19 +1,40 @@
-import { Box, Breadcrumb, BreadcrumbItem, Heading, Text } from "@fidesui/react";
+import {
+  Box,
+  Breadcrumb,
+  BreadcrumbItem,
+  Flex,
+  Heading,
+  Spacer,
+  Text,
+} from "@fidesui/react";
 import { useFeatures } from "common/features";
 import NextLink from "next/link";
 import React from "react";
 
 import FixedLayout from "~/features/common/FixedLayout";
 import Layout from "~/features/common/Layout";
 import { CONFIGURE_CONSENT_ROUTE } from "~/features/common/nav/v2/routes";
+import AddVendor from "~/features/configure-consent/AddVendor";
 import ConfigureConsent from "~/features/configure-consent/ConfigureConsent";
 import { ConsentManagementTable } from "~/features/configure-consent/ConsentMangagementTable";
 
-const ConsentMetadata = () => (
+type Props = {
+  includeAddVendors?: boolean;
+  title: string;
+  breadCrumbText: string;
+  description: string;
+};
+
+const ConsentMetadata: React.FC<Props> = ({
+  includeAddVendors,
+  title,
+  breadCrumbText,
+  description,
+}) => (
   <>
     <Box mb={4}>
       <Heading fontSize="2xl" fontWeight="semibold" mb={2} data-testid="header">
-        Configure consent
+        {title}
       </Heading>
       <Box>
         <Breadcrumb
@@ -26,14 +47,22 @@ const ConsentMetadata = () => (
             <NextLink href={CONFIGURE_CONSENT_ROUTE}>Consent</NextLink>
           </BreadcrumbItem>
           <BreadcrumbItem color="complimentary.500">
-            <NextLink href="#">Configure consent</NextLink>
+            <NextLink href="#">{breadCrumbText}</NextLink>
           </BreadcrumbItem>
         </Breadcrumb>
       </Box>
     </Box>
-    <Text fontSize="sm" mb={8} width={{ base: "100%", lg: "50%" }}>
-      Your current cookies and tracking information.
-    </Text>
+    <Flex>
+      <Text fontSize="sm" mb={8} width={{ base: "100%", lg: "50%" }}>
+        {description}
+      </Text>
+      {includeAddVendors ? (
+        <>
+          <Spacer />
+          <AddVendor />
+        </>
+      ) : null}
+    </Flex>
   </>
 );
 
@@ -49,15 +78,24 @@ const ConfigureConsentPage = () => {
           paddingRight: "48px",
         }}
       >
-        <ConsentMetadata />
+        <ConsentMetadata
+          includeAddVendors
+          title="Manage your vendors"
+          breadCrumbText="Vendors"
+          description="Use the table below to manage your vendors. Modify the legal basis for a vendor if permitted and view and group your views by applying different filters"
+        />
         <ConsentManagementTable />
       </FixedLayout>
     );
   }
 
   return (
     <Layout title="Configure consent">
-      <ConsentMetadata />
+      <ConsentMetadata
+        title="Configure consent"
+        breadCrumbText="Configure consent"
+        description="Your current cookies and tracking information."
+      />
       <ConfigureConsent />
     </Layout>
   );