Updates select components in awx to use framework async select. Removes unused form. Adds missing resource icon to some form selects.

Author: AlexSCorey

framework/PageForm/Inputs/PageFormAsyncSingleSelect.tsx

@@ -39,6 +39,7 @@ export type PageFormAsyncSingleSelectProps<
   | 'onBrowse'
   | 'queryLabel'
   | 'writeInOption'
+  | 'icon'
 > &
   Pick<
     PageFormGroupProps,

frontend/awx/access/roles/AddRolesForm.tsx

@@ -1,12 +1,10 @@
-import { useCallback } from 'react';
-import { FieldPath, FieldPathValue, FieldValues, Path } from 'react-hook-form';
+import { FieldPath, FieldValues } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { PageFormAsyncSelect } from '../../../../../framework/PageForm/Inputs/PageFormAsyncSelect';
-import { requestGet } from '../../../../common/crud/Data';
-import { AwxItemsResponse } from '../../../common/AwxItemsResponse';
 import { awxAPI } from '../../../common/api/awx-utils';
 import { SystemJobTemplate } from '../../../interfaces/SystemJobTemplate';
-import { useSelectManagementJobs } from '../hooks/useSelectManagementJobs';
+import { PageFormSingleSelectAwxResource } from '../../../common/PageFormSingleSelectAwxResource';
+import { useManagementJobColumns } from '../hooks/useManagementJobColumns';
+import { useManagementJobFilters } from '../hooks/useManagementJobFilters';
 
 export function PageFormManagementJobsSelect<
   TFieldValues extends FieldValues = FieldValues,
@@ -18,36 +16,21 @@ export function PageFormManagementJobsSelect<
   templateId?: number;
 }) {
   const { t } = useTranslation();
-  const openSelectDialog = useSelectManagementJobs();
-  const query = useCallback(async () => {
-    const response = await requestGet<AwxItemsResponse<SystemJobTemplate>>(
-      awxAPI`/system_job_templates/`
-    );
-
-    return Promise.resolve({
-      total: response.count,
-      values: response.results as FieldPathValue<TFieldValues, Path<TFieldValues>>[],
-    });
-  }, []);
+  const tableColumns = useManagementJobColumns();
+  const filters = useManagementJobFilters();
 
   return (
-    <PageFormAsyncSelect<TFieldValues>
+    <PageFormSingleSelectAwxResource<SystemJobTemplate, TFieldValues, TFieldName>
       name={props.name}
+      tableColumns={tableColumns}
+      toolbarFilters={filters}
       id="management-job-template-select"
       label={t('Management job template')}
-      query={query}
-      valueToString={(value) => {
-        if (value && typeof value === 'string') {
-          return value;
-        }
-        return (value as SystemJobTemplate)?.name ?? '';
-      }}
       placeholder={t('Select a management job template')}
-      loadingPlaceholder={t('Loading management job templates...')}
-      loadingErrorText={t('Error loading management job templates')}
+      queryPlaceholder={t('Loading management job templates...')}
+      queryErrorText={t('Error loading management job templates')}
       isRequired={props.isRequired}
-      limit={200}
-      openSelectDialog={openSelectDialog}
+      url={awxAPI`/system_job_templates/`}
     />
   );
 }

frontend/awx/administration/management-jobs/components/PageFormManagementJobsSelect.tsx

@@ -9,6 +9,8 @@ import { AsyncQueryLabel } from '../../common/AsyncQueryLabel';
 import { requestGet } from '../../common/crud/Data';
 import { AwxItemsResponse } from './AwxItemsResponse';
 import { QueryParams, useAwxView } from './useAwxView';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
+import { Icon, Tooltip } from '@patternfly/react-core';
 
 export function PageFormSingleSelectAwxResource<
   Resource extends { id: number; name: string; description?: string | null | undefined },
@@ -22,6 +24,7 @@ export function PageFormSingleSelectAwxResource<
   isRequired?: boolean;
   isDisabled?: string;
   url: string;
+  missingResource?: (resource: Resource) => string;
   toolbarFilters?: IToolbarFilter[];
   tableColumns: ITableColumn<Resource>[];
   defaultSelection?: Value[];
@@ -34,7 +37,7 @@ export function PageFormSingleSelectAwxResource<
   queryParams?: QueryParams;
 }) {
   const id = useID(props);
-
+  const { missingResource } = props;
   const queryOptions = useCallback<PageAsyncSelectOptionsFn<PathValue<FormData, Name>>>(
     async (options) => {
       try {
@@ -65,11 +68,21 @@ export function PageFormSingleSelectAwxResource<
         return {
           remaining: response.count - response.results.length,
           options:
-            response.results?.map((resource) => ({
-              label: resource.name,
-              value: resource.id as PathValue<FormData, Name>,
-              description: resource.description,
-            })) ?? [],
+            response.results?.map((resource) => {
+              const content = missingResource && missingResource(resource);
+              return {
+                label: resource.name,
+                value: resource.id as PathValue<FormData, Name>,
+                description: resource.description,
+                icon: content ? (
+                  <Tooltip content={missingResource(resource)} position="right">
+                    <Icon status="danger">
+                      <ExclamationTriangleIcon />
+                    </Icon>
+                  </Tooltip>
+                ) : undefined,
+              };
+            }) ?? [],
           next: response.results[response.results.length - 1]?.name,
         };
       } catch (error) {
@@ -80,7 +93,7 @@ export function PageFormSingleSelectAwxResource<
         };
       }
     },
-    [props.url, props.queryParams]
+    [missingResource, props.queryParams, props.url]
   );
 
   const [_, setDialog] = usePageDialog();