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

package/src/components/Device/DeviceDetails/DeviceDetailsPage.tsx

@@ -32,6 +32,7 @@ import PageWithPermissions from '../../common/PageWithPermissions';
 import YamlEditor from '../../common/CodeEditor/YamlEditor';
 import DeviceAliasEdit from './DeviceAliasEdit';
 import { SystemRestoreBanners } from '../../SystemRestore/SystemRestoreBanners';
+import DeviceDetailsCatalog from './DeviceDetailsCatalog';
 
 type DeviceDetailsPageProps = React.PropsWithChildren<{ hideTerminal?: boolean }>;
 
@@ -120,6 +121,7 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
       error={error}
       id={deviceId}
       breadcrumbTitle={deviceAlias}
+      titleDataTestId="device-details-title"
       title={
         canEdit ? (
           /* key={deviceAlias} is needed for the input field to be initialized with the alias as its value */
@@ -149,8 +151,9 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
       resourceType="Devices"
       resourceTypeLabel={t('Devices')}
       nav={
-        <TabsNav aria-label="Device details tabs" tabKeys={['details', 'yaml', 'terminal', 'events']}>
+        <TabsNav aria-label="Device details tabs" tabKeys={['details', 'catalog', 'yaml', 'terminal', 'events']}>
           <Tab eventKey="details" title={t('Details')} />
+          {isEnrolled && <Tab eventKey="catalog" title={t('Catalog')} />}
           <Tab eventKey="yaml" title={t('YAML')} />
           {!hideTerminal && canOpenTerminal && <Tab eventKey="terminal" title={t('Terminal')} />}
           <Tab eventKey="events" title={t('Events')} />
@@ -192,6 +195,12 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
               </DeviceDetailsTab>
             }
           />
+          {isEnrolled && (
+            <Route
+              path="catalog"
+              element={<DeviceDetailsCatalog device={device} refetch={refetch} canEdit={hasEditPermissions} />}
+            />
+          )}
           <Route
             path="yaml"
             element={

package/src/components/Device/DevicesPage/DecommissionedDeviceTableRow.tsx

@@ -34,7 +34,7 @@ const DecommissionedDeviceTableRow = ({
   const deviceAlias = device.metadata.labels?.alias;
 
   return (
-    <Tr>
+    <Tr data-testid={`decommissioned-device-row-${rowIndex}`}>
       <Td
         select={{
           rowIndex,
@@ -43,13 +43,17 @@ const DecommissionedDeviceTableRow = ({
         }}
       />
       <Td dataLabel={t('Name')}>
-        <ResourceLink id={deviceName} routeLink={ROUTE.DEVICE_DETAILS} />
+        <ResourceLink
+          id={deviceName}
+          routeLink={ROUTE.DEVICE_DETAILS}
+          data-testid={`decommissioned-device-name-link-${rowIndex}`}
+        />
       </Td>
       <Td dataLabel={t('Device status')}>
         <DeviceLifecycleStatus device={device} />
       </Td>
       {canDelete && (
-        <Td isActionCell>
+        <Td isActionCell data-testid={`decommissioned-device-row-actions-${rowIndex}`}>
           <ActionsColumn
             items={[
               ...(canEdit

package/src/components/Device/DevicesPage/DecommissionedDevicesTable.tsx

@@ -94,6 +94,7 @@ const DecommissionedDevicesTable = ({
                   isDisabled={!hasSelectedRows}
                   onClick={() => setIsMassDeleteModalOpen(true)}
                   variant="secondary"
+                  data-testid="toolbar-delete-forever"
                 >
                   {t('Delete forever')}
                 </Button>
@@ -108,6 +109,7 @@ const DecommissionedDevicesTable = ({
                   setOnlyDecommissioned(false);
                 }}
                 ouiaId={t('Show decommissioned devices')}
+                data-testid="show-decommissioned-devices-switch"
               />
             </ToolbarItem>
           </ToolbarGroup>

package/src/components/Device/DevicesPage/DevicesPage.tsx

@@ -41,7 +41,13 @@ const DevicesPage = ({ canListER }: { canListER: boolean }) => {
     onlyDecommissioned ? undefined : removeDecommissionedDevices,
   );
 
-  const [data, loading, error, updating, refetch] = useDevices({
+  const {
+    devices: data,
+    isLoading: loading,
+    error,
+    isUpdating: updating,
+    refetch,
+  } = useDevices({
     nameOrAlias,
     ownerFleets,
     onlyDecommissioned,

package/src/components/Device/DevicesPage/EnrolledDeviceTableRow.tsx

@@ -12,17 +12,21 @@ import SystemUpdateStatus from '../../Status/SystemUpdateStatus';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
 import ResourceLink from '../../common/ResourceLink';
+import { ApiSortTableColumn } from '../../Table/Table';
 
 type EnrolledDeviceTableRowProps = {
   device: Device;
   rowIndex: number;
   onRowSelect: (device: Device) => OnSelect;
   isRowSelected: (device: Device) => boolean;
-  canEdit: boolean;
-  canDecommission: boolean;
-  decommissionAction: ListAction;
-  canResume: boolean;
-  resumeAction: ListAction;
+  canEdit?: boolean;
+  canDecommission?: boolean;
+  decommissionAction?: ListAction;
+  canResume?: boolean;
+  resumeAction?: ListAction;
+  singleSelect?: boolean;
+  hideActions?: boolean;
+  deviceColumns: ApiSortTableColumn[];
 };
 
 const EnrolledDeviceTableRow = ({
@@ -35,6 +39,9 @@ const EnrolledDeviceTableRow = ({
   decommissionAction,
   canResume,
   resumeAction,
+  singleSelect,
+  hideActions,
+  deviceColumns,
 }: EnrolledDeviceTableRowProps) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -44,70 +51,92 @@ const EnrolledDeviceTableRow = ({
   const decommissionDisabledReason = getDecommissionDisabledReason(device, t);
   const resumeDisabledReason = getResumeDisabledReason(device, t);
 
+  const columnIds = React.useMemo(() => deviceColumns.map(({ id }) => id), [deviceColumns]);
+
   return (
-    <Tr>
+    <Tr data-testid={`enrolled-device-row-${rowIndex}`}>
       <Td
         select={{
           rowIndex,
           onSelect: onRowSelect(device),
           isSelected: isRowSelected(device),
+          variant: singleSelect ? 'radio' : 'checkbox',
         }}
       />
-      <Td dataLabel={t('Alias')}>
-        <ResourceLink id={deviceName} name={deviceAlias || t('Untitled')} routeLink={ROUTE.DEVICE_DETAILS} />
-      </Td>
-      <Td dataLabel={t('Name')}>
-        <ResourceLink id={deviceName} />
-      </Td>
-      <Td dataLabel={t('Fleet')}>
-        <DeviceFleet device={device} />
-      </Td>
-      <Td dataLabel={t('Application status')}>
-        <ApplicationSummaryStatus statusSummary={device.status?.applicationsSummary} />
-      </Td>
-      <Td dataLabel={t('Device status')}>
-        <DeviceStatus deviceStatus={device.status} />
-      </Td>
-      <Td dataLabel={t('Update status')}>
-        <SystemUpdateStatus deviceStatus={device.status} />
-      </Td>
-      <Td isActionCell>
-        <ActionsColumn
-          items={[
-            ...(canEdit
-              ? [
-                  {
-                    title: t('Edit device configurations'),
-                    onClick: () => navigate({ route: ROUTE.DEVICE_EDIT, postfix: deviceName }),
-                    ...editActionProps,
-                  },
-                ]
-              : []),
-            {
-              title: t('View device details'),
-              onClick: () => navigate({ route: ROUTE.DEVICE_DETAILS, postfix: deviceName }),
-            },
-            ...(canResume
-              ? [
-                  resumeAction({
-                    resourceId: deviceName,
-                    resourceName: deviceAlias,
-                    disabledReason: resumeDisabledReason,
-                  }),
-                ]
-              : []),
-            ...(canDecommission
-              ? [
-                  decommissionAction({
-                    resourceId: deviceName,
-                    resourceName: deviceAlias,
-                    disabledReason: decommissionDisabledReason,
-                  }),
-                ]
-              : []),
-          ]}
-        />
-      </Td>
+      {columnIds.includes('alias') && (
+        <Td dataLabel={t('Alias')}>
+          <ResourceLink
+            id={deviceName}
+            name={deviceAlias || t('Untitled')}
+            routeLink={ROUTE.DEVICE_DETAILS}
+            data-testid={`device-name-link-${rowIndex}`}
+          />
+        </Td>
+      )}
+      {columnIds.includes('name') && (
+        <Td dataLabel={t('Name')}>
+          <ResourceLink id={deviceName} data-testid={`device-internal-name-link-${rowIndex}`} />
+        </Td>
+      )}
+      {columnIds.includes('fleet') && (
+        <Td dataLabel={t('Fleet')}>
+          <DeviceFleet device={device} />
+        </Td>
+      )}
+      {columnIds.includes('appStatus') && (
+        <Td dataLabel={t('Application status')}>
+          <ApplicationSummaryStatus statusSummary={device.status?.applicationsSummary} />
+        </Td>
+      )}
+      {columnIds.includes('deviceStatus') && (
+        <Td dataLabel={t('Device status')}>
+          <DeviceStatus deviceStatus={device.status} />
+        </Td>
+      )}
+      {columnIds.includes('updateStatus') && (
+        <Td dataLabel={t('Update status')}>
+          <SystemUpdateStatus deviceStatus={device.status} />
+        </Td>
+      )}
+      {!hideActions && (
+        <Td isActionCell data-testid={`device-row-actions-${rowIndex}`}>
+          <ActionsColumn
+            items={[
+              ...(canEdit
+                ? [
+                    {
+                      title: t('Edit device configurations'),
+                      onClick: () => navigate({ route: ROUTE.DEVICE_EDIT, postfix: deviceName }),
+                      ...editActionProps,
+                    },
+                  ]
+                : []),
+              {
+                title: t('View device details'),
+                onClick: () => navigate({ route: ROUTE.DEVICE_DETAILS, postfix: deviceName }),
+              },
+              ...(canResume && resumeAction
+                ? [
+                    resumeAction({
+                      resourceId: deviceName,
+                      resourceName: deviceAlias,
+                      disabledReason: resumeDisabledReason,
+                    }),
+                  ]
+                : []),
+              ...(canDecommission && decommissionAction
+                ? [
+                    decommissionAction({
+                      resourceId: deviceName,
+                      resourceName: deviceAlias,
+                      disabledReason: decommissionDisabledReason,
+                    }),
+                  ]
+                : []),
+            ]}
+          />
+        </Td>
+      )}
     </Tr>
   );
 };

package/src/components/Device/DevicesPage/EnrolledDevicesTable.tsx

@@ -48,25 +48,31 @@ interface EnrolledDeviceTableProps {
   // getSortParams: (columnIndex: number) => ThProps['sort'];
 }
 
-const getDeviceColumns = (t: TFunction): ApiSortTableColumn[] => [
+export const getDeviceTableColumns = (t: TFunction): ApiSortTableColumn[] => [
   {
+    id: 'alias',
     name: t('Alias'),
   },
   {
+    id: 'name',
     name: t('Name'),
   },
   {
+    id: 'fleet',
     name: t('Fleet'),
   },
   {
+    id: 'appStatus',
     name: t('Application status'),
     helperText: getApplicationStatusHelperText(t),
   },
   {
+    id: 'deviceStatus',
     name: t('Device status'),
     helperText: getDeviceStatusHelperText(t),
   },
   {
+    id: 'updateStatus',
     name: t('Update status'),
     helperText: getUpdateStatusHelperText(t),
   },
@@ -99,7 +105,7 @@ const EnrolledDevicesTable = ({
 
   const [addDeviceModal, setAddDeviceModal] = React.useState(false);
   const [isMassDecommissionModalOpen, setIsMassDecommissionModalOpen] = React.useState(false);
-  const deviceColumns = React.useMemo(() => getDeviceColumns(t), [t]);
+  const deviceColumns = React.useMemo(() => getDeviceTableColumns(t), [t]);
 
   const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
 
@@ -156,6 +162,7 @@ const EnrolledDevicesTable = ({
               isDisabled={!hasSelectedRows}
               onClick={() => setIsMassDecommissionModalOpen(true)}
               variant="secondary"
+              data-testid="toolbar-decommission-devices"
             >
               {t('Decommission devices')}
             </Button>
@@ -171,6 +178,7 @@ const EnrolledDevicesTable = ({
               setOnlyDecommissioned(true);
             }}
             ouiaId={t('Show decommissioned devices')}
+            data-testid="show-decommissioned-devices-switch"
           />
         </ToolbarItem>
       </DeviceTableToolbar>
@@ -183,6 +191,7 @@ const EnrolledDevicesTable = ({
         emptyData={devices.length === 0}
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}
+        data-testid="enrolled-devices-table"
       >
         <Tbody>
           {devices.map((device, index) => (
@@ -197,6 +206,7 @@ const EnrolledDevicesTable = ({
               decommissionAction={decommissionDeviceAction}
               canResume={canResume}
               resumeAction={resumeDeviceAction}
+              deviceColumns={deviceColumns}
             />
           ))}
         </Tbody>

package/src/components/Device/DevicesPage/useDevices.ts

@@ -7,10 +7,12 @@ import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
 import { FlightCtlLabel } from '../../../types/extraTypes';
 import { FilterStatusMap } from './types';
 import { PAGE_SIZE } from '../../../constants';
+import { PaginationDetails, useTablePagination } from '../../../hooks/useTablePagination';
 
 type DevicesEndpointArgs = {
   nameOrAlias?: string;
   ownerFleets?: string[];
+  onlyFleetless?: boolean;
   activeStatuses?: FilterStatusMap;
   onlyDecommissioned?: boolean;
   labels?: FlightCtlLabel[];
@@ -36,6 +38,7 @@ const getDevicesEndpoint = ({
   onlyDecommissioned,
   nextContinue,
   summaryOnly,
+  onlyFleetless,
 }: DevicesEndpointArgs) => {
   const filterByAppStatus = activeStatuses?.[FilterSearchParams.AppStatus];
   const filterByDevStatus = activeStatuses?.[FilterSearchParams.DeviceStatus];
@@ -57,6 +60,10 @@ const getDevicesEndpoint = ({
     );
   }
 
+  if (onlyFleetless) {
+    fieldSelectors.push('!metadata.owner');
+  }
+
   if (onlyDecommissioned) {
     queryUtils.addQueryConditions(fieldSelectors, 'status.lifecycle.status', decommissionedStatuses);
   } else if (summaryOnly) {
@@ -102,6 +109,15 @@ export const useDevicesSummary = ({
   return [deviceList?.summary, listLoading];
 };
 
+export type DevicesResult = {
+  devices: Device[];
+  isLoading: boolean;
+  error: unknown;
+  isUpdating: boolean;
+  refetch: VoidFunction;
+  hasMore: boolean;
+};
+
 export const useDevices = (args: {
   nameOrAlias?: string;
   ownerFleets?: string[];
@@ -109,8 +125,9 @@ export const useDevices = (args: {
   labels?: FlightCtlLabel[];
   onlyDecommissioned: boolean;
   nextContinue?: string;
+  onlyFleetless?: boolean;
   onPageFetched?: (data: DeviceList) => void;
-}): [Device[], boolean, unknown, boolean, VoidFunction] => {
+}): DevicesResult => {
   const [devicesEndpoint, devicesDebouncing] = useDevicesEndpoint(args);
 
   const [devicesList, devicesLoading, devicesError, devicesRefetch, updating] = useFetchPeriodically<DeviceList>(
@@ -120,5 +137,56 @@ export const useDevices = (args: {
     args.onPageFetched,
   );
 
-  return [devicesList?.items || [], devicesLoading, devicesError, updating || devicesDebouncing, devicesRefetch];
+  const hasMore = !!devicesList?.metadata?.continue || (devicesList?.metadata?.remainingItemCount ?? 0) > 0;
+
+  return {
+    devices: devicesList?.items || [],
+    isLoading: devicesLoading,
+    error: devicesError,
+    isUpdating: updating || devicesDebouncing,
+    refetch: devicesRefetch,
+    hasMore,
+  };
+};
+
+export type DevicesPaginatedResult = {
+  devices: Device[];
+  isLoading: boolean;
+  error: unknown;
+  isUpdating: boolean;
+  refetch: VoidFunction;
+  pagination: PaginationDetails<DeviceList>;
+};
+
+/**
+ * Hook for fetching devices with built-in pagination support.
+ * Use this for paginated tables/modals.
+ */
+export const useDevicesPaginated = (args: {
+  nameOrAlias?: string;
+  ownerFleets?: string[];
+  onlyDecommissioned: boolean;
+  onlyFleetless?: boolean;
+}): DevicesPaginatedResult => {
+  const pagination = useTablePagination<DeviceList>();
+  const [devicesEndpoint, devicesDebouncing] = useDevicesEndpoint({
+    ...args,
+    nextContinue: pagination.nextContinue,
+  });
+
+  const [devicesList, devicesLoading, devicesError, devicesRefetch, updating] = useFetchPeriodically<DeviceList>(
+    {
+      endpoint: devicesEndpoint,
+    },
+    pagination.onPageFetched,
+  );
+
+  return {
+    devices: devicesList?.items || [],
+    isLoading: devicesLoading,
+    error: devicesError,
+    isUpdating: updating || devicesDebouncing,
+    refetch: devicesRefetch,
+    pagination,
+  };
 };

package/src/components/Device/EditDeviceWizard/EditDeviceWizard.tsx

@@ -133,7 +133,7 @@ const EditDeviceWizard = () => {
                   <GeneralInfoStep />
                 </WizardStep>
                 <WizardStep name={t('Device template')} id={deviceTemplateStepId} isDisabled={isTemplateStepDisabled}>
-                  <DeviceTemplateStep isFleet={false} />
+                  <DeviceTemplateStep isFleet={false} labels={device.metadata.labels} />
                 </WizardStep>
                 <WizardStep name={t('Updates')} id={deviceUpdatePolicyStepId} isDisabled={isUpdateStepDisabled}>
                   <DeviceUpdateStep />

package/src/components/Device/EditDeviceWizard/steps/ApplicationHelmForm.tsx

@@ -70,7 +70,7 @@ const ApplicationHelmForm = ({ index, isReadOnly }: { index: number; isReadOnly?
         )}
       >
         <FieldArray name={`${appFieldName}.valuesFiles`}>
-          {({ push, remove }) => (
+          {(arrayHelpers) => (
             <>
               {(valuesFiles || []).map((file, fileIndex) => (
                 <Split hasGutter key={fileIndex} className="pf-v6-u-mb-sm">
@@ -91,7 +91,7 @@ const ApplicationHelmForm = ({ index, isReadOnly }: { index: number; isReadOnly?
                         variant="link"
                         icon={<MinusCircleIcon />}
                         iconPosition="end"
-                        onClick={() => remove(fileIndex)}
+                        onClick={() => arrayHelpers.remove(fileIndex)}
                       />
                     </SplitItem>
                   )}
@@ -111,7 +111,7 @@ const ApplicationHelmForm = ({ index, isReadOnly }: { index: number; isReadOnly?
                       iconPosition="start"
                       isAriaDisabled={!canAddValuesFile}
                       onClick={() => {
-                        push('');
+                        arrayHelpers.push('');
                       }}
                     >
                       {t('Add values file')}

package/src/components/Device/EditDeviceWizard/steps/ApplicationInlineForm.tsx

@@ -73,7 +73,7 @@ const ApplicationInlineForm = ({
   return (
     <Grid hasGutter>
       <FieldArray name={`applications.${index}.files`}>
-        {({ push, remove }) => (
+        {(arrayHelpers) => (
           <>
             {fileList.map((file, fileIndex) => {
               const fieldName = `applications[${index}].files[${fileIndex}]`;
@@ -94,7 +94,7 @@ const ApplicationInlineForm = ({
                         variant="link"
                         icon={<MinusCircleIcon />}
                         iconPosition="start"
-                        onClick={() => remove(fileIndex)}
+                        onClick={() => arrayHelpers.remove(fileIndex)}
                       />
                     </SplitItem>
                   )}
@@ -109,7 +109,7 @@ const ApplicationInlineForm = ({
                   icon={<PlusCircleIcon />}
                   iconPosition="start"
                   onClick={() => {
-                    push({
+                    arrayHelpers.push({
                       path: '',
                       content: '',
                       base64: false,

package/src/components/Device/EditDeviceWizard/steps/ApplicationTemplates.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 
 import {
+  Alert,
   Button,
   Content,
   FormGroup,
   FormSection,
   Grid,
+  GridItem,
   Split,
   SplitItem,
   Stack,
@@ -32,10 +34,19 @@ import ApplicationHelmForm from './ApplicationHelmForm';
 import ApplicationVolumeForm from './ApplicationVolumeForm';
 import ApplicationVariablesForm from './ApplicationVariablesForm';
 import ApplicationIntegritySettings from './ApplicationIntegritySettings';
+import { APP_CATALOG_LABEL_KEY } from '../../../Catalog/const';
 
 import './ApplicationsForm.css';
 
-const ApplicationSection = ({ index, isReadOnly }: { index: number; isReadOnly?: boolean }) => {
+const ApplicationSection = ({
+  index,
+  isReadOnly,
+  managedByCatalog,
+}: {
+  index: number;
+  isReadOnly?: boolean;
+  managedByCatalog: boolean;
+}) => {
   const { t } = useTranslation();
   const appFieldName = `applications[${index}]`;
   const [{ value: app }, , { setValue }] = useField<AppForm>(appFieldName);
@@ -69,6 +80,11 @@ const ApplicationSection = ({ index, isReadOnly }: { index: number; isReadOnly?:
       fieldName={appFieldName}
     >
       <Grid hasGutter>
+        {managedByCatalog && (
+          <GridItem>
+            <Alert isInline variant="info" title={t('Application is managed by Software Catalog')} />
+          </GridItem>
+        )}
         <FormGroup label={t('Application type')} isRequired>
           <FormSelect
             items={appTypesOptions}
@@ -165,7 +181,13 @@ const ApplicationSection = ({ index, isReadOnly }: { index: number; isReadOnly?:
   );
 };
 
-const ApplicationTemplates = ({ isReadOnly }: { isReadOnly?: boolean }) => {
+const ApplicationTemplates = ({
+  isReadOnly,
+  labels,
+}: {
+  isReadOnly?: boolean;
+  labels: Record<string, string> | undefined;
+}) => {
   const { t } = useTranslation();
   const { values } = useFormikContext<DeviceSpecConfigFormValues>();
   if (isReadOnly && values.applications.length === 0) {
@@ -184,28 +206,35 @@ const ApplicationTemplates = ({ isReadOnly }: { isReadOnly?: boolean }) => {
           )}
         </Content>
         <FieldArray name="applications">
-          {({ push, remove }) => (
+          {(arrayHelpers) => (
             <>
-              {values.applications.map((_app, index) => (
-                <FormSection key={index}>
-                  <Split hasGutter>
-                    <SplitItem isFilled>
-                      <ApplicationSection index={index} isReadOnly={isReadOnly} />
-                    </SplitItem>
-                    {!isReadOnly && (
-                      <SplitItem>
-                        <Button
-                          aria-label={t('Delete application')}
-                          variant="link"
-                          icon={<MinusCircleIcon />}
-                          iconPosition="start"
-                          onClick={() => remove(index)}
+              {values.applications.map((_app, index) => {
+                const appCatalog = !!_app.name && !!labels?.[`${_app.name}.${APP_CATALOG_LABEL_KEY}`];
+                return (
+                  <FormSection key={index}>
+                    <Split hasGutter>
+                      <SplitItem isFilled>
+                        <ApplicationSection
+                          index={index}
+                          isReadOnly={isReadOnly || appCatalog}
+                          managedByCatalog={appCatalog}
                         />
                       </SplitItem>
-                    )}
-                  </Split>
-                </FormSection>
-              ))}
+                      {!isReadOnly && !appCatalog && (
+                        <SplitItem>
+                          <Button
+                            aria-label={t('Delete application')}
+                            variant="link"
+                            icon={<MinusCircleIcon />}
+                            iconPosition="start"
+                            onClick={() => arrayHelpers.remove(index)}
+                          />
+                        </SplitItem>
+                      )}
+                    </Split>
+                  </FormSection>
+                );
+              })}
 
               {!isReadOnly && (
                 <FormSection>
@@ -215,7 +244,7 @@ const ApplicationTemplates = ({ isReadOnly }: { isReadOnly?: boolean }) => {
                       icon={<PlusCircleIcon />}
                       iconPosition="start"
                       onClick={() => {
-                        push(createInitialAppForm(AppType.AppTypeContainer));
+                        arrayHelpers.push(createInitialAppForm(AppType.AppTypeContainer));
                       }}
                     >
                       {t('Add application')}