Role imports - show imports list (#4760)

No-Issue

src/api/legacy-role.ts

@@ -12,6 +12,7 @@ export class API extends LegacyAPI {
     return super.get(id + '/versions');
   }
 
+  // get(id)
   // list(params?)
 }
 

src/components/ansible-role/import-list.tsx

@@ -0,0 +1,199 @@
+import { t } from '@lingui/macro';
+import cx from 'classnames';
+import React, { useEffect, useState } from 'react';
+import { LegacyImportAPI, LegacyRoleImportDetailType } from 'src/api';
+import {
+  AlertType,
+  DateComponent,
+  EmptyStateFilter,
+  EmptyStateNoData,
+  HubListToolbar,
+  LoadingPageSpinner,
+  Pagination,
+} from 'src/components';
+import { filterIsSet, handleHttpError } from 'src/utilities';
+
+interface IProps {
+  addAlert: (alert: AlertType) => void;
+  params: {
+    page?: number;
+    page_size?: number;
+    role_id?: number;
+    sort?: string;
+    state?: string;
+  };
+  selectImport: (item: LegacyRoleImportDetailType) => void;
+  selectedImport?: LegacyRoleImportDetailType;
+  updateParams: (params) => void;
+}
+
+const StatusIcon = ({ state }: { state: string }) => (
+  <i
+    className={`fa status-icon ${
+      {
+        running: 'fa-spin fa-spinner warning',
+        waiting: 'fa-spin fa-spinner warning',
+        success: 'fa-circle success',
+        completed: 'fa-circle success',
+      }[state?.toLowerCase()] || 'fa-circle failed'
+    }`}
+  />
+);
+
+export function RoleImportList({
+  addAlert,
+  params,
+  selectImport,
+  selectedImport,
+  updateParams,
+}: IProps) {
+  const [count, setCount] = useState(0);
+  const [imports, setImports] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const query = () => {
+    setLoading(true);
+    LegacyImportAPI.list({
+      page: 1,
+      page_size: 10,
+      sort: '-created',
+      ...params,
+      detail: true,
+    })
+      .then(({ data: { count, results } }) => {
+        setImports(results);
+        setCount(count);
+      })
+      .catch(
+        handleHttpError(t`Failed to list role imports`, () => null, addAlert),
+      )
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    query();
+  }, [params]);
+
+  const statusMap = {
+    SUCCESS: t`Completed`,
+    FAILED: t`Failed`,
+    RUNNING: t`Running`,
+    WAITING: t`Waiting`,
+  };
+
+  return (
+    <div className='import-list'>
+      <HubListToolbar
+        count={count}
+        filterConfig={[
+          /* FIXME: Bad Request: Enter a number.
+          {
+            id: 'role_name',
+            title: t`Name`,
+          },
+          {
+            id: 'namespace_name',
+            title: t`Namespace`,
+          }, */
+          {
+            id: 'state',
+            title: t`Status`,
+            inputType: 'select',
+            options: [
+              {
+                id: 'SUCCESS',
+                title: t`Completed`,
+              },
+              {
+                id: 'FAILED',
+                title: t`Failed`,
+              },
+              {
+                id: 'RUNNING',
+                title: t`Running`,
+              },
+              {
+                id: 'WAITING',
+                title: t`Waiting`,
+              },
+            ],
+          },
+        ]}
+        ignoredParams={[
+          'limit',
+          'offset',
+          'order_by',
+          'ordering',
+          'page',
+          'page_size',
+          'sort',
+        ]}
+        params={params}
+        updateParams={updateParams}
+      />
+
+      <div data-cy='import-list-data'>
+        {loading ? (
+          <div className='loading'>
+            <LoadingPageSpinner />
+          </div>
+        ) : !count &&
+          filterIsSet(params, ['role_name', 'namespace_name', 'state']) ? (
+          <EmptyStateFilter />
+        ) : !count ? (
+          <EmptyStateNoData
+            title={t`No imports`}
+            description={t`There have not been any imports.`}
+          />
+        ) : (
+          <div>
+            {imports.map((item) => (
+              <div
+                onClick={() => selectImport(item)}
+                key={item.pulp_id}
+                className={cx({
+                  clickable: true,
+                  'list-container': true,
+                  'hub-c-toolbar__item-selected-item':
+                    item.pulp_id === selectedImport?.pulp_id,
+                })}
+                data-cy={`RoleImportList-row-${item.role_id}`}
+              >
+                <div className='left'>
+                  <StatusIcon state={item.state} />
+                </div>
+                <div className='right'>
+                  <div>
+                    <div>
+                      <span data-cy='item-name'>
+                        {item.summary_fields?.github_user}/
+                        {item.summary_fields?.github_repo}
+                      </span>{' '}
+                    </div>
+                    <div className='sub-text'>
+                      Status: {statusMap[item.state] || item.state}{' '}
+                      {item.summary_fields?.task_messages?.at(-1)?.id ? (
+                        <DateComponent
+                          date={item.summary_fields.task_messages.at(-1).id}
+                        />
+                      ) : null}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {!loading && count ? (
+        <Pagination
+          count={count}
+          isCompact
+          params={params}
+          updateParams={updateParams}
+        />
+      ) : null}
+    </div>
+  );
+}

src/components/index.ts

@@ -1,4 +1,5 @@
 export { AboutModalWindow } from './about-modal/about-modal';
+export { RoleImportList } from './ansible-role/import-list';
 export { LegacyNamespaceListItem } from './ansible-role/namespace-item';
 export { ProviderLink } from './ansible-role/provider-link';
 export { RoleImportForm } from './ansible-role/role-import-form';

src/components/my-imports/import-console.tsx

@@ -16,7 +16,7 @@ interface IProps {
   collection?: CollectionVersionSearch;
   empty?: boolean;
   followMessages?: boolean;
-  loading: boolean;
+  loading?: boolean;
   roleImport?: LegacyRoleImportDetailType;
   selectedImport?: ImportListType;
   setFollowMessages?: (follow: boolean) => void;