Display policy key on request details page (#2395)

CHANGELOG.md

@@ -32,6 +32,7 @@ The types of changes are:
 * Unified Fides Resources: Updated test env setup and quickstart to use new endpoints [#2225](https://github.com/ethyca/fides/pull/2225)
 * Update fideslang to 1.3.3 [#2343](https://github.com/ethyca/fides/pull/2343)
 * Display the request type instead of the policy name on the request table [#2382](https://github.com/ethyca/fides/pull/2382)
+* Display the policy key on the request details page [#2395](https://github.com/ethyca/fides/pull/2395)
 
 ### Developer Experience
 

clients/admin-ui/src/features/privacy-requests/RequestDetails.tsx

@@ -1,4 +1,4 @@
-import { Box, Divider, Flex, Heading, HStack, Text } from "@fidesui/react";
+import { Box, Divider, Flex, Heading, HStack, Tag, Text } from "@fidesui/react";
 import DaysLeftTag from "common/DaysLeftTag";
 import { PrivacyRequestEntity } from "privacy-requests/types";
 
@@ -47,6 +47,16 @@ const RequestDetails = ({ subjectRequest }: RequestDetailsProps) => {
           <RequestType rules={policy.rules} />
         </Box>
       </Flex>
+      <Flex>
+        <Text mb={4} mr={2} fontSize="sm" color="gray.900" fontWeight="500">
+          Policy key:
+        </Text>
+        <Box>
+          <Tag color="white" bg="primary.400" fontWeight="medium" fontSize="sm">
+            {subjectRequest.policy.key}
+          </Tag>
+        </Box>
+      </Flex>
       <Flex alignItems="flex-start">
         <Text mb={4} mr={2} fontSize="sm" color="gray.900" fontWeight="500">
           Status: