update1

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

@@ -1,26 +1,26 @@
-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, errorType?: string, helperText?: 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>
+      }>
+      {t('caches.create.configurations.feature.' + props.feature.toLowerCase() + `${props.errorType !== undefined ? '-' + props.errorType.toLowerCase() : ''}` + '-disabled-description', { brandname: brandname, helpertext: props.helperText })}
     </Alert>
   );
 };

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

@@ -1,14 +1,24 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Card, CardBody, FormGroup, InputGroup, Label, LabelGroup, Radio, TextInput, Select, SelectVariant, SelectOption, Spinner } from '@patternfly/react-core';
+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 } from "@services/infinispanRefData";
+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 { useFetchProtobufSchemas } from '@app/services/protobufHook';
-import { CacheFeature } from "@services/infinispanRefData";
+import { useFetchProtobufTypes } from '@app/services/protobufHook';
 import { FeatureAlert } from "@app/Caches/Create/Features/FeatureAlert";
 
 const IndexedCacheConfigurator = (props: {
@@ -18,7 +28,7 @@ const IndexedCacheConfigurator = (props: {
   const { t } = useTranslation();
   const brandname = t('brandname.brandname');
 
-  const { schemas, loading, error } = useFetchProtobufSchemas()
+  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);
@@ -65,7 +75,7 @@ const IndexedCacheConfigurator = (props: {
   };
 
   const entitiesOptions = () => {
-    return schemas.map((schema, id) => (
+    return protobufTypes.map((schema, id) => (
       <SelectOption key={id} value={schema} />
     ))
   };
@@ -122,7 +132,13 @@ const IndexedCacheConfigurator = (props: {
 
   if (!props.isEnabled) {
     return (
-      <FeatureAlert feature={CacheFeature.INDEXED} />
+      <FeatureAlert feature={CacheFeature.INDEXED} errorType="types" />
+    )
+  }
+
+  if (configuration.basic.encoding !== EncodingType.Protobuf) {
+    return (
+      <FeatureAlert feature={CacheFeature.INDEXED} errorType="encoding" helperText={configuration.basic.encoding} />
     )
   }
 
@@ -158,10 +174,6 @@ const IndexedCacheConfigurator = (props: {
           <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)}>
             {currentChip}

src/app/Caches/Create/FeaturesSelector.tsx

@@ -21,12 +21,12 @@ import PersistentCacheConfigurator from '@app/Caches/Create/Features/PersistentC
 import { useCreateCache } from "@app/services/createCacheHook";
 import { useConnectedUser } from "@app/services/userManagementHook";
 import { validFeatures } from "@app/utils/featuresValidation";
-import { useFetchProtobufSchemas } from '@app/services/protobufHook';
+import { useFetchProtobufTypes } from '@app/services/protobufHook';
 
 const FeaturesSelector = () => {
   const { t } = useTranslation();
   const { notSecured } = useConnectedUser();
-  const { schemas } = useFetchProtobufSchemas();
+  const { protobufTypes } = useFetchProtobufTypes();
   const { configuration, setConfiguration, addFeature, removeFeature } = useCreateCache();
 
   const brandname = t('brandname.brandname');
@@ -115,7 +115,7 @@ const FeaturesSelector = () => {
       </FormSection>
       {displayAlert()}
       {configuration.feature.cacheFeatureSelected.includes(CacheFeature.BOUNDED) && <BoundedCacheConfigurator />}
-      {configuration.feature.cacheFeatureSelected.includes(CacheFeature.INDEXED) && <IndexedCacheConfigurator isEnabled={schemas.length > 0 && configuration.basic.encoding !== 'text/plain'} />}
+      {configuration.feature.cacheFeatureSelected.includes(CacheFeature.INDEXED) && <IndexedCacheConfigurator isEnabled={protobufTypes.length > 0} />}
       {configuration.feature.cacheFeatureSelected.includes(CacheFeature.SECURED) && <SecuredCacheConfigurator isEnabled={!notSecured} />}
       {configuration.feature.cacheFeatureSelected.includes(CacheFeature.BACKUPS) && <BackupsCacheConfigurator isEnabled={isBackups} />}
       {configuration.feature.cacheFeatureSelected.includes(CacheFeature.TRANSACTIONAL) && <TransactionalCacheConfigurator isEnabled={configuration.basic.mode === CacheMode.SYNC} />}

src/app/assets/languages/en.json

@@ -202,7 +202,8 @@
           "secured-disabled": "The server is not secured",
           "secured-disabled-description": "You must enable authentication and authorization in {{brandname}} Server to configure security. Remove the capability or enable security.",
           "indexed-disabled": "This cache can not be indexed",
-          "indexed-disabled-description": "Indexing is only when Protobuf Schemas are added and encoding is not text/plain",
+          "indexed-encoding-disabled-description": "The encoding for indexed caches must be application/x-protostream and the selected encoding is {{helpertext}}",
+          "indexed-types-disabled-description": "You must register a protobuf schema containing indexed protobuf entities to configure indexing in this cache.",
           "nav-title": "{{brandname}} capabilities",
           "cache-feature-list": "Add {{brandname}} capabilities",
           "cache-feature-list-tooltip": "Add capabilities to your cache.",

src/app/services/protobufHook.ts

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import { ConsoleServices } from '@services/ConsoleServices';
 
-export function useFetchProtobufSchemas() {
-  const [schemas, setSchemas] = useState<string[]>([]);
+export function useFetchProtobufTypes() {
+  const [protobufTypes, setProtobufTypes] = useState<string[]>([]);
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(true);
 
@@ -11,10 +11,10 @@ export function useFetchProtobufSchemas() {
   useEffect(() => {
     if (loading) {
       protobufService
-        .getSchemaList()
+        .getProtobufTypes()
         .then((r) => {
           if (r.isRight()) {
-            setSchemas(r.value);
+            setProtobufTypes(r.value);
           } else {
             setError(r.value.message);
           }
@@ -23,5 +23,5 @@ export function useFetchProtobufSchemas() {
     }
   }, [loading]);
 
-  return { loading, error, schemas };
+  return { loading, error, protobufTypes };
 }

src/app/utils/filterProtobufSchema.ts → src/app/utils/filterInternalProtobufTypes.ts

@@ -1,5 +1,5 @@
-export const filterSchema = (schemas: string[]) => {
-  const invalidSchemas = [
+export const filterInternalProtobufTypes = (schemas: string[]) => {
+  const internalProtobufTypes = [
     'org.infinispan.protostream',
     'org.infinispan.persistence',
     'org.infinispan.query',
@@ -8,6 +8,6 @@ export const filterSchema = (schemas: string[]) => {
   ];
 
   return schemas.filter(
-    (schema) => !invalidSchemas.some((item) => schema.includes(item))
+    (schema) => !internalProtobufTypes.some((item) => schema.includes(item))
   );
 };

src/services/protobufService.ts

@@ -1,6 +1,6 @@
 import { Either } from '@services/either';
 import { FetchCaller } from '@services/fetchCaller';
-import { filterSchema } from '@app/utils/filterProtobufSchema';
+import { filterInternalProtobufTypes } from '@app/utils/filterInternalProtobufTypes';
 
 /**
  * Protobuf schemas manipulation service
@@ -93,11 +93,11 @@ export class ProtobufService {
   }
 
   /**
-   * List protobuf schemas
+   * List types of protobuf schemas
    */
-  public async getSchemaList(): Promise<Either<ActionResponse, string[]>> {
+  public async getProtobufTypes(): Promise<Either<ActionResponse, string[]>> {
     return this.utils.get(this.endpoint + '?action=types', (data) =>
-      filterSchema(data)
+      filterInternalProtobufTypes(data)
     );
   }
 }