feat: Create MCP - Components Selection (#160)

Author: lucasgoral

public/locales/en.json

@@ -272,6 +272,7 @@
     "atLeastOneUser": "You need to have at least one member assigned."
   },
   "common": {
+    "documentation": "Documentation",
     "close": "Close",
     "cannotLoadData": "Cannot load data",
     "metadata": "Metadata",
@@ -281,7 +282,10 @@
     "region": "Region",
     "success": "Success",
     "displayName": "Display Name",
-    "name": "Name"
+    "name": "Name",
+    "componentSelection": "Component Selection",
+    "search": "Search",
+    "components": "Components"
   },
   "buttons": {
     "viewResource": "View resource",
@@ -300,5 +304,10 @@
     "dialogTitle": "Create Managed Control Plane",
     "titleText": "Managed Control Plane Created Successfully!",
     "subtitleText": "Your Managed Control Plane is being set up. It will be ready to use in just a few minutes. You can safely close this window."
+  },
+  "componentsSelection": {
+    "selectComponents": "Select Components",
+    "selectedComponents": "Selected Components",
+    "pleaseSelectComponents": "Choose the components you want to add to your Managed Control Plane."
   }
 }

src/components/ComponentsSelection/ComponentsSelection.module.css

@@ -0,0 +1,5 @@
+.row {
+  padding: 1rem;
+  background: var(--sapBackgroundColor);
+  border-bottom: 1px solid var(--sapList_BorderColor);
+}

src/components/ComponentsSelection/ComponentsSelection.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import {
+  CheckBox,
+  Select,
+  Option,
+  FlexBox,
+  Title,
+  Text,
+  Input,
+  Button,
+  Grid,
+  List,
+  ListItemStandard,
+  Icon,
+  Ui5CustomEvent,
+  CheckBoxDomRef,
+  SelectDomRef,
+  InputDomRef,
+} from '@ui5/webcomponents-react';
+import styles from './ComponentsSelection.module.css';
+import { Infobox } from '../Ui/Infobox/Infobox.tsx';
+import { useTranslation } from 'react-i18next';
+import { ComponentSelectionItem } from '../../lib/api/types/crate/createManagedControlPlane.ts';
+
+export interface ComponentsSelectionProps {
+  components: ComponentSelectionItem[];
+  setSelectedComponents: React.Dispatch<
+    React.SetStateAction<ComponentSelectionItem[]>
+  >;
+}
+
+export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
+  components,
+  setSelectedComponents,
+}) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const { t } = useTranslation();
+  const handleSelectionChange = (
+    e: Ui5CustomEvent<CheckBoxDomRef, { checked: boolean }>,
+  ) => {
+    const id = e.target?.id;
+    setSelectedComponents((prev) =>
+      prev.map((component) =>
+        component.name === id
+          ? { ...component, isSelected: !component.isSelected }
+          : component,
+      ),
+    );
+  };
+
+  const handleSearch = (e: Ui5CustomEvent<InputDomRef, never>) => {
+    setSearchTerm(e.target.value.trim());
+  };
+
+  const handleVersionChange = (
+    e: Ui5CustomEvent<SelectDomRef, { selectedOption: HTMLElement }>,
+  ) => {
+    const selectedOption = e.detail.selectedOption as HTMLElement;
+    const name = selectedOption.dataset.name;
+    const version = selectedOption.dataset.version;
+    setSelectedComponents((prev) =>
+      prev.map((component) =>
+        component.name === name
+          ? { ...component, selectedVersion: version || '' }
+          : component,
+      ),
+    );
+  };
+
+  const filteredComponents = components.filter(({ name }) =>
+    name.includes(searchTerm),
+  );
+  const selectedComponents = components.filter(
+    (component) => component.isSelected,
+  );
+
+  return (
+    <div>
+      <Title>{t('componentsSelection.selectComponents')}</Title>
+
+      <Input
+        placeholder={t('common.search')}
+        id="search"
+        showClearIcon
+        icon={<Icon name="search" />}
+        onInput={handleSearch}
+      />
+
+      <Grid>
+        <div data-layout-span="XL8 L8 M8 S8">
+          {filteredComponents.map((component) => (
+            <FlexBox
+              key={component.name}
+              className={styles.row}
+              gap={10}
+              justifyContent="SpaceBetween"
+            >
+              <CheckBox
+                valueState="None"
+                text={component.name}
+                id={component.name}
+                checked={component.isSelected}
+                onChange={handleSelectionChange}
+              />
+              <FlexBox
+                gap={10}
+                justifyContent="SpaceBetween"
+                alignItems="Baseline"
+              >
+                {/*This button will be implemented later*/}
+                {component.documentationUrl && (
+                  <Button design="Transparent">
+                    {t('common.documentation')}
+                  </Button>
+                )}
+                <Select
+                  value={component.selectedVersion}
+                  onChange={handleVersionChange}
+                >
+                  {component.versions.map((version) => (
+                    <Option
+                      key={version}
+                      data-version={version}
+                      data-name={component.name}
+                      selected={component.selectedVersion === version}
+                    >
+                      {version}
+                    </Option>
+                  ))}
+                </Select>
+              </FlexBox>
+            </FlexBox>
+          ))}
+        </div>
+        <div data-layout-span="XL4 L4 M4 S4">
+          {selectedComponents.length > 0 ? (
+            <List headerText={t('componentsSelection.selectedComponents')}>
+              {selectedComponents.map((component) => (
+                <ListItemStandard
+                  key={component.name}
+                  text={component.name}
+                  additionalText={component.selectedVersion}
+                />
+              ))}
+            </List>
+          ) : (
+            <Infobox fullWidth variant={'success'}>
+              <Text>{t('componentsSelection.pleaseSelectComponents')}</Text>
+            </Infobox>
+          )}
+        </div>
+      </Grid>
+    </div>
+  );
+};

