Adds CredentialLookUp to JT Form

2026-01-15 20:00:43 -03:30 · 2019-10-22 16:20:59 -04:00 · 2019-10-22 16:20:59 -04:00 · 2828d31141
commit 2828d31141
parent d10e727b3c
8 changed files with 183 additions and 142 deletions
--- a/awx/ui_next/src/api/index.js
+++ b/awx/ui_next/src/api/index.js
@ -1,7 +1,7 @@
 import AdHocCommands from './models/AdHocCommands';
 import Config from './models/Config';
-import CredentialTypes from './models/CredentialTypes'
-import Credentials from './models/Credentials'
+import CredentialTypes from './models/CredentialTypes';
+import Credentials from './models/Credentials';
 import InstanceGroups from './models/InstanceGroups';
 import Inventories from './models/Inventories';
 import InventorySources from './models/InventorySources';
--- a/awx/ui_next/src/api/models/JobTemplates.js
+++ b/awx/ui_next/src/api/models/JobTemplates.js
@ -46,11 +46,16 @@ class JobTemplates extends InstanceGroupsMixin(NotificationsMixin(Base)) {
  }

  associateCredentials(id, credential) {
-    return this.http.post(`${this.baseUrl}${id}/credentials/`, { id: credential });
+    return this.http.post(`${this.baseUrl}${id}/credentials/`, {
+      id: credential,
+    });
  }

  disassociateCredentials(id, credential) {
-    return this.http.post(`${this.baseUrl}${id}/credentials/`, { id: credential, disassociate: true  });
+    return this.http.post(`${this.baseUrl}${id}/credentials/`, {
+      id: credential,
+      disassociate: true,
+    });
  }
 }

