ISPN-14000 Wizard indexing protobuf list

run-server-for-e2e.sh

@@ -11,7 +11,7 @@ fi
 #Base directory where the server should be downloaded
 BASE_DIR="server"
 #The version of the server is either set as an environment variable or is the latest dev version
-SERVER_VERSION="${SERVER_VERSION:-"14.0.0.Dev03"}"
+SERVER_VERSION="${SERVER_VERSION:-"14.0.0.Dev04"}"
 #Root path from there the infinispan server should be downloaded
 ZIP_ROOT="http://downloads.jboss.org/infinispan"
 #If this environment variable is provided then it is used for downloading the server;

src/app/Caches/Create/Features/FeatureAlert.tsx

@@ -1,26 +1,28 @@
-import {Alert, AlertActionLink, AlertVariant} from "@patternfly/react-core";
+import { Alert, AlertActionLink, AlertVariant } from "@patternfly/react-core";
 import React from "react";
-import {CacheFeature} from "@services/infinispanRefData";
-import {useTranslation} from "react-i18next";
-import {useCreateCache} from "@app/services/createCacheHook";
+import { CacheFeature } from "@services/infinispanRefData";
+import { useTranslation } from "react-i18next";
+import { useCreateCache } from "@app/services/createCacheHook";
 
-const FeatureAlert = (props: {feature: CacheFeature}) => {
+const FeatureAlert = (props: { feature: CacheFeature, error?: string }) => {
   const { t } = useTranslation();
   const brandname = t('brandname.brandname');
   const { removeFeature } = useCreateCache();
   return (
     <Alert variant={AlertVariant.info}
-           isInline
-           isPlain
-           title={t('caches.create.configurations.feature.' + props.feature.toLowerCase() + '-disabled')}
-           actionLinks={
-             <React.Fragment>
-               <AlertActionLink onClick={() => removeFeature(props.feature) }>
-                 {t('caches.create.configurations.feature.remove')}
-               </AlertActionLink>
-             </React.Fragment>
-           }>
-      {t('caches.create.configurations.feature.' + props.feature.toLowerCase() + '-disabled-description', { brandname: brandname })}
+      isInline
+      isPlain
+      title={t('caches.create.configurations.feature.' + props.feature.toLowerCase() + '-disabled')}
+      actionLinks={
+        <React.Fragment>
+          <AlertActionLink onClick={() => removeFeature(props.feature)}>
+            {t('caches.create.configurations.feature.remove')}
+          </AlertActionLink>
+        </React.Fragment>
+      }>
+      {!props.error
+        ? t('caches.create.configurations.feature.' + props.feature.toLowerCase() + '-disabled-description', { brandname: brandname })
+        : props.error}
     </Alert>
   );
 };

src/app/Caches/Create/Features/IndexedCacheConfigurator.tsx

@@ -1,31 +1,48 @@
-import React, {useEffect, useState} from 'react';
-import {Button, FormGroup, InputGroup, Label, LabelGroup, Radio, TextInput,} from '@patternfly/react-core';
-import {global_spacer_sm} from '@patternfly/react-tokens';
-import {IndexedStorage} from "@services/infinispanRefData";
-import {useTranslation} from 'react-i18next';
-import {useCreateCache} from "@app/services/createCacheHook";
-import {PopoverHelp} from "@app/Common/PopoverHelp";
-import {FeatureCard} from "@app/Caches/Create/Features/FeatureCard";
-
-const IndexedCacheConfigurator = () => {
+import React, { useEffect, useState } from 'react';
+import {
+  Card,
+  CardBody,
+  FormGroup,
+  Label,
+  LabelGroup,
+  Radio,
+  Select,
+  SelectVariant,
+  SelectOption,
+  Spinner
+} from '@patternfly/react-core';
+import { global_spacer_sm } from '@patternfly/react-tokens';
+import { IndexedStorage, CacheFeature, EncodingType } from "@services/infinispanRefData";
+import { useTranslation } from 'react-i18next';
+import { useCreateCache } from "@app/services/createCacheHook";
+import { PopoverHelp } from "@app/Common/PopoverHelp";
+import { FeatureCard } from "@app/Caches/Create/Features/FeatureCard";
+import { TableErrorState } from '@app/Common/TableErrorState';
+import { useFetchProtobufTypes } from '@app/services/protobufHook';
+import { FeatureAlert } from "@app/Caches/Create/Features/FeatureAlert";
+
+const IndexedCacheConfigurator = (props: {
+  isEnabled: boolean
+}) => {
   const { configuration, setConfiguration } = useCreateCache();
   const { t } = useTranslation();
   const brandname = t('brandname.brandname');
 
+  const { protobufTypes, loading, error } = useFetchProtobufTypes()
+
   const [indexedStorage, setIndexedStorage] = useState<'filesystem' | 'local_heap'>(configuration.feature.indexedCache.indexedStorage);
   const [indexedEntities, setIndexedEntities] = useState<string[]>(configuration.feature.indexedCache.indexedEntities);
-  const [entityInput, setEntityInput] = useState<string>('');
   const [validEntity, setValidEntity] = useState<'success' | 'error' | 'default'>('default');
 
+  const [isOpenEntities, setIsOpenEntities] = useState(false)
+
   useEffect(() => {
-    if (indexedEntities.length == 0) {
-      setValidEntity('error');
-    }
+    indexedEntities.length > 0 ? setValidEntity('success') : setValidEntity('error');
 
     setConfiguration((prevState) => {
       return {
         ...prevState,
-        feature : {
+        feature: {
           ...prevState.feature,
           indexedCache: {
             indexedStorage: indexedStorage,
@@ -37,37 +54,102 @@ const IndexedCacheConfigurator = () => {
     });
   }, [indexedStorage, indexedEntities]);
 
-  const indexingFeatureValidation = () : boolean => {
-      return indexedEntities.length > 0;
+  const indexingFeatureValidation = (): boolean => {
+    if (!props.isEnabled) {
+      return false;
+    }
+
+    return indexedEntities.length > 0;
   }
 
   const deleteChip = (chipToDelete: string) => {
     const newChips = indexedEntities.filter(chip => !Object.is(chip, chipToDelete));
     setIndexedEntities(newChips);
   };
 
-  const addChip = (newChipText: string) => {
-    setIndexedEntities([...indexedEntities, `${newChipText}`]);
-    setEntityInput('');
+  const onSelectSchemas = (event, selection, isPlaceholder) => {
+    if (indexedEntities.includes(selection))
+      setIndexedEntities(indexedEntities.filter(role => role !== selection));
+    else
+      setIndexedEntities([...indexedEntities, selection]);
+  };
+
+  const entitiesOptions = () => {
+    return protobufTypes.map((schema, id) => (
+      <SelectOption key={id} value={schema} />
+    ))
   };
 
-  const helperAddEntity = () => {
-    if (entityInput.length) {
-      if (!indexedEntities.includes(entityInput)) {
-        addChip(entityInput);
-        setValidEntity('success')
-      }
+  const formSelectEntities = () => {
+    if (loading) {
+      return (
+        <Card>
+          <CardBody>
+            <Spinner size="lg" />
+          </CardBody>
+        </Card>
+      );
+    }
+
+    if (error) {
+      return (
+        <Card>
+          <CardBody>
+            <TableErrorState error={error} />
+          </CardBody>
+        </Card>
+      );
     }
+
+    return (
+      <FormGroup
+        isRequired
+        label={t('caches.create.configurations.feature.index-storage-entity')}
+        labelIcon={<PopoverHelp name={'index-storage-entity'}
+          label={t('caches.create.configurations.feature.index-storage-entity')}
+          content={t('caches.create.configurations.feature.index-storage-entity-tooltip', { brandname: brandname })} />}
+        fieldId='indexed-entities'
+        validated={validEntity}
+        helperTextInvalid={t('caches.create.configurations.feature.index-storage-entity-helper')}>
+        <Select
+          placeholderText={"Select an entity"}
+          variant={SelectVariant.checkbox}
+          aria-label="entities-select"
+          onToggle={() => setIsOpenEntities(!isOpenEntities)}
+          onSelect={onSelectSchemas}
+          selections={indexedEntities}
+          isOpen={isOpenEntities}
+          aria-labelledby="toggle-id-entities"
+          toggleId="entitiesSelector"
+          hasInlineFilter
+          onClear={() => setIndexedEntities([])}
+        >
+          {entitiesOptions()}
+        </Select>
+      </FormGroup>
+    )
+  }
+
+  if (!props.isEnabled) {
+    return (
+      <FeatureAlert feature={CacheFeature.INDEXED} error={t('caches.create.configurations.feature.indexed-types-disabled-description')} />
+    )
+  }
+
+  if (configuration.basic.encoding !== EncodingType.Protobuf) {
+    return (
+      <FeatureAlert feature={CacheFeature.INDEXED} error={t('caches.create.configurations.feature.indexed-encoding-disabled-description', { encoding: configuration.basic.encoding })} />
+    )
   }
 
   return (
     <FeatureCard title="caches.create.configurations.feature.indexed"
-                 description="caches.create.configurations.feature.indexed-tooltip">
+      description="caches.create.configurations.feature.indexed-tooltip">
       <FormGroup
         label={t('caches.create.configurations.feature.index-storage')}
         labelIcon={<PopoverHelp name={'indexed-storage'}
-                                label={t('caches.create.configurations.feature.index-storage')}
-                                content={t('caches.create.configurations.feature.index-storage-tooltip', { brandname: brandname })}/>}
+          label={t('caches.create.configurations.feature.index-storage')}
+          content={t('caches.create.configurations.feature.index-storage-tooltip', { brandname: brandname })} />}
         fieldId='indexed-storage'
         isInline
       >
@@ -86,37 +168,14 @@ const IndexedCacheConfigurator = () => {
           label={t('caches.create.configurations.feature.index-storage-volatile')}
         />
       </FormGroup>
-      <FormGroup
-                 isRequired
-                 label={t('caches.create.configurations.feature.index-storage-entity')}
-                 labelIcon={<PopoverHelp name={'index-storage-entity'}
-                                         label={t('caches.create.configurations.feature.index-storage-entity')}
-                                         content={t('caches.create.configurations.feature.index-storage-entity-tooltip', {brandname: brandname})}/>}
-                 fieldId='indexed-entities'
-                 validated={validEntity}
-                 helperTextInvalid={t('caches.create.configurations.feature.index-storage-entity-helper')}>
-        <InputGroup>
-          <TextInput data-cy="indexEntityInput"
-                     value={entityInput}
-                     type="text"
-                     validated={validEntity}
-                     onChange={setEntityInput} />
-          <Button id="add-entity" variant="control" onClick={helperAddEntity}>
-            {t('caches.create.configurations.feature.index-storage-add-btn')}
-          </Button>
-        </InputGroup>
-      </FormGroup>
+      {formSelectEntities()}
       <LabelGroup>
         {indexedEntities.map(currentChip => (
           <Label data-cy={currentChip}
-                 color="blue"
-                 closeBtnAriaLabel="Remove entity"
-                 onEditComplete={(text) => {
-                   setIndexedEntities(indexedEntities.map(chip => chip === currentChip ? text : chip));
-                 }}
-                 isEditable
-                 style={{ marginRight: global_spacer_sm.value }}
-                 key={currentChip} onClose={() => deleteChip(currentChip)}>
+            color="blue"
+            closeBtnAriaLabel="Remove entity"
+            style={{ marginRight: global_spacer_sm.value }}
+            key={currentChip} onClose={() => deleteChip(currentChip)}>
             {currentChip}
           </Label>
         ))}