Skip to content

Commit

Permalink
ISPN-14000 Indexing configuration of the wizard lists available proto…
Browse files Browse the repository at this point in the history 
…buf types
  • Loading branch information
@dpanshug
dpanshug committed Jul 25, 2022
1 parent 093804b commit c2ff5ff
Show file tree
Hide file tree
Showing 6 changed files with 252 additions and 152 deletions.
161 changes: 104 additions & 57 deletions src/app/Caches/Create/Features/IndexedCacheConfigurator.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,38 @@
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 { Button, Card, CardBody, FormGroup, InputGroup, Label, LabelGroup, Radio, TextInput, Select, SelectVariant, SelectOption, Spinner } 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";
import { TableErrorState } from '@app/Common/TableErrorState';
import { useFetchProtobufSchemas } from '@app/services/protobufHook';
import { CacheFeature } from "@services/infinispanRefData";
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 { schemas, loading, error } = useFetchProtobufSchemas()

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,
Expand All @@ -37,37 +44,96 @@ 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 schemas.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} />
)
}

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
>
Expand All @@ -86,37 +152,18 @@ 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"
onEditComplete={(text) => {
setIndexedEntities(indexedEntities.map(chip => chip === currentChip ? text : chip));
}}
isEditable
style={{ marginRight: global_spacer_sm.value }}
key={currentChip} onClose={() => deleteChip(currentChip)}>
{currentChip}
</Label>
))}
Expand Down

0 comments on commit c2ff5ff

Please sign in to comment.