Merge pull request #7281 from mabashian/7127-cred-input-details

Updates credential details to support plugin and prompt fields

Reviewed-by: John Hill <johill@redhat.com>
             https://github.com/unlikelyzero

awx/ui_next/src/api/models/Credentials.js

@@ -20,10 +20,38 @@ class Credentials extends Base {
     return this.http.options(`${this.baseUrl}${id}/access_list/`);
   }
 
-  readInputSources(id, params) {
+  readInputSources(id) {
-    return this.http.get(`${this.baseUrl}${id}/input_sources/`, {
+    const maxRequests = 5;
-      params,
+    let requestCounter = 0;
+    const fetchInputSources = async (pageNo = 1, inputSources = []) => {
+      try {
+        requestCounter++;
+        const { data } = await this.http.get(
+          `${this.baseUrl}${id}/input_sources/`,
+          {
+            params: {
+              page: pageNo,
+              page_size: 200,
+            },
+          }
+        );
+        if (data?.next && requestCounter <= maxRequests) {
+          return fetchInputSources(
+            pageNo + 1,
+            inputSources.concat(data.results)
+          );
+        }
+        return Promise.resolve({
+          data: {
+            results: inputSources.concat(data.results),
+          },
         });
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    };
+
+    return fetchInputSources();
   }
 
   test(id, data) {

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

@@ -1,9 +1,9 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { Fragment, useEffect, useCallback } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { shape } from 'prop-types';
-
+import styled from 'styled-components';
 import { Button, List, ListItem } from '@patternfly/react-core';
 import AlertModal from '../../../components/AlertModal';
 import { CardBody, CardActionsRow } from '../../../components/Card';
@@ -11,15 +11,26 @@ import ContentError from '../../../components/ContentError';
 import ContentLoading from '../../../components/ContentLoading';
 import DeleteButton from '../../../components/DeleteButton';
 import {
-  DetailList,
   Detail,
+  DetailList,
   UserDateDetail,
 } from '../../../components/DetailList';
+import ChipGroup from '../../../components/ChipGroup';
+import CodeMirrorInput from '../../../components/CodeMirrorInput';
+import CredentialChip from '../../../components/CredentialChip';
 import ErrorDetail from '../../../components/ErrorDetail';
 import { CredentialsAPI, CredentialTypesAPI } from '../../../api';
 import { Credential } from '../../../types';
 import useRequest, { useDismissableError } from '../../../util/useRequest';
 
+const PluginInputMetadata = styled(CodeMirrorInput)`
+  grid-column: 1 / -1;
+`;
+
+const PluginFieldText = styled.p`
+  margin-top: 10px;
+`;
+
 function CredentialDetail({ i18n, credential }) {
   const {
     id: credentialId,
@@ -36,31 +47,44 @@ function CredentialDetail({ i18n, credential }) {
       user_capabilities,
     },
   } = credential;
-
-  const [fields, setFields] = useState([]);
-  const [managedByTower, setManagedByTower] = useState([]);
-  const [contentError, setContentError] = useState(null);
-  const [hasContentLoading, setHasContentLoading] = useState(true);
   const history = useHistory();
 
-  useEffect(() => {
-    (async () => {
-      setContentError(null);
-      setHasContentLoading(true);
-      try {
   const {
+    result: { fields, managedByTower, inputSources },
+    request: fetchDetails,
+    isLoading: hasContentLoading,
+    error: contentError,
+  } = useRequest(
+    useCallback(async () => {
+      const [
+        {
           data: { inputs: credentialTypeInputs, managed_by_tower },
-        } = await CredentialTypesAPI.readDetail(credential_type.id);
+        },
-
+        {
-        setFields(credentialTypeInputs.fields || []);
+          data: { results: loadedInputSources },
-        setManagedByTower(managed_by_tower);
+        },
-      } catch (error) {
+      ] = await Promise.all([
-        setContentError(error);
+        CredentialTypesAPI.readDetail(credential_type.id),
-      } finally {
+        CredentialsAPI.readInputSources(credentialId),
-        setHasContentLoading(false);
+      ]);
+      return {
+        fields: credentialTypeInputs.fields || [],
+        managedByTower: managed_by_tower,
+        inputSources: loadedInputSources.reduce(
+          (inputSourcesMap, inputSource) => {
+            inputSourcesMap[inputSource.input_field_name] = inputSource;
+            return inputSourcesMap;
+          },
+          {}
+        ),
+      };
+    }, [credentialId, credential_type]),
+    {
+      fields: [],
+      managedByTower: true,
+      inputSources: {},
     }
-    })();
+  );
-  }, [credential_type]);
 
   const {
     request: deleteCredential,
@@ -75,34 +99,84 @@ function CredentialDetail({ i18n, credential }) {
 
   const { error, dismissError } = useDismissableError(deleteError);
 
-  const renderDetail = ({ id, label, type }) => {
+  const renderDetail = ({ id, label, type, ask_at_runtime }) => {
-    let detail;
+    if (inputSources[id]) {
+      return (
+        <Fragment key={id}>
+          <Detail
+            id={`credential-${id}-detail`}
+            fullWidth
+            label={<span>{label} *</span>}
+            value={
+              <ChipGroup numChips={1} totalChips={1}>
+                <CredentialChip
+                  credential={inputSources[id].summary_fields.source_credential}
+                  isReadOnly
+                />
+              </ChipGroup>
+            }
+          />
+          <PluginInputMetadata
+            id={`credential-${id}-metadata`}
+            mode="javascript"
+            readOnly
+            value={JSON.stringify(inputSources[id].metadata, null, 2)}
+            onChange={() => {}}
+            rows={5}
+            hasErrors={false}
+          />
+        </Fragment>
+      );
+    }
 
     if (type === 'boolean') {
-      detail = (
+      return (
         <Detail
+          id={`credential-${id}-detail`}
           key={id}
           label={i18n._(t`Options`)}
           value={<List>{inputs[id] && <ListItem>{label}</ListItem>}</List>}
         />
       );
-    } else if (inputs[id] === '$encrypted$') {
+    }
-      const isEncrypted = true;
+
-      detail = (
+    if (inputs[id] === '$encrypted$') {
+      return (
         <Detail
+          id={`credential-${id}-detail`}
           key={id}
           label={label}
           value={i18n._(t`Encrypted`)}
-          isEncrypted={isEncrypted}
+          isEncrypted
         />
       );
-    } else {
-      detail = <Detail key={id} label={label} value={inputs[id]} />;
     }
 
-    return detail;
+    if (ask_at_runtime && inputs[id] === 'ASK') {
+      return (
+        <Detail
+          id={`credential-${id}-detail`}
+          key={id}
+          label={label}
+          value={i18n._(t`Prompt on launch`)}
+        />
+      );
+    }
+
+    return (
+      <Detail
+        id={`credential-${id}-detail`}
+        key={id}
+        label={label}
+        value={inputs[id]}
+      />
+    );
   };
 
+  useEffect(() => {
+    fetchDetails();
+  }, [fetchDetails]);
+
   if (hasContentLoading) {
     return <ContentLoading />;
   }
@@ -114,10 +188,19 @@ function CredentialDetail({ i18n, credential }) {
   return (
     <CardBody>
       <DetailList>
-        <Detail label={i18n._(t`Name`)} value={name} />
+        <Detail
-        <Detail label={i18n._(t`Description`)} value={description} />
+          id="credential-name-detail"
+          label={i18n._(t`Name`)}
+          value={name}
+        />
+        <Detail
+          id="credential-description-detail"
+          label={i18n._(t`Description`)}
+          value={description}
+        />
         {organization && (
           <Detail
+            id="credential-organization-detail"
             label={i18n._(t`Organization`)}
             value={
               <Link to={`/organizations/${organization.id}/details`}>
@@ -127,6 +210,7 @@ function CredentialDetail({ i18n, credential }) {
           />
         )}
         <Detail
+          id="credential-credential_type-detail"
           label={i18n._(t`Credential Type`)}
           value={
             managedByTower ? (
@@ -142,16 +226,25 @@ function CredentialDetail({ i18n, credential }) {
         {fields.map(field => renderDetail(field))}
 
         <UserDateDetail
+          id="credential-created-detail"
           label={i18n._(t`Created`)}
           date={created}
           user={created_by}
         />
         <UserDateDetail
+          id="credential-last_modified-detail"
           label={i18n._(t`Last Modified`)}
           date={modified}
           user={modified_by}
         />
       </DetailList>
+      {Object.keys(inputSources).length > 0 && (
+        <PluginFieldText>
+          {i18n._(
+            t`* This field will be retrieved from an external secret management system using the specified credential.`
+          )}
+        </PluginFieldText>
+      )}
       <CardActionsRow>
         {user_capabilities.edit && (
           <Button component={Link} to={`/credentials/${credentialId}/edit`}>

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

@@ -12,10 +12,37 @@ jest.mock('../../../api');
 
 const mockCredential = mockCredentials.results[0];
 
+const mockInputSource = {
+  id: 33,
+  type: 'credential_input_source',
+  url: '/api/v2/credential_input_sources/33/',
+  summary_fields: {
+    source_credential: {
+      id: 424,
+      name: 'External Credential',
+      description: '',
+      kind: 'conjur',
+      cloud: false,
+      credential_type_id: 20,
+    },
+  },
+  input_field_name: 'ssh_key_unlock',
+  metadata: {
+    secret_path: '/foo/bar/baz',
+    secret_version: '17',
+  },
+};
+
 CredentialTypesAPI.readDetail.mockResolvedValue({
   data: mockCredentialType,
 });
 
+CredentialsAPI.readInputSources.mockResolvedValue({
+  data: {
+    results: [mockInputSource],
+  },
+});
+
 function expectDetailToMatch(wrapper, label, value) {
   const detail = wrapper.find(`Detail[label="${label}"]`);
   expect(detail).toHaveLength(1);
@@ -52,6 +79,18 @@ describe('<CredentialDetail />', () => {
       mockCredential.summary_fields.credential_type.name
     );
     expectDetailToMatch(wrapper, 'Username', mockCredential.inputs.username);
+    expectDetailToMatch(wrapper, 'Password', 'Encrypted');
+    expectDetailToMatch(wrapper, 'SSH Private Key', 'Encrypted');
+    expectDetailToMatch(wrapper, 'Signed SSH Certificate', 'Encrypted');
+    const sshKeyUnlockDetail = wrapper.find(
+      'Detail#credential-ssh_key_unlock-detail'
+    );
+    expect(sshKeyUnlockDetail.length).toBe(1);
+    expect(sshKeyUnlockDetail.find('CredentialChip').length).toBe(1);
+    expect(
+      wrapper.find('CodeMirrorInput#credential-ssh_key_unlock-metadata').props()
+        .value
+    ).toBe(JSON.stringify(mockInputSource.metadata, null, 2));
     expectDetailToMatch(
       wrapper,
       'Privilege Escalation Method',
@@ -62,6 +101,11 @@ describe('<CredentialDetail />', () => {
       'Privilege Escalation Username',
       mockCredential.inputs.become_username
     );
+    expectDetailToMatch(
+      wrapper,
+      'Privilege Escalation Password',
+      'Prompt on launch'
+    );
     expect(wrapper.find(`Detail[label="Options"] ListItem`).text()).toEqual(
       'Authorize'
     );

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

@@ -151,7 +151,7 @@ function CredentialEdit({ credential, me }) {
   };
 
   if (error) {
-    return <ContentError />;
+    return <ContentError error={error} />;
   }
 
   if (isLoading) {

awx/ui_next/src/screens/Credential/shared/data.credentials.json

@@ -78,7 +78,7 @@
         "username": "foo",
         "ssh_key_data": "$encrypted$",
         "become_method": "sudo",
-            "become_password": "$encrypted$",
+        "become_password": "ASK",
         "become_username": "bar",
         "ssh_public_key_data": "$encrypted$",
         "authorize": true