Merge branch 'main' into feat/theming

Author: andreaskienle

.github/workflows/build.yaml

@@ -21,6 +21,9 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Lint
+        run: npm run lint
+
       - name: Run Vitest Tests
         run: npm run test:vi
 

src/components/ComponentsSelection/ComponentsSelection.tsx

@@ -28,23 +28,15 @@ export interface ComponentsSelectionProps {
   setComponentsList: (components: ComponentsListItem[]) => void;
 }
 
-export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
-  componentsList,
-  setComponentsList,
-}) => {
+export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({ componentsList, setComponentsList }) => {
   const [searchTerm, setSearchTerm] = useState('');
   const { t } = useTranslation();
 
-  const selectedComponents = useMemo(
-    () => getSelectedComponents(componentsList),
-    [componentsList],
-  );
+  const selectedComponents = useMemo(() => getSelectedComponents(componentsList), [componentsList]);
 
   const searchResults = useMemo(() => {
     const lowerSearch = searchTerm.toLowerCase();
-    return componentsList.filter(({ name }) =>
-      name.toLowerCase().includes(lowerSearch),
-    );
+    return componentsList.filter(({ name }) => name.toLowerCase().includes(lowerSearch));
   }, [componentsList, searchTerm]);
 
   const handleSelectionChange = useCallback(
@@ -53,9 +45,7 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
       if (!id) return;
       setComponentsList(
         componentsList.map((component) =>
-          component.name === id
-            ? { ...component, isSelected: !component.isSelected }
-            : component,
+          component.name === id ? { ...component, isSelected: !component.isSelected } : component,
         ),
       );
     },
@@ -74,9 +64,7 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
       if (!name) return;
       setComponentsList(
         componentsList.map((component) =>
-          component.name === name
-            ? { ...component, selectedVersion: version || '' }
-            : component,
+          component.name === name ? { ...component, selectedVersion: version || '' } : component,
         ),
       );
     },
@@ -86,9 +74,7 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
   const isProviderDisabled = useCallback(
     (component: ComponentsListItem) => {
       if (!component.name?.includes('provider')) return false;
-      const crossplane = componentsList.find(
-        ({ name }) => name === 'crossplane',
-      );
+      const crossplane = componentsList.find(({ name }) => name === 'crossplane');
       return crossplane?.isSelected === false;
     },
     [componentsList],
@@ -130,11 +116,7 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
                     aria-label={component.name}
                     onChange={handleSelectionChange}
                   />
-                  <FlexBox
-                    gap={10}
-                    justifyContent="SpaceBetween"
-                    alignItems="Baseline"
-                  >
+                  <FlexBox gap={10} justifyContent="SpaceBetween" alignItems="Baseline">
                     {/* TODO: Add documentation link */}
                     {component.documentationUrl && (
                       <Button

src/components/ComponentsSelection/ComponentsSelectionContainer.tsx

@@ -5,7 +5,7 @@ import IllustratedError from '../Shared/IllustratedError.tsx';
 import { sortVersions } from '../../utils/componentsVersions.ts';
 
 import { ListManagedComponents } from '../../lib/api/types/crate/listManagedComponents.ts';
-import useApiResource from '../../lib/api/useApiResource.ts';
+import { useApiResource } from '../../lib/api/useApiResource.ts';
 import Loading from '../Shared/Loading.tsx';
 import { ComponentsListItem, removeComponents } from '../../lib/api/types/crate/createManagedControlPlane.ts';
 import { useTranslation } from 'react-i18next';

src/components/ControlPlane/ComponentList.tsx

@@ -1,7 +1,4 @@
-import {
-  AnalyticalTable,
-  AnalyticalTableColumnDefinition,
-} from '@ui5/webcomponents-react';
+import { AnalyticalTable, AnalyticalTableColumnDefinition } from '@ui5/webcomponents-react';
 import { ControlPlaneType } from '../../lib/api/types/crate/controlPlanes';
 import { useTranslation } from 'react-i18next';
 

src/components/ControlPlane/FluxList.tsx

@@ -1,16 +1,9 @@
 import ConfiguredAnalyticstable from '../Shared/ConfiguredAnalyticsTable.tsx';
-import {
-  AnalyticalTableColumnDefinition,
-  FlexBox,
-  Title,
-} from '@ui5/webcomponents-react';
+import { AnalyticalTableColumnDefinition, FlexBox, Title } from '@ui5/webcomponents-react';
 import IllustratedError from '../Shared/IllustratedError.tsx';
-import useResource from '../../lib/api/useApiResource';
+import { useApiResource } from '../../lib/api/useApiResource';
 import { FluxRequest } from '../../lib/api/types/flux/listGitRepo';
-import {
-  FluxKustomization,
-  KustomizationsResponse,
-} from '../../lib/api/types/flux/listKustomization';
+import { FluxKustomization, KustomizationsResponse } from '../../lib/api/types/flux/listKustomization';
 import { useTranslation } from 'react-i18next';
 import { timeAgo } from '../../utils/i18n/timeAgo.ts';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
@@ -19,16 +12,12 @@ import { useMemo } from 'react';
 import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 
 export default function FluxList() {
-  const {
-    data: gitReposData,
-    error: repoErr,
-    isLoading: repoIsLoading,
-  } = useResource(FluxRequest); //404 if component not enabled
+  const { data: gitReposData, error: repoErr, isLoading: repoIsLoading } = useApiResource(FluxRequest); //404 if component not enabled
   const {
     data: kustmizationData,
     error: kustomizationErr,
     isLoading: kustomizationIsLoading,
-  } = useResource(FluxKustomization); //404 if component not enabled
+  } = useApiResource(FluxKustomization); //404 if component not enabled
 
   const { t } = useTranslation();
 
@@ -75,9 +64,7 @@ export default function FluxList() {
             <ResourceStatusCell
               value={cellData.cell.row.original?.isReady}
               transitionTime={
-                cellData.cell.row.original?.statusUpdateTime
-                  ? cellData.cell.row.original?.statusUpdateTime
-                  : ''
+                cellData.cell.row.original?.statusUpdateTime ? cellData.cell.row.original?.statusUpdateTime : ''
               }
             />
           ) : null,
@@ -93,7 +80,7 @@ export default function FluxList() {
         ),
       },
     ],
-    [],
+    [t],
   );
 
   const kustomizationsColumns: AnalyticalTableColumnDefinition[] = useMemo(
@@ -118,9 +105,7 @@ export default function FluxList() {
             <ResourceStatusCell
               value={cellData.cell.row.original?.isReady}
               transitionTime={
-                cellData.cell.row.original?.statusUpdateTime
-                  ? cellData.cell.row.original?.statusUpdateTime
-                  : ''
+                cellData.cell.row.original?.statusUpdateTime ? cellData.cell.row.original?.statusUpdateTime : ''
               }
             />
           ) : null,
@@ -132,22 +117,16 @@ export default function FluxList() {
         width: 85,
         accessor: 'yaml',
         disableFilters: true,
-        Cell: (cellData: CellData<FluxRow>) => (
-          <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
-        ),
+        Cell: (cellData: CellData<FluxRow>) => <YamlViewButton resourceObject={cellData.cell.row.original?.item} />,
       },
     ],
-    [],
+    [t],
   );
 
   if (repoErr || kustomizationErr) {
     return (
       <IllustratedError
-        details={
-          repoErr?.message ||
-          kustomizationErr?.message ||
-          t('FluxList.undefinedError')
-        }
+        details={repoErr?.message || kustomizationErr?.message || t('FluxList.undefinedError')}
         title={t('FluxList.noFluxError')}
       />
     );
@@ -157,12 +136,8 @@ export default function FluxList() {
     gitReposData?.items?.map((item) => {
       return {
         name: item.metadata.name,
-        isReady:
-          item?.status?.conditions?.find((x) => x.type === 'Ready')?.status ===
-          'True',
-        statusUpdateTime: item.status?.conditions?.find(
-          (x) => x.type === 'Ready',
-        )?.lastTransitionTime,
+        isReady: item?.status?.conditions?.find((x) => x.type === 'Ready')?.status === 'True',
+        statusUpdateTime: item.status?.conditions?.find((x) => x.type === 'Ready')?.lastTransitionTime,
         revision: shortenCommitHash(item.status.artifact?.revision ?? '-'),
         created: timeAgo.format(new Date(item.metadata.creationTimestamp)),
         item: item,
@@ -173,12 +148,8 @@ export default function FluxList() {
     kustmizationData?.items?.map((item) => {
       return {
         name: item.metadata.name,
-        isReady:
-          item.status?.conditions?.find((x) => x.type === 'Ready')?.status ===
-          'True',
-        statusUpdateTime: item.status?.conditions?.find(
-          (x) => x.type === 'Ready',
-        )?.lastTransitionTime,
+        isReady: item.status?.conditions?.find((x) => x.type === 'Ready')?.status === 'True',
+        statusUpdateTime: item.status?.conditions?.find((x) => x.type === 'Ready')?.lastTransitionTime,
         created: timeAgo.format(new Date(item.metadata.creationTimestamp)),
         item: item,
       };
@@ -191,11 +162,7 @@ export default function FluxList() {
           <Title level="H4">{t('FluxList.gitOpsTitle')}</Title>
           <YamlViewButton resourceObject={gitReposData} />
         </FlexBox>
-        <ConfiguredAnalyticstable
-          columns={gitReposColumns}
-          isLoading={repoIsLoading}
-          data={gitReposRows}
-        />
+        <ConfiguredAnalyticstable columns={gitReposColumns} isLoading={repoIsLoading} data={gitReposRows} />
       </div>
       <div className="crossplane-table-element">
         <FlexBox justifyContent={'Start'} alignItems={'Center'} gap={'0.5em'}>

src/components/ControlPlane/Landscapers.tsx

@@ -9,55 +9,30 @@ import {
 } from '@ui5/webcomponents-react';
 import { useState, JSX } from 'react';
 import { resourcesInterval } from '../../lib/shared/constants';
-import useResource, {
-  useMultipleApiResources,
-} from '../../lib/api/useApiResource';
+import { useApiResource, useMultipleApiResources } from '../../lib/api/useApiResource';
 import { ListNamespaces } from '../../lib/api/types/k8s/listNamespaces';
-import {
-  Installation,
-  InstallationsRequest,
-} from '../../lib/api/types/landscaper/listInstallations';
-import {
-  Execution,
-  ExecutionsRequest,
-} from '../../lib/api/types/landscaper/listExecutions';
-import {
-  DeployItem,
-  DeployItemsRequest,
-} from '../../lib/api/types/landscaper/listDeployItems';
+import { Installation, InstallationsRequest } from '../../lib/api/types/landscaper/listInstallations';
+import { Execution, ExecutionsRequest } from '../../lib/api/types/landscaper/listExecutions';
+import { DeployItem, DeployItemsRequest } from '../../lib/api/types/landscaper/listDeployItems';
 
 import { MultiComboBoxSelectionChangeEventDetail } from '@ui5/webcomponents/dist/MultiComboBox.js';
 
 export function Landscapers() {
   const { t } = useTranslation();
 
-  const { data: namespaces } = useResource(ListNamespaces, {
+  const { data: namespaces } = useApiResource(ListNamespaces, {
     refreshInterval: resourcesInterval,
   });
 
   const [selectedNamespaces, setSelectedNamespaces] = useState<string[]>([]);
 
-  const { data: installations = [] } = useMultipleApiResources<Installation>(
-    selectedNamespaces,
-    InstallationsRequest,
-  );
+  const { data: installations = [] } = useMultipleApiResources<Installation>(selectedNamespaces, InstallationsRequest);
 
-  const { data: executions = [] } = useMultipleApiResources<Execution>(
-    selectedNamespaces,
-    ExecutionsRequest,
-  );
+  const { data: executions = [] } = useMultipleApiResources<Execution>(selectedNamespaces, ExecutionsRequest);
 
-  const { data: deployItems = [] } = useMultipleApiResources<DeployItem>(
-    selectedNamespaces,
-    DeployItemsRequest,
-  );
+  const { data: deployItems = [] } = useMultipleApiResources<DeployItem>(selectedNamespaces, DeployItemsRequest);
 
-  const handleSelectionChange = (
-    e: Ui5CustomEvent<
-      MultiComboBoxDomRef,
-      MultiComboBoxSelectionChangeEventDetail
-    >,
-  ) => {
+  const handleSelectionChange = (e: Ui5CustomEvent<MultiComboBoxDomRef, MultiComboBoxSelectionChangeEventDetail>) => {
     const selectedItems = Array.from(e.detail.items || []);
     const selectedValues = selectedItems
       .map((item) => item.text)
@@ -85,9 +60,7 @@ export function Landscapers() {
       (installation.status?.subInstCache?.activeSubs
         ?.map((sub) =>
           installations.find(
-            (i) =>
-              i.metadata.name === sub.objectName &&
-              i.metadata.namespace === installation.metadata.namespace,
+            (i) => i.metadata.name === sub.objectName && i.metadata.namespace === installation.metadata.namespace,
           ),
         )
         .filter(Boolean) as Installation[]) || [];
@@ -102,9 +75,7 @@ export function Landscapers() {
       (execution?.status?.deployItemCache?.activeDIs
         ?.map((di) =>
           deployItems.find(
-            (item) =>
-              item.metadata.name === di.objectName &&
-              item.metadata.namespace === execution.metadata.namespace,
+            (item) => item.metadata.name === di.objectName && item.metadata.namespace === execution.metadata.namespace,
           ),
         )
         .filter(Boolean) as DeployItem[]) || [];
@@ -154,8 +125,7 @@ export function Landscapers() {
     return !installations.some((parent) =>
       parent.status?.subInstCache?.activeSubs?.some(
         (sub: { objectName: string }) =>
-          sub.objectName === inst.metadata.name &&
-          parent.metadata.namespace === inst.metadata.namespace,
+          sub.objectName === inst.metadata.name && parent.metadata.namespace === inst.metadata.namespace,
       ),
     );
   });

src/components/ControlPlane/MCPHealthPopoverButton.tsx

@@ -1,19 +1,9 @@
-import {
-  AnalyticalTable,
-  Icon,
-  Popover,
-  FlexBox,
-  FlexBoxJustifyContent,
-  Button,
-} from '@ui5/webcomponents-react';
+import { AnalyticalTable, Icon, Popover, FlexBox, FlexBoxJustifyContent, Button } from '@ui5/webcomponents-react';
 import { AnalyticalTableColumnDefinition } from '@ui5/webcomponents-react/wrappers';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
 import '@ui5/webcomponents-icons/dist/copy';
 import { JSX, useRef, useState } from 'react';
-import {
-  ControlPlaneStatusType,
-  ReadyStatus,
-} from '../../lib/api/types/crate/controlPlanes';
+import { ControlPlaneStatusType, ReadyStatus } from '../../lib/api/types/crate/controlPlanes';
 import ReactTimeAgo from 'react-time-ago';
 import { AnimatedHoverTextButton } from '../Helper/AnimatedHoverTextButton.tsx';
 import { useTranslation } from 'react-i18next';
@@ -67,10 +57,8 @@ export default function MCPHealthPopoverButton({
         mcpStatus?.conditions
           .map((condition) => {
             let text = `- ${condition.type}: ${condition.status}\n`;
-            if (condition.reason)
-              text += `  - ${t('MCPHealthPopoverButton.reasonHeader')}: ${condition.reason}\n`;
-            if (condition.message)
-              text += `  - ${t('MCPHealthPopoverButton.messageHeader')}: ${condition.message}\n`;
+            if (condition.reason) text += `  - ${t('MCPHealthPopoverButton.reasonHeader')}: ${condition.reason}\n`;
+            if (condition.message) text += `  - ${t('MCPHealthPopoverButton.messageHeader')}: ${condition.message}\n`;
             return text;
           })
           .join('')
@@ -189,14 +177,9 @@ function StatusTable({
           }) ?? []
         }
       />
-      <FlexBox
-        justifyContent={FlexBoxJustifyContent.End}
-        style={{ marginTop: '0.5rem' }}
-      >
+      <FlexBox justifyContent={FlexBoxJustifyContent.End} style={{ marginTop: '0.5rem' }}>
         <a href={githubIssuesLink} target="_blank" rel="noreferrer">
-          <Button>
-            {t('MCPHealthPopoverButton.createSupportTicketButton')}
-          </Button>
+          <Button>{t('MCPHealthPopoverButton.createSupportTicketButton')}</Button>
         </a>
       </FlexBox>
     </div>