PROD-1667 Link properties and experiences

.fides/db_dataset.yml

@@ -2047,3 +2047,15 @@ dataset:
       data_categories: [system.operations]
     - name: updated_at
       data_categories: [system.operations]  
+  - name: plus_privacy_experience_config_property
+    fields:
+    - name: id
+      data_categories: [system.operations]
+    - name: privacy_experience_config_id
+      data_categories: [system.operations] 
+    - name: property_id
+      data_categories: [system.operations]
+    - name: created_at
+      data_categories: [system.operations]
+    - name: updated_at
+      data_categories: [system.operations] 

clients/admin-ui/cypress/fixtures/privacy-experiences/list.json

@@ -20,7 +20,8 @@
       "version": 3.0,
       "created_at": "2023-05-30T23:42:10.300484+00:00",
       "updated_at": "2023-05-31T00:28:24.694384+00:00",
-      "regions": []
+      "regions": [],
+      "properties": []
     },
     {
       "name": "notice disabled test",
@@ -42,7 +43,8 @@
       "version": 2.0,
       "created_at": "2023-05-30T23:40:11.459287+00:00",
       "updated_at": "2023-05-31T00:39:29.906976+00:00",
-      "regions": ["us_ca"]
+      "regions": ["us_ca"],
+      "properties": [{ "id": 1, "name": "Property A" }]
     }
   ],
   "total": 2,

clients/admin-ui/cypress/fixtures/properties/properties.json

@@ -3,12 +3,14 @@
     {
       "name": "Property A",
       "type": "Website",
-      "key": "property_a"
+      "id": "FDS-CEA9EV",
+      "experiences": [{ "id": 1, "name": "US Privacy Center" }]
     },
     {
       "name": "Property B",
-      "type": "Other",
-      "key": "property_b"
+      "type": "Website",
+      "id": "FDS-Z21I5X",
+      "experiences": [{ "id": 1, "name": "US Privacy Center" }]
     }
   ],
   "total": 2,

clients/admin-ui/src/app/store.ts

@@ -36,6 +36,7 @@ import { languageSlice } from "~/features/privacy-experience/language.slice";
 import { privacyExperienceConfigSlice } from "~/features/privacy-experience/privacy-experience.slice";
 import { privacyNoticesSlice } from "~/features/privacy-notices/privacy-notices.slice";
 import { subjectRequestsSlice } from "~/features/privacy-requests";
+import { propertySlice } from "~/features/properties";
 import { systemSlice } from "~/features/system";
 import { dictSuggestionsSlice } from "~/features/system/dictionary-form/dict-suggestion.slice";
 import { taxonomySlice } from "~/features/taxonomy";
