@flightctl/ui-components 1.1.0-rc4 → 1.1.0-rc5

package/src/components/Catalog/CatalogPage.tsx

@@ -0,0 +1,460 @@
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Divider,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  Gallery,
+  MenuToggle,
+  PageSection,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+  TreeView,
+  TreeViewDataItem,
+} from '@patternfly/react-core';
+import { SearchIcon } from '@patternfly/react-icons/dist/js/icons/search-icon';
+import { EllipsisVIcon } from '@patternfly/react-icons/dist/js/icons/ellipsis-v-icon';
+import * as React from 'react';
+import { Catalog, CatalogItem, CatalogItemCategory, CatalogItemType, CatalogList } from '@flightctl/types/alpha';
+
+import { useTranslation } from '../../hooks/useTranslation';
+import CatalogItemCard from './CatalogItemCard';
+import CatalogPageToolbar, { CreateCatalogItemBtn, ImportCatalogBtn } from './CatalogPageToolbar';
+import { CatalogFilter, useCatalogFilter } from './useCatalogFilter';
+import CatalogItemDetails from './CatalogItemDetails';
+import { appTypeIds, useCatalogItems } from './useCatalogs';
+import ListPageBody from '../ListPage/ListPageBody';
+import ResourceListEmptyState from '../common/ResourceListEmptyState';
+import { RESOURCE, VERB } from '../../types/rbac';
+import { usePermissionsContext } from '../common/PermissionsContext';
+import { ROUTE, useNavigate } from '../../hooks/useNavigate';
+import ListPage from '../ListPage/ListPage';
+import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
+import DeleteCatalogModal from './DeleteCatalogModal';
+import CreateCatalogModal from './AddCatalogItemWizard/CreateCatalogModal';
+import WithTooltip from '../common/WithTooltip';
+import ResourceSyncImportStatus from '../ResourceSync/ResourceSyncImportStatus';
+import CatalogLandingPage, { CatalogLandingPageContent, useLandingPagePermissions } from './CatalogLandingPage';
+
+import './CatalogPage.css';
+
+type CatalogPageContentProps = {
+  canInstall: boolean;
+  targetHasOwner?: boolean;
+  onInstall: (installItem: { item: CatalogItem; channel: string; version: string }) => void;
+  showCatalogMgmt?: boolean;
+  canEditCatalog?: boolean;
+  canDeleteCatalog?: boolean;
+  targetSet?: boolean;
+};
+
+type CatalogEmptyStateProps = {
+  hasFilters: boolean;
+  showCatalogMgmt: boolean;
+  isUpdating: boolean;
+};
+
+const CatalogEmptyState = ({ hasFilters, showCatalogMgmt, isUpdating }: CatalogEmptyStateProps) => {
+  const { t } = useTranslation();
+
+  const noResults = hasFilters || isUpdating;
+
+  return (
+    <ResourceListEmptyState icon={SearchIcon} titleText={noResults ? t('No results found') : t('No catalog items yet')}>
+      <EmptyStateBody>
+        <Stack>
+          {noResults ? (
+            <StackItem>
+              {t('No catalog items match the selected filters or search. Try adjusting the category or search.')}
+            </StackItem>
+          ) : (
+            <>
+              <StackItem>
+                {t('Catalog items are applications and system images you can deploy to your devices.')}
+              </StackItem>
+            </>
+          )}
+        </Stack>
+      </EmptyStateBody>
+      {!noResults && !isUpdating && showCatalogMgmt && (
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <CreateCatalogItemBtn />
+            <ImportCatalogBtn />
+          </EmptyStateActions>
+        </EmptyStateFooter>
+      )}
+    </ResourceListEmptyState>
+  );
+};
+
+const CatalogPageFilter = ({ catalogFilter }: { catalogFilter: CatalogFilter }) => {
+  const { t } = useTranslation();
+
+  const handleCheck = (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem) => {
+    const id = item.id as string;
+
+    if (id === CatalogItemCategory.CatalogItemCategoryApplication) {
+      if (appTypeIds.every((id) => catalogFilter.itemType.includes(id))) {
+        catalogFilter.setItemType(catalogFilter.itemType.filter((id) => !appTypeIds.includes(id)));
+      } else {
+        const newTypes = catalogFilter.itemType.filter((id) => !appTypeIds.includes(id));
+        catalogFilter.setItemType([...newTypes, ...appTypeIds]);
+      }
+    } else {
+      const newTypes = catalogFilter.itemType.includes(id as CatalogItemType)
+        ? catalogFilter.itemType.filter((c) => c !== id)
+        : [...catalogFilter.itemType, id as CatalogItemType];
+      catalogFilter.setItemType(newTypes);
+    }
+  };
+
+  const osTypeChecked = catalogFilter.itemType.includes(CatalogItemType.CatalogItemTypeOS);
+  const anyAppTypeChecked = appTypeIds.some((t) => catalogFilter.itemType.includes(t));
+
+  const filterData: TreeViewDataItem[] = [
+    {
+      name: t('Operating system'),
+      id: CatalogItemType.CatalogItemTypeOS,
+      checkProps: {
+        checked: osTypeChecked,
+      },
+    },
+    {
+      name: t('Application'),
+      id: CatalogItemCategory.CatalogItemCategoryApplication,
+      checkProps: {
+        checked: appTypeIds.every((id) => catalogFilter.itemType.includes(id))
+          ? true
+          : anyAppTypeChecked
+            ? null
+            : false,
+      },
+      defaultExpanded: true,
+      children: [
+        {
+          name: t('Container'),
+          id: CatalogItemType.CatalogItemTypeContainer,
+          checkProps: {
+            checked: catalogFilter.itemType.includes(CatalogItemType.CatalogItemTypeContainer),
+          },
+        },
+        {
+          name: t('Helm'),
+          id: CatalogItemType.CatalogItemTypeHelm,
+          checkProps: {
+            checked: catalogFilter.itemType.includes(CatalogItemType.CatalogItemTypeHelm),
+          },
+        },
+        {
+          name: t('Quadlet'),
+          id: CatalogItemType.CatalogItemTypeQuadlet,
+          checkProps: {
+            checked: catalogFilter.itemType.includes(CatalogItemType.CatalogItemTypeQuadlet),
+          },
+        },
+        {
+          name: t('Compose'),
+          id: CatalogItemType.CatalogItemTypeCompose,
+          checkProps: {
+            checked: catalogFilter.itemType.includes(CatalogItemType.CatalogItemTypeCompose),
+          },
+        },
+        {
+          name: t('Data'),
+          id: CatalogItemType.CatalogItemTypeData,
+          checkProps: {
+            checked: catalogFilter.itemType.includes(CatalogItemType.CatalogItemTypeData),
+          },
+        },
+      ],
+    },
+  ];
+
+  return <TreeView hasAnimations data={filterData} onCheck={handleCheck} hasCheckboxes />;
+};
+
+export const CatalogPageContent = ({
+  canInstall,
+  targetHasOwner,
+  onInstall,
+  showCatalogMgmt,
+  canEditCatalog,
+  canDeleteCatalog,
+  targetSet,
+}: CatalogPageContentProps) => {
+  const { shouldShowCards, permissions: catalogPermissions } = useLandingPagePermissions();
+  const [showGettingStarted, setShowGettingStarted] = React.useState(false);
+  const [catalogList, catalogLoading, catalogErr, refetchCatalogs] = useFetchPeriodically<CatalogList>({
+    endpoint: 'catalogs',
+  });
+  const [catalogMenuOpen, setCatalogMenuOpen] = React.useState<string>();
+  const [selectedItem, setSelectedItem] = React.useState<{ itemName: string; catalog: string }>();
+  const [catalogToEdit, setCatalogToEdit] = React.useState<Catalog>();
+  const [catalogToDelete, setCatalogToDelete] = React.useState<Catalog>();
+  const { t } = useTranslation();
+  const catalogFilter = useCatalogFilter();
+
+  const [catalogItems, isLoading, error, pagination, isUpdating, refetch] = useCatalogItems(catalogFilter);
+
+  const item = selectedItem
+    ? catalogItems?.find(
+        ({ metadata }) => metadata.name === selectedItem.itemName && metadata.catalog === selectedItem.catalog,
+      )
+    : undefined;
+
+  const filterIsEmpty = catalogFilter.itemType.length === 0;
+
+  return (
+    <>
+      <ListPageBody error={error || catalogErr} loading={isLoading || catalogLoading}>
+        <div>
+          <CatalogPageToolbar
+            {...catalogFilter}
+            pagination={pagination}
+            isUpdating={isUpdating}
+            showCatalogMgmt={!!showCatalogMgmt}
+          />
+          {!catalogList?.items.length ? (
+            <PageSection hasBodyWrapper={false} type="wizard">
+              <div className="fctl-catalog-page">
+                <CatalogLandingPage />
+              </div>
+            </PageSection>
+          ) : (
+            <PageSection hasBodyWrapper={false} type="wizard">
+              <Split hasGutter>
+                <SplitItem className="fctl-catalog-page fctl-catalog-page__filters">
+                  <DescriptionList>
+                    <DescriptionListGroup>
+                      <DescriptionListTerm>{t('Catalog')}</DescriptionListTerm>
+                      <DescriptionListDescription>
+                        <TreeView
+                          hasAnimations
+                          onCheck={(_, item) => {
+                            catalogFilter.catalogs.includes(item.id || '')
+                              ? catalogFilter.setCatalogs((catalogs) => catalogs.filter((c) => c !== item.id || ''))
+                              : catalogFilter.setCatalogs((catalogs) => [...catalogs, item.id || '']);
+                          }}
+                          hasCheckboxes
+                          data={catalogList.items.map((c) => {
+                            const canDelete = !c.metadata.owner && canDeleteCatalog;
+                            return {
+                              name: c.spec.displayName || c.metadata.name || '',
+                              id: c.metadata.name || '',
+                              checkProps: {
+                                checked: !!c.metadata.name && catalogFilter.catalogs.includes(c.metadata.name),
+                              },
+                              action: showCatalogMgmt ? (
+                                <Dropdown
+                                  isOpen={catalogMenuOpen === c.metadata.name}
+                                  onOpenChange={(isOpen) => {
+                                    if (isOpen) {
+                                      setCatalogMenuOpen(c.metadata.name);
+                                    } else if (catalogMenuOpen === c.metadata.name) {
+                                      setCatalogMenuOpen(undefined);
+                                    }
+                                  }}
+                                  onSelect={() => setCatalogMenuOpen(undefined)}
+                                  toggle={(toggleRef) => (
+                                    <MenuToggle
+                                      ref={toggleRef}
+                                      isExpanded={catalogMenuOpen === c.metadata.name}
+                                      onClick={() => setCatalogMenuOpen(c.metadata.name)}
+                                      variant="plain"
+                                      icon={<EllipsisVIcon />}
+                                      aria-label={t('Actions dropdown')}
+                                    />
+                                  )}
+                                >
+                                  <DropdownList>
+                                    <DropdownItem onClick={() => setCatalogToEdit(c)}>
+                                      {!!c.metadata.owner || !canEditCatalog ? t('View') : t('Edit')}
+                                    </DropdownItem>
+                                    <WithTooltip
+                                      showTooltip={!!c.metadata.owner}
+                                      content={t(
+                                        'This catalog is managed by a resource sync and cannot be directly removed. Either remove the catalog definition from the resource sync configuration, or delete the resource sync first.',
+                                      )}
+                                    >
+                                      <DropdownItem
+                                        isAriaDisabled={!canDelete}
+                                        onClick={canDelete ? () => setCatalogToDelete(c) : undefined}
+                                      >
+                                        {t('Remove')}
+                                      </DropdownItem>
+                                    </WithTooltip>
+                                  </DropdownList>
+                                </Dropdown>
+                              ) : undefined,
+                            };
+                          })}
+                        />
+                      </DescriptionListDescription>
+                    </DescriptionListGroup>
+                    <DescriptionListGroup>
+                      <DescriptionListTerm>{t('Category')}</DescriptionListTerm>
+                      <DescriptionListDescription>
+                        <CatalogPageFilter catalogFilter={catalogFilter} />
+                      </DescriptionListDescription>
+                    </DescriptionListGroup>
+                    {shouldShowCards && showCatalogMgmt && (
+                      <DescriptionListGroup>
+                        <DescriptionListTerm>{t('Get started')}</DescriptionListTerm>
+                        <DescriptionListDescription>
+                          <TreeView
+                            data={[
+                              {
+                                name: t('Help cards'),
+                                id: 'help-cards',
+                                checkProps: {
+                                  checked: showGettingStarted,
+                                },
+                              },
+                            ]}
+                            onCheck={() => setShowGettingStarted((prev) => !prev)}
+                            hasCheckboxes
+                          />
+                        </DescriptionListDescription>
+                      </DescriptionListGroup>
+                    )}
+                  </DescriptionList>
+                </SplitItem>
+                <Divider
+                  orientation={{
+                    default: 'vertical',
+                  }}
+                />
+                <SplitItem isFilled className="fctl-catalog-page">
+                  {!isLoading && catalogItems.length === 0 ? (
+                    <CatalogEmptyState
+                      hasFilters={!filterIsEmpty || !!catalogFilter.nameFilter}
+                      showCatalogMgmt={!!showCatalogMgmt}
+                      isUpdating={isUpdating}
+                    />
+                  ) : (
+                    <Stack hasGutter>
+                      {showGettingStarted && (
+                        <StackItem>
+                          <CatalogLandingPageContent permissions={catalogPermissions} />
+                        </StackItem>
+                      )}
+                      <StackItem>
+                        <Gallery hasGutter>
+                          {catalogItems.map((ci) => (
+                            <CatalogItemCard
+                              catalogItem={ci}
+                              key={`${ci.metadata.catalog}/${ci.metadata.name}`}
+                              onSelect={() =>
+                                setSelectedItem((val) => {
+                                  if (
+                                    !val ||
+                                    val.itemName !== ci.metadata.name ||
+                                    val.catalog !== ci.metadata.catalog
+                                  ) {
+                                    return {
+                                      itemName: ci.metadata.name || '',
+                                      catalog: ci.metadata.catalog,
+                                    };
+                                  } else {
+                                    return undefined;
+                                  }
+                                })
+                              }
+                            />
+                          ))}
+                        </Gallery>
+                      </StackItem>
+                    </Stack>
+                  )}
+                </SplitItem>
+              </Split>
+            </PageSection>
+          )}
+        </div>
+      </ListPageBody>
+      {!!item && (
+        <CatalogItemDetails
+          onClose={() => setSelectedItem(undefined)}
+          item={item}
+          canInstall={canInstall}
+          targetHasOwner={targetHasOwner}
+          onInstall={onInstall}
+          refetch={refetch}
+          showCatalogMgmt={!!showCatalogMgmt}
+          targetSet={!!targetSet}
+        />
+      )}
+      {!!catalogToEdit && (
+        <CreateCatalogModal
+          catalog={catalogToEdit}
+          onClose={() => setCatalogToEdit(undefined)}
+          onSuccess={() => {
+            setCatalogToEdit(undefined);
+            refetchCatalogs();
+          }}
+        />
+      )}
+      {!!catalogToDelete && (
+        <DeleteCatalogModal
+          catalogId={catalogToDelete.metadata.name || ''}
+          catalogDisplayName={catalogToDelete.spec.displayName || catalogToDelete.metadata.name || ''}
+          onClose={() => setCatalogToDelete(undefined)}
+          onDeleteSuccess={() => {
+            setCatalogToDelete(undefined);
+            refetchCatalogs();
+            refetch();
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+const catalogPagePermissions = [
+  { kind: RESOURCE.FLEET, verb: VERB.PATCH },
+  { kind: RESOURCE.DEVICE, verb: VERB.PATCH },
+  { kind: RESOURCE.CATALOG, verb: VERB.PATCH },
+  { kind: RESOURCE.CATALOG, verb: VERB.DELETE },
+];
+
+const CatalogPage = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { checkPermissions } = usePermissionsContext();
+  const [canEditFleet, canEditDevice, canEditCatalog, canDeleteCatalog] = checkPermissions(catalogPagePermissions);
+
+  return (
+    <>
+      <ResourceSyncImportStatus type="catalog" />
+      <ListPage title={t('Software Catalog')}>
+        <CatalogPageContent
+          canInstall={canEditFleet || canEditDevice}
+          canEditCatalog={canEditCatalog}
+          canDeleteCatalog={canDeleteCatalog}
+          onInstall={({ item, channel, version }) => {
+            const params = new URLSearchParams({
+              channel,
+              version,
+            });
+            navigate({
+              route: ROUTE.CATALOG_INSTALL,
+              postfix: `${item.metadata.catalog}/${item.metadata.name}?${params.toString()}`,
+            });
+          }}
+          showCatalogMgmt
+        />
+      </ListPage>
+    </>
+  );
+};
+
+export default CatalogPage;

package/src/components/Catalog/CatalogPageToolbar.tsx

@@ -0,0 +1,92 @@
+import { Button, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core';
+import * as React from 'react';
+import { CatalogItemList } from '@flightctl/types/alpha';
+
+import TableTextSearch from '../Table/TableTextSearch';
+import { useTranslation } from '../../hooks/useTranslation';
+import { ROUTE, useNavigate } from '../../hooks/useNavigate';
+import { CatalogFilter } from './useCatalogFilter';
+import TablePagination from '../Table/TablePagination';
+import { PaginationDetails } from '../../hooks/useTablePagination';
+import { RESOURCE, VERB } from '../../types/rbac';
+import { usePermissionsContext } from '../common/PermissionsContext';
+
+const createItemPermissions = [
+  { kind: RESOURCE.CATALOG, verb: VERB.LIST },
+  { kind: RESOURCE.CATALOG_ITEM, verb: VERB.CREATE },
+];
+
+export const CreateCatalogItemBtn = () => {
+  const { checkPermissions } = usePermissionsContext();
+  const [canListCatalog, canCreate] = checkPermissions(createItemPermissions);
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  return (
+    canCreate &&
+    canListCatalog && (
+      <Button variant="primary" onClick={() => navigate(ROUTE.CATALOG_ADD_ITEM)}>
+        {t('Create item')}
+      </Button>
+    )
+  );
+};
+
+const importPermissions = [
+  { kind: RESOURCE.RESOURCE_SYNC, verb: VERB.CREATE },
+  { kind: RESOURCE.REPOSITORY, verb: VERB.LIST },
+];
+
+export const ImportCatalogBtn = () => {
+  const { checkPermissions } = usePermissionsContext();
+  const [canCreateRs, canListRepo] = checkPermissions(importPermissions);
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  return (
+    canCreateRs &&
+    canListRepo && (
+      <Button variant="secondary" onClick={() => navigate(ROUTE.CATALOG_IMPORT)}>
+        {t('Import catalogs')}
+      </Button>
+    )
+  );
+};
+
+type CatalogPageToolbarProps = CatalogFilter & {
+  pagination: PaginationDetails<CatalogItemList>;
+  isUpdating: boolean;
+  showCatalogMgmt: boolean;
+};
+
+const CatalogPageToolbar: React.FC<CatalogPageToolbarProps> = ({
+  nameFilter,
+  setNameFilter,
+  pagination,
+  isUpdating,
+  showCatalogMgmt,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Toolbar inset={{ default: 'insetNone' }}>
+      <ToolbarContent>
+        <ToolbarItem>
+          <TableTextSearch value={nameFilter} setValue={setNameFilter} placeholder={t('Search by name')} />
+        </ToolbarItem>
+        {showCatalogMgmt && (
+          <>
+            <ToolbarItem>
+              <CreateCatalogItemBtn />
+            </ToolbarItem>
+            <ToolbarItem>
+              <ImportCatalogBtn />
+            </ToolbarItem>
+          </>
+        )}
+        <ToolbarItem variant="pagination" align={{ default: 'alignEnd' }}>
+          <TablePagination pagination={pagination} isUpdating={isUpdating} />
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+};
+
+export default CatalogPageToolbar;