Merge pull request #7975 from AlexSCorey/7973-DisableTemplateFormFields

Disables template and workflow template fields.

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.jsx

@@ -23,6 +23,7 @@ function FieldWithPrompt({
   promptId,
   promptName,
   tooltip,
+  isDisabled,
 }) {
   return (
     <div className="pf-c-form__group">
@@ -39,6 +40,7 @@ function FieldWithPrompt({
           {tooltip && <FieldTooltip content={tooltip} />}
         </div>
         <StyledCheckboxField
+          isDisabled={isDisabled}
           id={promptId}
           label={i18n._(t`Prompt on launch`)}
           name={promptName}

awx/ui_next/src/components/FormField/CheckboxField.jsx

@@ -9,10 +9,19 @@ const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
   margin-left: 10px;
 `;
 
-function CheckboxField({ id, name, label, tooltip, validate, ...rest }) {
+function CheckboxField({
+  id,
+  name,
+  label,
+  tooltip,
+  validate,
+  isDisabled,
+  ...rest
+}) {
   const [field] = useField({ name, validate });
   return (
     <Checkbox
+      isDisabled={isDisabled}
       aria-label={label}
       label={
         <span>

awx/ui_next/src/components/Lookup/CredentialLookup.jsx

@@ -33,6 +33,7 @@ function CredentialLookup({
   history,
   i18n,
   tooltip,
+  isDisabled,
 }) {
   const {
     result: { count, credentials, relatedSearchableKeys, searchableKeys },
@@ -108,6 +109,7 @@ function CredentialLookup({
         onChange={onChange}
         required={required}
         qsConfig={QS_CONFIG}
+        isDisabled={isDisabled}
         renderOptionsList={({ state, dispatch, canDelete }) => (
           <OptionsList
             value={state.selectedItems}

awx/ui_next/src/components/Lookup/InventoryLookup.jsx

@@ -10,6 +10,7 @@ import OptionsList from '../OptionsList';
 import useRequest from '../../util/useRequest';
 import { getQSConfig, parseQueryString } from '../../util/qs';
 import LookupErrorMessage from './shared/LookupErrorMessage';
+import FieldWithPrompt from '../FieldWithPrompt';
 
 const QS_CONFIG = getQSConfig('inventory', {
   page: 1,
@@ -17,9 +18,26 @@ const QS_CONFIG = getQSConfig('inventory', {
   order_by: 'name',
 });
 
-function InventoryLookup({ value, onChange, onBlur, required, i18n, history }) {
+function InventoryLookup({
+  value,
+  onChange,
+  onBlur,
+  i18n,
+  history,
+  required,
+  isPromptableField,
+  fieldId,
+  promptId,
+  promptName,
+}) {
   const {
-    result: { inventories, count, relatedSearchableKeys, searchableKeys },
+    result: {
+      inventories,
+      count,
+      relatedSearchableKeys,
+      searchableKeys,
+      canEdit,
+    },
     request: fetchInventories,
     error,
     isLoading,
@@ -39,16 +57,86 @@ function InventoryLookup({ value, onChange, onBlur, required, i18n, history }) {
         searchableKeys: Object.keys(
           actionsResponse.data.actions?.GET || {}
         ).filter(key => actionsResponse.data.actions?.GET[key].filterable),
+        canEdit: Boolean(actionsResponse.data.actions.POST),
       };
     }, [history.location]),
-    { inventories: [], count: 0, relatedSearchableKeys: [], searchableKeys: [] }
+    {
+      inventories: [],
+      count: 0,
+      relatedSearchableKeys: [],
+      searchableKeys: [],
+      canEdit: false,
+    }
   );
 
   useEffect(() => {
     fetchInventories();
   }, [fetchInventories]);
 
-  return (
+  return isPromptableField ? (
+    <>
+      <FieldWithPrompt
+        fieldId={fieldId}
+        isRequired={required}
+        label={i18n._(t`Inventory`)}
+        promptId={promptId}
+        promptName={promptName}
+        isDisabled={!canEdit}
+        tooltip={i18n._(t`Select the inventory containing the hosts
+            you want this job to manage.`)}
+      >
+        <Lookup
+          id="inventory-lookup"
+          header={i18n._(t`Inventory`)}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          required={required}
+          isLoading={isLoading}
+          isDisabled={!canEdit}
+          qsConfig={QS_CONFIG}
+          renderOptionsList={({ state, dispatch, canDelete }) => (
+            <OptionsList
+              value={state.selectedItems}
+              options={inventories}
+              optionCount={count}
+              searchColumns={[
+                {
+                  name: i18n._(t`Name`),
+                  key: 'name__icontains',
+                  isDefault: true,
+                },
+                {
+                  name: i18n._(t`Created By (Username)`),
+                  key: 'created_by__username__icontains',
+                },
+                {
+                  name: i18n._(t`Modified By (Username)`),
+                  key: 'modified_by__username__icontains',
+                },
+              ]}
+              sortColumns={[
+                {
+                  name: i18n._(t`Name`),
+                  key: 'name',
+                },
+              ]}
+              searchableKeys={searchableKeys}
+              relatedSearchableKeys={relatedSearchableKeys}
+              multiple={state.multiple}
+              header={i18n._(t`Inventory`)}
+              name="inventory"
+              qsConfig={QS_CONFIG}
+              readOnly={!canDelete}
+              selectItem={item => dispatch({ type: 'SELECT_ITEM', item })}
+              deselectItem={item => dispatch({ type: 'DESELECT_ITEM', item })}
+            />
+          )}
+        />
+        <LookupErrorMessage error={error} />
+      </FieldWithPrompt>
+    </>
+  ) : (
     <>
       <Lookup
         id="inventory-lookup"
@@ -58,6 +146,7 @@ function InventoryLookup({ value, onChange, onBlur, required, i18n, history }) {
         onBlur={onBlur}
         required={required}
         isLoading={isLoading}
+        isDisabled={!canEdit}
         qsConfig={QS_CONFIG}
         renderOptionsList={({ state, dispatch, canDelete }) => (
           <OptionsList

awx/ui_next/src/components/Lookup/Lookup.jsx

@@ -27,6 +27,8 @@ import { QSConfig } from '../../types';
 
 const ChipHolder = styled.div`
   --pf-c-form-control--Height: auto;
+  background-color: ${props =>
+    props.isDisabled ? 'var(--pf-global--disabled-color--300)' : null};
 `;
 function Lookup(props) {
   const {
@@ -43,6 +45,7 @@ function Lookup(props) {
     renderOptionsList,
     history,
     i18n,
+    isDisabled,
   } = props;
 
   const [state, dispatch] = useReducer(
@@ -88,7 +91,8 @@ function Lookup(props) {
   };
 
   const { isModalOpen, selectedItems } = state;
-  const canDelete = !required || (multiple && value.length > 1);
+  const canDelete =
+    (!required || (multiple && value.length > 1)) && !isDisabled;
   let items = [];
   if (multiple) {
     items = value;
@@ -103,11 +107,11 @@ function Lookup(props) {
           id={id}
           onClick={() => dispatch({ type: 'TOGGLE_MODAL' })}
           variant={ButtonVariant.control}
-          isDisabled={isLoading}
+          isDisabled={isLoading || isDisabled}
         >
           <SearchIcon />
         </Button>
-        <ChipHolder className="pf-c-form-control">
+        <ChipHolder isDisabled={isDisabled} className="pf-c-form-control">
           <ChipGroup numChips={5} totalChips={items.length}>
             {items.map(item =>
               renderItemChip({

awx/ui_next/src/components/Lookup/ProjectLookup.jsx

@@ -32,7 +32,7 @@ function ProjectLookup({
   history,
 }) {
   const {
-    result: { projects, count, relatedSearchableKeys, searchableKeys },
+    result: { projects, count, relatedSearchableKeys, searchableKeys, canEdit },
     request: fetchProjects,
     error,
     isLoading,
@@ -55,6 +55,7 @@ function ProjectLookup({
         searchableKeys: Object.keys(
           actionsResponse.data.actions?.GET || {}
         ).filter(key => actionsResponse.data.actions?.GET[key].filterable),
+        canEdit: Boolean(actionsResponse.data.actions.POST),
       };
     }, [history.location.search, autocomplete]),
     {
@@ -62,6 +63,7 @@ function ProjectLookup({
       projects: [],
       relatedSearchableKeys: [],
       searchableKeys: [],
+      canEdit: false,
     }
   );
 
@@ -87,6 +89,7 @@ function ProjectLookup({
         onChange={onChange}
         required={required}
         isLoading={isLoading}
+        isDisabled={!canEdit}
         qsConfig={QS_CONFIG}
         renderOptionsList={({ state, dispatch, canDelete }) => (
           <OptionsList

awx/ui_next/src/components/MultiSelect/useSyncedSelectValue.js

@@ -11,12 +11,22 @@ export default function useSyncedSelectValue(value, onChange) {
   const [selections, setSelections] = useState([]);
 
   useEffect(() => {
+    const newOptions = [];
     if (value !== selections && options.length) {
-      const syncedValue = value.map(item =>
+      const syncedValue = value.map(item => {
-        options.find(i => i.id === item.id)
+        const match = options.find(i => {
-      );
+          return i.id === item.id;
+        });
+        if (!match) {
+          newOptions.push(item);
+        }
+        return match || item;
+      });
       setSelections(syncedValue);
     }
+    if (newOptions.length > 0) {
+      setOptions(options.concat(newOptions));
+    }
     /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [value, options]);
 
@@ -27,7 +37,6 @@ export default function useSyncedSelectValue(value, onChange) {
       onChange(selections.concat(item));
     }
   };
-
   return {
     selections: options.length ? addToStringToObjects(selections) : [],
     onSelect,

awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx

@@ -4,13 +4,11 @@ import { withRouter, Redirect } from 'react-router-dom';
 import { CardBody } from '../../../components/Card';
 import ContentError from '../../../components/ContentError';
 import ContentLoading from '../../../components/ContentLoading';
-import { JobTemplatesAPI, ProjectsAPI } from '../../../api';
+import { JobTemplatesAPI } from '../../../api';
 import { JobTemplate } from '../../../types';
 import { getAddedAndRemoved } from '../../../util/lists';
 import JobTemplateForm from '../shared/JobTemplateForm';
 
-const loadRelatedProjectPlaybooks = async project =>
-  ProjectsAPI.readPlaybooks(project);
 class JobTemplateEdit extends Component {
   static propTypes = {
     template: JobTemplate.isRequired,
@@ -43,17 +41,8 @@ class JobTemplateEdit extends Component {
   }
 
   async loadRelated() {
-    const {
-      template: { project },
-    } = this.props;
     this.setState({ contentError: null, hasContentLoading: true });
     try {
-      if (project) {
-        const { data: playbook = [] } = await loadRelatedProjectPlaybooks(
-          project
-        );
-        this.setState({ relatedProjectPlaybooks: playbook });
-      }
       const [relatedCredentials] = await this.loadRelatedCredentials();
       this.setState({
         relatedCredentials,

awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx

@@ -12,6 +12,7 @@ import {
   JobTemplatesAPI,
   LabelsAPI,
   ProjectsAPI,
+  InventoriesAPI,
 } from '../../../api';
 import JobTemplateEdit from './JobTemplateEdit';
 
@@ -181,6 +182,12 @@ JobTemplatesAPI.readCredentials.mockResolvedValue({
 ProjectsAPI.readPlaybooks.mockResolvedValue({
   data: mockRelatedProjectPlaybooks,
 });
+InventoriesAPI.readOptions.mockResolvedValue({
+  data: { actions: { GET: {}, POST: {} } },
+});
+ProjectsAPI.readOptions.mockResolvedValue({
+  data: { actions: { GET: {}, POST: {} } },
+});
 LabelsAPI.read.mockResolvedValue({ data: { results: [] } });
 CredentialsAPI.read.mockResolvedValue({
   data: {

awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx

@@ -39,7 +39,7 @@ import {
   ProjectLookup,
   MultiCredentialsLookup,
 } from '../../../components/Lookup';
-import { JobTemplatesAPI, ProjectsAPI } from '../../../api';
+import { JobTemplatesAPI } from '../../../api';
 import LabelSelect from './LabelSelect';
 import PlaybookSelect from './PlaybookSelect';
 import WebhookSubForm from './WebhookSubForm';
@@ -100,18 +100,6 @@ function JobTemplateForm({
     'webhook_credential'
   );
 
-  const {
-    request: fetchProject,
-    error: projectContentError,
-    contentLoading: hasProjectLoading,
-  } = useRequest(
-    useCallback(async () => {
-      if (template?.project) {
-        await ProjectsAPI.readDetail(template?.project);
-      }
-    }, [template])
-  );
-
   const {
     request: loadRelatedInstanceGroups,
     error: instanceGroupError,
@@ -127,10 +115,6 @@ function JobTemplateForm({
     }, [setFieldValue, template])
   );
 
-  useEffect(() => {
-    fetchProject();
-  }, [fetchProject]);
-
   useEffect(() => {
     loadRelatedInstanceGroups();
   }, [loadRelatedInstanceGroups]);
@@ -204,16 +188,12 @@ function JobTemplateForm({
     callbackUrl = `${origin}${path}`;
   }
 
-  if (instanceGroupLoading || hasProjectLoading) {
+  if (instanceGroupLoading) {
     return <ContentLoading />;
   }
 
-  if (contentError || instanceGroupError || projectContentError) {
+  if (contentError || instanceGroupError) {
-    return (
+    return <ContentError error={contentError || instanceGroupError} />;
-      <ContentError
-        error={contentError || instanceGroupError || projectContentError}
-      />
-    );
   }
 
   return (
@@ -254,17 +234,15 @@ function JobTemplateForm({
             }}
           />
         </FieldWithPrompt>
-        <FieldWithPrompt
+        <>
-          fieldId="template-inventory"
-          isRequired={!askInventoryOnLaunchField.value}
-          label={i18n._(t`Inventory`)}
-          promptId="template-ask-inventory-on-launch"
-          promptName="ask_inventory_on_launch"
-          tooltip={i18n._(t`Select the inventory containing the hosts
-            you want this job to manage.`)}
-        >
           <InventoryLookup
             value={inventory}
+            fieldId="template-inventory"
+            promptId="template-ask-inventory-on-launch"
+            promptName="ask_inventory_on_launch"
+            isPromptableField
+            tooltip={i18n._(t`Select the inventory containing the hosts
+            you want this job to manage.`)}
             onBlur={() => inventoryHelpers.setTouched()}
             onChange={value => {
               inventoryHelpers.setValue(value ? value.id : null);
@@ -283,7 +261,7 @@ function JobTemplateForm({
                 {inventoryMeta.error}
               </div>
             )}
-        </FieldWithPrompt>
+        </>
         <ProjectLookup
           value={projectField.value}
           onBlur={() => projectHelpers.setTouched()}

awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx

@@ -14,6 +14,7 @@ import {
   ProjectsAPI,
   CredentialsAPI,
   CredentialTypesAPI,
+  InventoriesAPI,
 } from '../../../api';
 
 jest.mock('../../../api');
@@ -111,14 +112,23 @@ describe('<JobTemplateForm />', () => {
     JobTemplatesAPI.updateWebhookKey.mockReturnValue({
       data: { webhook_key: 'webhook key' },
     });
-    ProjectsAPI.readPlaybooks.mockReturnValue({
+    JobTemplatesAPI.updateWebhookKey.mockReturnValue({
-      data: ['debug.yml'],
+      data: { webhook_key: 'webhook key' },
     });
     ProjectsAPI.readDetail.mockReturnValue({
       name: 'foo',
       id: 1,
       allow_override: true,
     });
+    ProjectsAPI.readPlaybooks.mockReturnValue({
+      data: ['debug.yml'],
+    });
+    InventoriesAPI.readOptions.mockResolvedValue({
+      data: { actions: { GET: {}, POST: {} } },
+    });
+    ProjectsAPI.readOptions.mockResolvedValue({
+      data: { actions: { GET: {}, POST: {} } },
+    });
   });
 
   afterEach(() => {

awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { number, string, oneOfType } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -7,6 +7,7 @@ import { ProjectsAPI } from '../../../api';
 import useRequest from '../../../util/useRequest';
 
 function PlaybookSelect({ projectId, isValid, field, onBlur, onError, i18n }) {
+  const [isDisabled, setIsDisabled] = useState(false);
   const {
     result: options,
     request: fetchOptions,
@@ -18,6 +19,7 @@ function PlaybookSelect({ projectId, isValid, field, onBlur, onError, i18n }) {
         return [];
       }
       const { data } = await ProjectsAPI.readPlaybooks(projectId);
+
       const opts = (data || []).map(playbook => ({
         value: playbook,
         key: playbook,
@@ -42,18 +44,30 @@ function PlaybookSelect({ projectId, isValid, field, onBlur, onError, i18n }) {
 
   useEffect(() => {
     if (error) {
-      onError(error);
+      if (error.response.status === 403) {
+        setIsDisabled(true);
+      } else {
+        onError(error);
+      }
     }
   }, [error, onError]);
 
+  const isDisabledData = [
+    {
+      value: field.value || '',
+      label: field.value || '',
+      key: 1,
+      isDisabled: true,
+    },
+  ];
   return (
     <AnsibleSelect
       id="template-playbook"
-      data={options}
+      data={isDisabled ? isDisabledData : options}
       isValid={isValid}
       {...field}
       onBlur={onBlur}
-      isDisabled={isLoading}
+      isDisabled={isLoading || isDisabled}
     />
   );
 }

awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx

@@ -110,23 +110,21 @@ function WorkflowJobTemplateForm({
           value={organizationField.value}
           isValid={!organizationMeta.error}
         />
-
+        <>
-        <FieldWithPrompt
-          fieldId="wfjt-inventory"
-          label={i18n._(t`Inventory`)}
-          promptId="wfjt-ask-inventory-on-launch"
-          promptName="ask_inventory_on_launch"
-          tooltip={i18n._(
-            t`Select an inventory for the workflow. This inventory is applied to all job template nodes that prompt for an inventory.`
-          )}
-        >
           <InventoryLookup
+            promptId="wfjt-ask-inventory-on-launch"
+            promptName="ask_inventory_on_launch"
+            tooltip={i18n._(
+              t`Select an inventory for the workflow. This inventory is applied to all job template nodes that prompt for an inventory.`
+            )}
+            fieldId="wfjt-inventory"
+            isPromptableField
             value={inventoryField.value}
             onBlur={() => inventoryHelpers.setTouched()}
             onChange={value => {
               inventoryHelpers.setValue(value);
             }}
-            required={askInventoryOnLaunchField.value}
+            required={!askInventoryOnLaunchField.value}
             touched={inventoryMeta.touched}
             error={inventoryMeta.error}
           />
@@ -139,8 +137,7 @@ function WorkflowJobTemplateForm({
                 {inventoryMeta.error}
               </div>
             )}
-        </FieldWithPrompt>
+        </>
-
         <FieldWithPrompt
           fieldId="wjft-limit"
           label={i18n._(t`Limit`)}

awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx

@@ -11,6 +11,8 @@ import {
   LabelsAPI,
   OrganizationsAPI,
   InventoriesAPI,
+  ProjectsAPI,
+  CredentialTypesAPI,
 } from '../../../api';
 
 jest.mock('../../../api/models/CredentialTypes');
@@ -18,6 +20,8 @@ jest.mock('../../../api/models/WorkflowJobTemplates');
 jest.mock('../../../api/models/Labels');
 jest.mock('../../../api/models/Organizations');
 jest.mock('../../../api/models/Inventories');
+jest.mock('../../../api/models/Projects');
+jest.mock('../../../api/models/Credentials');
 
 describe('<WorkflowJobTemplateForm/>', () => {
   let wrapper;
@@ -71,6 +75,15 @@ describe('<WorkflowJobTemplateForm/>', () => {
         { id: 2, name: 'Bar' },
       ],
     });
+    CredentialTypesAPI.read.mockResolvedValue({
+      data: { results: [{ id: 1 }] },
+    });
+    InventoriesAPI.readOptions.mockResolvedValue({
+      data: { actions: { GET: {}, POST: {} } },
+    });
+    ProjectsAPI.readOptions.mockResolvedValue({
+      data: { actions: { GET: {}, POST: {} } },
+    });
 
     history = createMemoryHistory({
       initialEntries: ['/templates/workflow_job_template/6/edit'],