--- a/awx/ui_next/src/components/Lookup/CredentialsLookup.jsx
+++ b/awx/ui_next/src/components/Lookup/CredentialsLookup.jsx
@ -16,67 +16,73 @@ const QuestionCircleIcon = styled(PFQuestionCircleIcon)`

 class CredentialsLookup extends React.Component {
  constructor(props) {
-    super(props)
+    super(props);

    this.state = {
      credentials: props.credentials,
-      selectedCredentialType: {label: "Machine", id: 1, kind: 'ssh'},
-      credentialTypes: []
-    }
+      selectedCredentialType: { label: 'Machine', id: 1, kind: 'ssh' },
+      credentialTypes: [],
+    };

-    this.handleCredentialTypeSelect = this.handleCredentialTypeSelect.bind(this);
+    this.handleCredentialTypeSelect = this.handleCredentialTypeSelect.bind(
+      this
+    );
    this.loadCredentials = this.loadCredentials.bind(this);
    this.loadCredentialTypes = this.loadCredentialTypes.bind(this);
    this.toggleCredential = this.toggleCredential.bind(this);
  }

  componentDidMount() {
-    this.loadCredentials({page: 1, page_size: 5, order_by:'name'})
+    this.loadCredentials({ page: 1, page_size: 5, order_by: 'name' });
    this.loadCredentialTypes();
  }

  componentDidUpdate(prevState) {
-    const {selectedType} = this.state
+    const { selectedType } = this.state;
    if (prevState.selectedType !== selectedType) {
      Promise.all([this.loadCredentials()]);
    }
  }

  async loadCredentialTypes() {
-    const {onError} =this.props
+    const { onError } = this.props;
    try {
-      const { data } = await CredentialTypesAPI.read()
-          const acceptableTypes = ["machine", "cloud", "net", "ssh", "vault"]
-          const credentialTypes =[]
-          data.results
-            .forEach(cred => {
-              acceptableTypes.forEach(aT => {
-                if (aT === cred.kind) {
-                  // This object has several repeated values as some of it's children
-                  // require different field values.
-                  cred = {
-                    id: cred.id, kind: cred.kind, type: cred.namespace,
-                    value: cred.name, label: cred.name, isDisabled: false
-                  }
-               credentialTypes.push(cred)
-             }})
-        })
-      this.setState({ credentialTypes })
-    } catch (err){
-      onError(err)
-      }
-   }
+      const { data } = await CredentialTypesAPI.read();
+      const acceptableTypes = ['machine', 'cloud', 'net', 'ssh', 'vault'];
+      const credentialTypes = [];
+      data.results.forEach(cred => {
+        acceptableTypes.forEach(aT => {
+          if (aT === cred.kind) {
+            // This object has several repeated values as some of it's children
+            // require different field values.
+            cred = {
+              id: cred.id,
+              kind: cred.kind,
+              type: cred.namespace,
+              value: cred.name,
+              label: cred.name,
+              isDisabled: false,
+            };
+            credentialTypes.push(cred);
+          }
+        });
+      });
+      this.setState({ credentialTypes });
+    } catch (err) {
+      onError(err);
+    }
+  }

  async loadCredentials(params) {
    const { selectedCredentialType } = this.state;
-    params.credential_type = selectedCredentialType.id || 1
-    return CredentialsAPI.read(params)
+    params.credential_type = selectedCredentialType.id || 1;
+    return CredentialsAPI.read(params);
  }

  handleCredentialTypeSelect(value, type) {
-    const {credentialTypes} = this.state
-    const selectedType = credentialTypes.filter(item => item.label === type)
-    this.setState({selectedCredentialType: selectedType[0]})
+    const { credentialTypes } = this.state;
+    const selectedType = credentialTypes.filter(item => item.label === type);
+    this.setState({ selectedCredentialType: selectedType[0] });
  }

  toggleCredential(item) {
@ -84,26 +90,31 @@ class CredentialsLookup extends React.Component {
    const { onChange } = this.props;
    const index = stateToUpdate.findIndex(
      credential => credential.id === item.id
-    )
+    );
    if (index > -1) {
-      const newCredentialsList = stateToUpdate.filter(cred => cred.id !== item.id)
+      const newCredentialsList = stateToUpdate.filter(
+        cred => cred.id !== item.id
+      );
      this.setState({ credentials: newCredentialsList });
-      onChange(newCredentialsList)
+      onChange(newCredentialsList);
      return;
    }

-    const credentialTypeOccupied = stateToUpdate.some(cred => cred.kind === item.kind);
-    if (selectedCredentialType.value === "Vault" || !credentialTypeOccupied ) {
-      item.credentialType = selectedCredentialType
-      this.setState({ credentials: [...stateToUpdate, item] })
-      onChange([...stateToUpdate, item])
+    const credentialTypeOccupied = stateToUpdate.some(
+      cred => cred.kind === item.kind
+    );
+    if (selectedCredentialType.value === 'Vault' || !credentialTypeOccupied) {
+      item.credentialType = selectedCredentialType;
+      this.setState({ credentials: [...stateToUpdate, item] });
+      onChange([...stateToUpdate, item]);
    } else {
-      const credsList = [...stateToUpdate]
-      const occupyingCredIndex = stateToUpdate.findIndex(occupyingCred =>
-        occupyingCred.kind === item.kind)
-      credsList.splice(occupyingCredIndex, 1, item)
-      this.setState({ credentials: credsList })
-      onChange(credsList)
+      const credsList = [...stateToUpdate];
+      const occupyingCredIndex = stateToUpdate.findIndex(
+        occupyingCred => occupyingCred.kind === item.kind
+      );
+      credsList.splice(occupyingCredIndex, 1, item);
+      this.setState({ credentials: credsList });
+      onChange(credsList);
    }
  }

@ -112,21 +123,18 @@ class CredentialsLookup extends React.Component {
    const { credentials, selectedCredentialType, credentialTypes } = this.state;

    return (
-        <FormGroup
-          label={i18n._(t`Credentials`)}
-          fieldId="org-credentials"
-        >
-          {tooltip && (
-            <Tooltip position="right" content={tooltip}>
-              <QuestionCircleIcon />
-            </Tooltip>
-          )}
-          {credentialTypes && (
-            <Lookup
+      <FormGroup label={i18n._(t`Credentials`)} fieldId="org-credentials">
+        {tooltip && (
+          <Tooltip position="right" content={tooltip}>
+            <QuestionCircleIcon />
+          </Tooltip>
+        )}
+        {credentialTypes && (
+          <Lookup
            selectCategoryOptions={credentialTypes}
            selectCategory={this.handleCredentialTypeSelect}
            selectedCategory={selectedCredentialType}
-            onToggleItem = {this.toggleCredential}
+            onToggleItem={this.toggleCredential}
            onloadCategories={this.loadCredentialTypes}
            id="org-credentials"
            lookupHeader={i18n._(t`Credentials`)}
@ -146,8 +154,8 @@ class CredentialsLookup extends React.Component {
            ]}
            sortedColumnKey="name"
          />
-          )}
-        </FormGroup>
+        )}
+      </FormGroup>
    );
  }
 }
--- a/awx/ui_next/src/components/Lookup/Lookup.jsx
+++ b/awx/ui_next/src/components/Lookup/Lookup.jsx
@ -21,9 +21,9 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import styled from 'styled-components';

-import AnsibleSelect from '../AnsibleSelect'
+import AnsibleSelect from '../AnsibleSelect';
 import PaginatedDataList from '../PaginatedDataList';
-import VerticalSeperator from '../VerticalSeparator'
+import VerticalSeperator from '../VerticalSeparator';
 import DataListToolbar from '../DataListToolbar';
 import CheckboxListItem from '../CheckboxListItem';
 import SelectedList from '../SelectedList';
@ -68,13 +68,13 @@ class Lookup extends React.Component {
      results: [],
      count: 0,
      error: null,
-      isDropdownOpen: false
+      isDropdownOpen: false,
    };
-      this.qsConfig = getQSConfig(props.qsNamespace, {
-        page: 1,
-        page_size: 5,
-        order_by: props.sortedColumnKey,
-      });
+    this.qsConfig = getQSConfig(props.qsNamespace, {
+      page: 1,
+      page_size: 5,
+      order_by: props.sortedColumnKey,
+    });
    this.handleModalToggle = this.handleModalToggle.bind(this);
    this.toggleSelected = this.toggleSelected.bind(this);
    this.saveModal = this.saveModal.bind(this);
@ -84,8 +84,7 @@ class Lookup extends React.Component {
  }

  componentDidMount() {
-    const {onLoadCredentialTypes} = this.props
-    ;
+    const { onLoadCredentialTypes } = this.props;
    if (onLoadCredentialTypes) {
      Promise.all([onLoadCredentialTypes(), this.getData()]);
    } else {
@ -95,21 +94,23 @@ class Lookup extends React.Component {

  componentDidUpdate(prevProps) {
    const { location, selectedCategory } = this.props;
-    if ((location !== prevProps.location) ||
-      (prevProps.selectedCategory !== selectedCategory)) {
+    if (
+      location !== prevProps.location ||
+      prevProps.selectedCategory !== selectedCategory
+    ) {
      this.getData();
    }
  }

  toggleDropdown() {
    const { isDropdownOpen } = this.state;
-    this.setState({isDropdownOpen: !isDropdownOpen})
+    this.setState({ isDropdownOpen: !isDropdownOpen });
  }

  assertCorrectValueType() {
    const { multiple, value, selectCategoryOptions } = this.props;
    if (selectCategoryOptions) {
-      return
+      return;
    }
    if (!multiple && Array.isArray(value)) {
      throw new Error(
@ -130,30 +131,37 @@ class Lookup extends React.Component {

    this.setState({ error: false });
    try {
-        const { data } = await getItems(queryParams);
+      const { data } = await getItems(queryParams);
      const { results, count } = data;

-        this.setState({
-          results,
-          count,
-        });
+      this.setState({
+        results,
+        count,
+      });
    } catch (err) {
      this.setState({ error: true });
    }
  }

  toggleSelected(row) {
-    const { name, onLookupSave, multiple, onToggleItem, selectCategoryOptions } = this.props;
    const {
-      lookupSelectedItems: updatedSelectedItems, isModalOpen
+      name,
+      onLookupSave,
+      multiple,
+      onToggleItem,
+      selectCategoryOptions,
+    } = this.props;
+    const {
+      lookupSelectedItems: updatedSelectedItems,
+      isModalOpen,
    } = this.state;

    const selectedIndex = updatedSelectedItems.findIndex(
      selectedRow => selectedRow.id === row.id
-      );
+    );
    if (multiple) {
      if (selectCategoryOptions) {
-        onToggleItem(row, isModalOpen)
+        onToggleItem(row, isModalOpen);
      }
      if (selectedIndex > -1) {
        updatedSelectedItems.splice(selectedIndex, 1);
@ -171,8 +179,8 @@ class Lookup extends React.Component {
    // This handles the case where the user removes chips from the lookup input
    // while the modal is closed
    if (!isModalOpen) {
-      onLookupSave(updatedSelectedItems, name)
-    };
+      onLookupSave(updatedSelectedItems, name);
+    }
  }

  handleModalToggle() {
@ -190,7 +198,7 @@ class Lookup extends React.Component {
    } else {
      this.clearQSParams();
      if (selectCategory) {
-        selectCategory(null, "Machine");
+        selectCategory(null, 'Machine');
      }
    }
    this.setState(prevState => ({
@ -201,11 +209,12 @@ class Lookup extends React.Component {
  saveModal() {
    const { onLookupSave, name, multiple } = this.props;
    const { lookupSelectedItems } = this.state;
-    const value = multiple ? lookupSelectedItems : lookupSelectedItems[0] || null;
-
-      this.handleModalToggle();
-      onLookupSave(value, name);
+    const value = multiple
+      ? lookupSelectedItems
+      : lookupSelectedItems[0] || null;

+    this.handleModalToggle();
+    onLookupSave(value, name);
  }

  clearQSParams() {
@ -237,12 +246,12 @@ class Lookup extends React.Component {
      required,
      i18n,
      selectCategoryOptions,
-      selectedCategory
+      selectedCategory,
    } = this.props;
    const header = lookupHeader || i18n._(t`Items`);
    const canDelete = !required || (multiple && value.length > 1);
    const chips = () => {
-      return (selectCategoryOptions && selectCategoryOptions.length > 0) ? (
+      return selectCategoryOptions && selectCategoryOptions.length > 0 ? (
        <ChipGroup>
          {(multiple ? value : [value]).map(chip => (
            <CredentialChip
@ -265,8 +274,8 @@ class Lookup extends React.Component {
            </Chip>
          ))}
        </ChipGroup>
-      )
-    }
+      );
+    };
    return (
      <Fragment>
        <InputGroup onBlur={onBlur}>
@ -305,11 +314,19 @@ class Lookup extends React.Component {
            </Button>,
          ]}
        >
-          {(selectCategoryOptions && selectCategoryOptions.length > 0) && (
+          {selectCategoryOptions && selectCategoryOptions.length > 0 && (
            <ToolbarItem css=" display: flex; align-items: center;">
              <span css="flex: 0 0 25%;">Selected Category</span>
              <VerticalSeperator />
-              <AnsibleSelect css="flex: 1 1 75%;" id="credentialsLookUp-select" label="Selected Category" data={selectCategoryOptions} value={selectedCategory.label} onChange={selectCategory} form={form}/>
+              <AnsibleSelect
+                css="flex: 1 1 75%;"
+                id="credentialsLookUp-select"
+                label="Selected Category"
+                data={selectCategoryOptions}
+                value={selectedCategory.label}
+                onChange={selectCategory}
+                form={form}
+              />
            </ToolbarItem>
          )}
          <PaginatedDataList
@ -324,10 +341,18 @@ class Lookup extends React.Component {
                itemId={item.id}
                name={multiple ? item.name : name}
                label={item.name}
-                isSelected={selectCategoryOptions ? value.some(i => i.id === item.id)
-                  : lookupSelectedItems.some(i => i.id === item.id)}
+                isSelected={
+                  selectCategoryOptions
+                    ? value.some(i => i.id === item.id)
+                    : lookupSelectedItems.some(i => i.id === item.id)
+                }
                onSelect={() => this.toggleSelected(item)}
-                isRadio={!multiple || ((selectCategoryOptions && selectCategoryOptions.length) && selectedCategory.value !== "Vault")}
+                isRadio={
+                  !multiple ||
+                  (selectCategoryOptions &&
+                    selectCategoryOptions.length &&
+                    selectedCategory.value !== 'Vault')
+                }
              />
            )}
            renderToolbar={props => <DataListToolbar {...props} fillWidth />}
@ -340,7 +365,9 @@ class Lookup extends React.Component {
              showOverflowAfter={5}
              onRemove={this.toggleSelected}
              isReadOnly={!canDelete}
-              isCredentialList={selectCategoryOptions && selectCategoryOptions.length > 0}
+              isCredentialList={
+                selectCategoryOptions && selectCategoryOptions.length > 0
+              }
            />
          )}
          {error ? <div>error</div> : ''}
--- a/awx/ui_next/src/components/SelectedList/SelectedList.jsx
+++ b/awx/ui_next/src/components/SelectedList/SelectedList.jsx
@ -27,34 +27,34 @@ class SelectedList extends Component {
      onRemove,
      displayKey,
      isReadOnly,
-      isCredentialList
+      isCredentialList,
    } = this.props;
-    const chips = isCredentialList ?  selected.map(item => (
-      <CredentialChip
-        key={item.id}
-        isReadOnly={isReadOnly}
-        onClick={() => onRemove(item)}
-        credential={item}
-      >
-        {item[displayKey]}
-      </CredentialChip>
-    )) : selected.map(item => (
-      <Chip
-        key={item.id}
-        isReadOnly={isReadOnly}
-        onClick={() => onRemove(item)}
-      >
-        {item[displayKey]}
-      </Chip>
-    ))
+    const chips = isCredentialList
+      ? selected.map(item => (
+          <CredentialChip
+            key={item.id}
+            isReadOnly={isReadOnly}
+            onClick={() => onRemove(item)}
+            credential={item}
+          >
+            {item[displayKey]}
+          </CredentialChip>
+        ))
+      : selected.map(item => (
+          <Chip
+            key={item.id}
+            isReadOnly={isReadOnly}
+            onClick={() => onRemove(item)}
+          >
+            {item[displayKey]}
+          </Chip>
+        ));
    return (
      <Split>
        <SplitLabelItem>{label}</SplitLabelItem>
        <VerticalSeparator />
        <SplitItem>
-          <ChipGroup showOverflowAfter={showOverflowAfter}>
-           {chips}
-          </ChipGroup>
+          <ChipGroup showOverflowAfter={showOverflowAfter}>{chips}</ChipGroup>
        </SplitItem>
      </Split>
    );
--- a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx
@ -34,7 +34,7 @@ function JobTemplateAdd({ history, i18n }) {
      await Promise.all([
        submitLabels(id, labels, organizationId),
        submitInstanceGroups(id, instanceGroups),
-        submitCredentials(id, credentials)
+        submitCredentials(id, credentials),
      ]);
      history.push(`/templates/${type}/${id}/details`);
    } catch (error) {
@ -65,8 +65,8 @@ function JobTemplateAdd({ history, i18n }) {
  function submitCredentials(templateId, credentials = []) {
    const associateCredentials = credentials.map(cred =>
      JobTemplatesAPI.associateCredentials(templateId, cred.id)
-    )
-    return Promise.all(associateCredentials)
+    );
+    return Promise.all(associateCredentials);
  }

  function handleCancel() {
--- a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx
@ -120,7 +120,7 @@ class JobTemplateEdit extends Component {
      await Promise.all([
        this.submitLabels(labels, organizationId),
        this.submitInstanceGroups(instanceGroups, initialInstanceGroups),
-        this.submitCredentials(credentials)
+        this.submitCredentials(credentials),
      ]);
      history.push(this.detailsUrl);
    } catch (formSubmitError) {
@ -163,7 +163,7 @@ class JobTemplateEdit extends Component {
    const associatePromises = await added.map(group =>
      JobTemplatesAPI.associateInstanceGroup(template.id, group.id)
    );
-    return Promise.all([...disassociatePromises, ...associatePromises, ]);
+    return Promise.all([...disassociatePromises, ...associatePromises]);
  }

  async submitCredentials(newCredentials) {
@ -178,9 +178,9 @@ class JobTemplateEdit extends Component {
    const disassociatePromise = await Promise.all(disassociateCredentials);
    const associateCredentials = added.map(cred =>
      JobTemplatesAPI.associateCredentials(template.id, cred.id)
-    )
-    const associatePromise = Promise.all(associateCredentials)
-    return Promise.all([disassociatePromise, associatePromise])
+    );
+    const associatePromise = Promise.all(associateCredentials);
+    return Promise.all([disassociatePromise, associatePromise]);
  }

  handleCancel() {
--- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
@ -27,7 +27,7 @@ import {
  InventoryLookup,
  InstanceGroupsLookup,
  ProjectLookup,
-  CredentialsLookup
+  CredentialsLookup,
 } from '@components/Lookup';
 import { JobTemplatesAPI } from '@api';
 import LabelSelect from './LabelSelect';
@ -86,8 +86,7 @@ class JobTemplateForm extends Component {
    const { validateField } = this.props;
    this.setState({ contentError: null, hasContentLoading: true });
    // TODO: determine when LabelSelect has finished loading labels
-    Promise.all([this.loadRelatedInstanceGroups(),
-    ]).then(() => {
+    Promise.all([this.loadRelatedInstanceGroups()]).then(() => {
      this.setState({ hasContentLoading: false });
      validateField('project');
    });
@ -329,8 +328,10 @@ class JobTemplateForm extends Component {
              <CredentialsLookup
                onError={err => this.setState({ contentError: err })}
                credentials={template.summary_fields.credentials}
-                onChange={value => (form.setFieldValue('credentials', value))}
-                tooltip={i18n._(t`Select credentials that allow Tower to access the nodes this job will be ran against. You can only select one credential of each type. For machine credentials (SSH), checking "Prompt on launch" without selecting credentials will require you to select a machine credential at run time. If you select credentials and check "Prompt on launch", the selected credential(s) become the defaults that can be updated at run time.`)}
+                onChange={value => form.setFieldValue('credentials', value)}
+                tooltip={i18n._(
+                  t`Select credentials that allow Tower to access the nodes this job will be ran against. You can only select one credential of each type. For machine credentials (SSH), checking "Prompt on launch" without selecting credentials will require you to select a machine credential at run time. If you select credentials and check "Prompt on launch", the selected credential(s) become the defaults that can be updated at run time.`
+                )}
              />
            )}
          />
@ -604,7 +605,7 @@ const FormikApp = withFormik({
      initialInstanceGroups: [],
      instanceGroups: [],
      initialCredentials: summary_fields.credentials || [],
-      credentials: []
+      credentials: [],
    };
  },
  handleSubmit: (values, { props }) => props.handleSubmit(values),