@@ -84,6 +85,7 @@ const reducer = {
   [organizationSlice.name]: organizationSlice.reducer,
   [privacyNoticesSlice.name]: privacyNoticesSlice.reducer,
   [privacyExperienceConfigSlice.name]: privacyExperienceConfigSlice.reducer,
+  [propertySlice.name]: propertySlice.reducer,
   [subjectRequestsSlice.name]: subjectRequestsSlice.reducer,
   [systemSlice.name]: systemSlice.reducer,
   [taxonomySlice.name]: taxonomySlice.reducer,

clients/admin-ui/src/features/custom-assets/CustomAssetUploadButton.tsx

@@ -18,7 +18,7 @@ const CustomAssetUploadButton: React.FC<CustomAssetUploadButtonProps> = ({
     <>
       <Button
         variant="outline"
-        size="sm"
+        size="xs"
         ml={2}
         onClick={uploadCustomAssetModal.onOpen}
       >

clients/admin-ui/src/features/privacy-experience/JavaScriptTag.tsx

@@ -50,7 +50,7 @@ const JavaScriptTag = () => {
       <Button
         onClick={modal.onOpen}
         variant="outline"
-        size="sm"
+        size="xs"
         rightIcon={<CopyIcon />}
         data-testid="js-tag-btn"
       >

clients/admin-ui/src/features/privacy-experience/NewJavaScriptTag.tsx

@@ -21,7 +21,7 @@ import { Property } from "~/types/api";
 
 const PRIVACY_CENTER_HOSTNAME_TEMPLATE = "{privacy-center-hostname-and-path}";
 const PROPERTY_UNIQUE_ID_TEMPLATE = "{property-unique-id}";
-const FIDES_JS_SCRIPT_TEMPLATE = `<script src="https://${PRIVACY_CENTER_HOSTNAME_TEMPLATE}/fides.js?${PROPERTY_UNIQUE_ID_TEMPLATE}"></script>`;
+const FIDES_JS_SCRIPT_TEMPLATE = `<script src="https://${PRIVACY_CENTER_HOSTNAME_TEMPLATE}/fides.js?property_id=${PROPERTY_UNIQUE_ID_TEMPLATE}"></script>`;
 const FIDES_GTM_SCRIPT_TAG = "<script>Fides.gtm()</script>";
 
 interface Props {
@@ -43,7 +43,7 @@ const NewJavaScriptTag = ({ property }: Props) => {
   const fidesJsScriptTag = useMemo(() => {
     const script = FIDES_JS_SCRIPT_TEMPLATE.replace(
       PROPERTY_UNIQUE_ID_TEMPLATE,
-      property.key!.toString()
+      property.id.toString()
     );
     if (isFidesCloud && isSuccess && fidesCloudConfig?.privacy_center_url) {
       script.replace(

clients/admin-ui/src/features/privacy-experience/PrivacyExperienceForm.tsx

@@ -34,6 +34,12 @@ import {
   selectPageSize as selectNoticePageSize,
   useGetAllPrivacyNoticesQuery,
 } from "~/features/privacy-notices/privacy-notices.slice";
+import {
+  selectAllProperties,
+  selectPage as selectPropertyPage,
+  selectPageSize as selectPropertyPageSize,
+  useGetAllPropertiesQuery,
+} from "~/features/properties/property.slice";
 import {
   ComponentType,
   ExperienceConfigCreate,
@@ -109,6 +115,11 @@ export const PrivacyExperienceForm = ({
     return `${name}${t.is_default ? " (Default)" : ""}`;
   };
 
+  const propertyPage = useAppSelector(selectPropertyPage);
+  const propertyPageSize = useAppSelector(selectPropertyPageSize);
+  useGetAllPropertiesQuery({ page: propertyPage, size: propertyPageSize });
+  const allProperties = useAppSelector(selectAllProperties);
+
   if (editingStyle) {
     return (
       <>
@@ -176,6 +187,19 @@ export const PrivacyExperienceForm = ({
           />
         </Box>
       </Collapse>
+      <ScrollableList
+        label="Associated properties"
+        addButtonLabel="Add property"
+        idField="id"
+        nameField="name"
+        allItems={allProperties.map((property) => ({
+          id: property.id,
+          name: property.name,
+        }))}
+        values={values.properties ?? []}
+        setValues={(newValues) => setFieldValue("properties", newValues)}
+        draggable
+      />
       <Divider />
       <Heading fontSize="md" fontWeight="semibold">
         Privacy notices

clients/admin-ui/src/features/privacy-experience/PrivacyExperiencesTable.tsx

@@ -153,6 +153,26 @@ export const PrivacyExperiencesTable = () => {
             showHeaderMenu: true,
           },
         }),
+        columnHelper.accessor(
+          (row) => row.properties.map((property) => property.name),
+          {
+            id: "properties",
+            cell: (props) => (
+              <GroupCountBadgeCell
+                suffix="Properties"
+                value={props.getValue()}
+                {...props}
+              />
+            ),
+            header: (props) => (
+              <DefaultHeaderCell value="Properties" {...props} />
+            ),
+            meta: {
+              displayText: "Properties",
+              showHeaderMenu: true,
+            },
+          }
+        ),
         columnHelper.accessor((row) => row.updated_at, {
           id: "updated_at",
           cell: (props) => (

clients/admin-ui/src/features/privacy-experience/privacy-experience.slice.ts

@@ -84,7 +84,7 @@ const privacyExperienceConfigApi = baseApi.injectEndpoints({
           body,
         };
       },
-      invalidatesTags: () => ["Privacy Experience Configs"],
+      invalidatesTags: () => ["Privacy Experience Configs", "Property"],
     }),
     limitedPatchExperienceConfig: build.mutation<
       ExperienceConfigResponse,
@@ -114,7 +114,7 @@ const privacyExperienceConfigApi = baseApi.injectEndpoints({
         url: `experience-config/`,
         body: payload,
       }),
-      invalidatesTags: () => ["Privacy Experience Configs"],
+      invalidatesTags: () => ["Privacy Experience Configs", "Property"],
     }),
   }),
 });
@@ -137,6 +137,7 @@ export const { reducer } = privacyExperienceConfigSlice;
 
 const selectPrivacyExperienceConfig = (state: RootState) =>
   state.privacyExperienceConfig;
+
 export const selectPage = createSelector(
   selectPrivacyExperienceConfig,
   (state) => state.page

clients/admin-ui/src/features/properties/PropertiesTable.tsx

@@ -12,6 +12,7 @@ import {
   DefaultHeaderCell,
   FidesTableV2,
   GlobalFilterV2,
+  GroupCountBadgeCell,
   PaginationBar,
   TableActionBar,
   TableSkeletonLoader,
@@ -21,11 +22,12 @@ import _ from "lodash";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
 
+import { PROPERTIES_ROUTE } from "~/features/common/nav/v2/routes";
+import Restrict, { useHasPermission } from "~/features/common/Restrict";
 import { useGetHealthQuery } from "~/features/plus/plus.slice";
-import { useGetPropertiesQuery } from "~/features/properties/property.slice";
-import { Page_Property_, Property } from "~/types/api";
+import { useGetAllPropertiesQuery } from "~/features/properties/property.slice";
+import { Page_Property_, Property, ScopeRegistryEnum } from "~/types/api";
 
-import { PROPERTIES_ROUTE } from "../common/nav/v2/routes";
 import AddPropertyButton from "./AddPropertyButton";
 import PropertyActions from "./PropertyActions";
 
@@ -54,17 +56,21 @@ const EmptyTableNotice = () => (
       <Text fontSize="md" fontWeight="600">
         No properties found.
       </Text>
-      <Text fontSize="sm">
-        Click “Add property” to add your first property to Fides.
-      </Text>
+      <Restrict scopes={[ScopeRegistryEnum.PROPERTY_CREATE]}>
+        <Text fontSize="sm">
+          Click “Add property” to add your first property to Fides.
+        </Text>
+        <AddPropertyButton buttonLabel="Add property" buttonVariant="primary" />
+      </Restrict>
     </VStack>
-    <AddPropertyButton buttonLabel="Add property" buttonVariant="primary" />
   </VStack>
 );
 
 export const PropertiesTable = () => {
   const { isLoading: isLoadingHealthCheck } = useGetHealthQuery();
 
+  const userCanUpdate = useHasPermission([ScopeRegistryEnum.PROPERTY_UPDATE]);
+
   const {
     PAGE_SIZES,
     pageSize,
@@ -91,9 +97,9 @@ export const PropertiesTable = () => {
     isFetching,
     isLoading,
     data: properties,
-  } = useGetPropertiesQuery({
-    pageIndex,
-    pageSize,
+  } = useGetAllPropertiesQuery({
+    page: pageIndex,
+    size: pageSize,
     search: globalFilter,
   });
 
@@ -119,6 +125,21 @@ export const PropertiesTable = () => {
         cell: (props) => <DefaultCell value={_.capitalize(props.getValue())} />,
         header: (props) => <DefaultHeaderCell value="Type" {...props} />,
       }),
+      columnHelper.accessor((row) => row.experiences.map((exp) => exp.name), {
+        id: "experiences",
+        cell: (props) => (
+          <GroupCountBadgeCell
+            suffix="experiences"
+            value={props.getValue()}
+            {...props}
+          />
+        ),
+        header: (props) => <DefaultHeaderCell value="Experience" {...props} />,
+        meta: {
+          displayText: "Experience",
+          showHeaderMenu: true,
+        },
+      }),
       columnHelper.display({
         id: "actions",
         header: "Actions",
@@ -141,7 +162,9 @@ export const PropertiesTable = () => {
   });
 
   const onRowClick = (property: Property) => {
-    router.push(`${PROPERTIES_ROUTE}/${property.key}`);
+    if (userCanUpdate) {
+      router.push(`${PROPERTIES_ROUTE}/${property.id}`);
+    }
   };
 
   if (isLoading || isLoadingHealthCheck) {
@@ -157,10 +180,12 @@ export const PropertiesTable = () => {
             placeholder="Search property"
           />
           <HStack alignItems="center" spacing={4}>
-            <AddPropertyButton
-              buttonLabel="Add property"
-              buttonVariant="outline"
-            />
+            <Restrict scopes={[ScopeRegistryEnum.PROPERTY_CREATE]}>
+              <AddPropertyButton
+                buttonLabel="Add property"
+                buttonVariant="outline"
+              />
+            </Restrict>
           </HStack>
         </TableActionBar>
         <FidesTableV2

clients/admin-ui/src/features/properties/PropertyActions.tsx

@@ -2,10 +2,10 @@ import { Box, EditIcon, IconButton } from "@fidesui/react";
 import { useRouter } from "next/router";
 import React from "react";
 
-import { Property } from "~/types/api";
-
-import { PROPERTIES_ROUTE } from "../common/nav/v2/routes";
-import NewJavaScriptTag from "../privacy-experience/NewJavaScriptTag";
+import { PROPERTIES_ROUTE } from "~/features/common/nav/v2/routes";
+import Restrict from "~/features/common/Restrict";
+import NewJavaScriptTag from "~/features/privacy-experience/NewJavaScriptTag";
+import { Property, ScopeRegistryEnum } from "~/types/api";
 
 interface Props {
   property: Property;
@@ -15,20 +15,25 @@ const PropertyActions = ({ property }: Props) => {
   const router = useRouter();
 
   const handleEdit = () => {
-    router.push(`${PROPERTIES_ROUTE}/${property.key}`);
+    router.push(`${PROPERTIES_ROUTE}/${property.id}`);
   };
 
   return (
     <Box py={2}>
       <NewJavaScriptTag property={property} />
-      <IconButton
-        aria-label="Edit property"
-        variant="outline"
-        size="xs"
-        marginRight="10px"
-        icon={<EditIcon />}
-        onClick={handleEdit}
-      />
+      <Restrict scopes={[ScopeRegistryEnum.PROPERTY_UPDATE]}>
+        <IconButton
+          aria-label="Edit property"
+          variant="outline"
+          size="xs"
+          marginRight="10px"
+          icon={<EditIcon />}
+          onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+            e.stopPropagation();
+            handleEdit();
+          }}
+        />
+      </Restrict>
     </Box>
   );
 };