update encrypted value display on detail and form views

awx/ui_next/src/components/DetailList/Detail.jsx

@@ -14,7 +14,7 @@ const DetailName = styled(({ fullWidth, ...props }) => (
   `}
 `;
 
-const DetailValue = styled(({ fullWidth, ...props }) => (
+const DetailValue = styled(({ fullWidth, isEncrypted, ...props }) => (
   <TextListItem {...props} />
 ))`
   word-break: break-all;
@@ -23,6 +23,11 @@ const DetailValue = styled(({ fullWidth, ...props }) => (
     `
     grid-column: 2 / -1;
   `}
+  ${props => props.isEncrypted &&
+    `
+    text-transform: uppercase
+    color: var(--pf-global--Color--400);
+  `}
 `;
 
 const Detail = ({
@@ -32,6 +37,7 @@ const Detail = ({
   className,
   dataCy,
   alwaysVisible,
+  isEncrypted
 }) => {
   if (!value && typeof value !== 'number' && !alwaysVisible) {
     return null;
@@ -55,6 +61,7 @@ const Detail = ({
         component={TextListItemVariants.dd}
         fullWidth={fullWidth}
         data-cy={valueCy}
+        isEncrypted={isEncrypted}
       >
         {value}
       </DetailValue>

awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx

@@ -70,7 +70,7 @@ function CredentialDetail({ i18n, credential }) {
     setHasContentLoading(false);
   };
 
-  const renderDetail = ({ id, label, type, secret }) => {
+  const renderDetail = ({ id, label, type }) => {
     let detail;
 
     if (type === 'boolean') {
@@ -81,8 +81,9 @@ function CredentialDetail({ i18n, credential }) {
           value={<List>{inputs[id] && <ListItem>{label}</ListItem>}</List>}
         />
       );
-    } else if (secret === true) {
+    } else if (inputs[id] === '$encrypted$') {
-      detail = null;
+      const isEncrypted = true;
+      detail = <Detail key={id} label={label} value={i18n._(t`Encrypted`)} isEncrypted={isEncrypted} />;
     } else {
       detail = <Detail key={id} label={label} value={inputs[id]} />;
     }