src/components/ComponentsSelection/ComponentsSelectionContainer.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import { ComponentsSelection } from './ComponentsSelection.tsx';
+
+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 Loading from '../Shared/Loading.tsx';
+import { ComponentSelectionItem } from '../../lib/api/types/crate/createManagedControlPlane.ts';
+
+export interface ComponentItem {
+  name: string;
+  versions: string[];
+}
+
+export interface ComponentsSelectionProps {
+  selectedComponents: ComponentSelectionItem[];
+  setSelectedComponents: React.Dispatch<
+    React.SetStateAction<ComponentSelectionItem[]>
+  >;
+}
+export const ComponentsSelectionContainer: React.FC<
+  ComponentsSelectionProps
+> = ({ setSelectedComponents, selectedComponents }) => {
+  const {
+    data: allManagedComponents,
+    error,
+    isLoading,
+  } = useApiResource(ListManagedComponents());
+  const [isReady, setIsReady] = useState(false);
+  useEffect(() => {
+    if (
+      allManagedComponents?.items.length === 0 ||
+      !allManagedComponents?.items ||
+      isReady
+    )
+      return;
+
+    setSelectedComponents(
+      allManagedComponents?.items?.map((item) => {
+        const versions = sortVersions(item.status.versions);
+        return {
+          name: item.metadata.name,
+          versions: versions,
+          selectedVersion: versions[0],
+          isSelected: false,
+          documentationUrl: '',
+        };
+      }) ?? [],
+    );
+    setIsReady(true);
+  }, [allManagedComponents, isReady, setSelectedComponents]);
+  if (isLoading) {
+    return <Loading />;
+  }
+  if (error) return <IllustratedError />;
+  return (
+    <>
+      {selectedComponents.length > 0 ? (
+        <ComponentsSelection
+          components={selectedComponents}
+          setSelectedComponents={setSelectedComponents}
+        />
+      ) : (
+        <IllustratedError title={'Cannot load components list'} />
+      )}
+    </>
+  );
+};

src/components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx

@@ -48,7 +48,7 @@ export default function ControlPlaneListAllWorkspaces({ projectName }: Props) {
               window.open(workspaceCreationGuide, '_blank');
             }}
           >
-            Help
+            {t('IllustratedBanner.helpButton')}
           </Button>
         </FlexBox>
       ) : (

src/components/Members/MemberRoleSelect.tsx

@@ -12,6 +12,7 @@ import {
 } from '@ui5/webcomponents-react';
 import { SelectChangeEventDetail } from '@ui5/webcomponents/dist/Select.js';
 import { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 interface MemberRoleSelectProps {
   value: MemberRoles;
@@ -36,10 +37,12 @@ export function MemberRoleSelect({
       return;
     }
   }, [value]);
-
+  const { t } = useTranslation();
   return (
     <FlexBox direction={'Column'}>
-      <Label for={'member-role-select'}>Role</Label>
+      <Label for={'member-role-select'}>
+        {t('MemberTable.columnRoleHeader')}
+      </Label>
       <Select
         ref={ref}
         id="member-role-select"

src/components/Ui/Infobox/Infobox.module.css

@@ -4,6 +4,11 @@
   margin: 1rem 0;
 }
 
+.full-width {
+  display: block;
+  margin: 0;
+}
+
 .size-sm {
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;

src/components/Ui/Infobox/Infobox.tsx

@@ -8,6 +8,7 @@ interface LabelProps {
   size?: 'sm' | 'md' | 'lg';
   variant?: 'normal' | 'success' | 'warning' | 'danger';
   children: ReactNode;
+  fullWidth?: boolean;
   className?: string;
 }
 
@@ -16,6 +17,7 @@ export const Infobox: React.FC<LabelProps> = ({
   size = 'md', // Default to medium size
   variant = 'normal', // Default to normal variant
   children,
+  fullWidth = false,
   className,
 }) => {
   const infoboxClasses = cx(
@@ -28,6 +30,7 @@ export const Infobox: React.FC<LabelProps> = ({
       [styles['variant-success']]: variant === 'success',
       [styles['variant-warning']]: variant === 'warning',
       [styles['variant-danger']]: variant === 'danger',
+      [styles['full-width']]: fullWidth,
     },
     className,
   );