Skip to content
This repository has been archived by the owner on Nov 27, 2023. It is now read-only.

Commit

Permalink
chore(settings): Remove deprecated fields
Browse files Browse the repository at this point in the history 
With the introduction of multiple flows support, some fields from
the settings modal are not valid anymore, like Name, Description and
the Integration type.

This functionality is now embedded in the new multiple flows workflow.

relates to: #801
  • Loading branch information
@lordrip
lordrip committed Jun 2, 2023
1 parent cd19c30 commit 822ef30
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 214 deletions.
16 changes: 2 additions & 14 deletions cypress/e2e/01-settings/settings.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,11 @@ describe('Settings', () => {
cy.openSettingsModal();

// test validation
cy.get('[data-testid="settings--integration-name"]').click().clear();
cy.get('#integration-name-helper').should('be.visible');
cy.get('[data-testid="settings--namespace"]').click().clear();
cy.get('#namespace-helper').should('be.visible');
cy.get('[data-testid="settings-modal--save"]').should('be.disabled');

// make changes
cy.get('[data-testid="settings--integration-name"]').click().clear().type('cherry');
cy.get('[data-testid="settings--namespace"]').click().clear().type('example');

// save changes
Expand All @@ -57,20 +54,11 @@ describe('Settings', () => {
cy.openSettingsModal();

// CHECK that value is changed accordingly
cy.get('[data-testid="settings--integration-name"]').should('have.value', 'cherry');
cy.get('[data-testid="settings--namespace"]').should('have.value', 'example');
});

it('Settings helper and close', () => {
// test the helper
cy.get('[data-testid="settings--integration-type-helper-btn"]').click();
cy.get('[data-testid="settings--integration-type-helper"]').should('be.visible');
cy.get('[data-testid="settings--integration-type-helper-btn"]').click();
cy.get('[data-testid="settings-modal--cancel"]').click();
cy.get('[data-testid="settings-modal"]').should('not.exist');
});

it('Insert description', () => {
/** Skipped until https://github.com/KaotoIO/kaoto-ui/issues/1902 is done */
it.skip('Insert description', () => {
const description = 'Sample description';
cy.get('[data-testid="settings--description"]').type(description);
cy.saveMenuModal();
Expand Down
10 changes: 8 additions & 2 deletions cypress/e2e/09-step_actions_from_canvas/step_extension_actions_from_canvas.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,17 @@ describe('Test for Step extensions', () => {
cy.waitExtensionLoaded();

// Fill the step name
cy.get('[data-testid="set-header-name-input"]').clear().type('test-name');
cy.get('[data-testid="set-header-name-input"]').as('headerNameInput');
cy.get('@headerNameInput').clear();
cy.get('@headerNameInput').type('test-name');

// Select jq syntax
cy.get('[data-testid="expression-syntax-select"]').select('jq');
// Fill the expression
cy.get('[data-testid="expression-string-input"]').clear().type('jq-test');
cy.get('[data-testid="expression-string-input"]').as('expressionInput');
cy.get('@expressionInput').clear();
cy.get('@expressionInput').type('jq-test');

// Click on the "Apply" button
cy.get('[data-testid="set-header-apply-button"]').click();

Expand Down
206 changes: 8 additions & 198 deletions src/components/SettingsModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,19 @@
import { fetchCapabilities, fetchCompatibleDSLs, fetchIntegrationSourceCode } from '@kaoto/api';
import { fetchIntegrationSourceCode } from '@kaoto/api';
import { ValidationService } from '@kaoto/services';
import { useFlowsStore, useIntegrationSourceStore, useSettingsStore } from '@kaoto/store';
import { ICapabilities, ISettings } from '@kaoto/types';
import { getDescriptionIfExists, usePrevious } from '@kaoto/utils';
import { ISettings } from '@kaoto/types';
import { usePrevious } from '@kaoto/utils';
import {
AlertVariant,
Button,
Form,
FormGroup,
FormSelect,
FormSelectOption,
Modal,
ModalVariant,
Popover,
TextArea,
TextInput,
} from '@patternfly/react-core';
import { HelpIcon } from '@patternfly/react-icons';
import { useAlert } from '@rhoas/app-services-ui-shared';
import isEqual from 'lodash.isequal';
import { useCallback, useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { shallow } from 'zustand/shallow';

export interface ISettingsModal {
Expand All @@ -30,117 +24,34 @@ export interface ISettingsModal {
/**
* Contains the contents for the Settings modal.
* @param handleCloseModal
* @param handleUpdateViews
* @param isModalOpen
* @constructor
*/
export const SettingsModal = ({ handleCloseModal, isModalOpen }: ISettingsModal) => {
const [availableDSLs, setAvailableDSLs] = useState<string[]>([]);
const { settings, setSettings } = useSettingsStore((state) => state);
const [localSettings, setLocalSettings] = useState<ISettings>(settings);
const { flows, properties, metadata, setFlowsWrapper } = useFlowsStore(
({ flows, properties, metadata, setFlowsWrapper }) => ({
const { flows, properties, metadata } = useFlowsStore(
({ flows, properties, metadata }) => ({
flows,
properties,
metadata,
setFlowsWrapper,
}),
shallow
shallow,
);
const { setSourceCode } = useIntegrationSourceStore();
const previousFlows = usePrevious(flows);
const previousNamespace = usePrevious(localSettings.namespace);
const [nameValidation, setNameValidation] = useState<
'default' | 'warning' | 'success' | 'error' | undefined
>('default');
const [namespaceValidation, setNamespaceValidation] = useState<
'default' | 'warning' | 'success' | 'error' | undefined
>('default');

const { addAlert } = useAlert() || {};

const onChangeDsl = useCallback((value: string) => {
fetchCapabilities().then((capabilities: ICapabilities) => {
capabilities.dsls.forEach((dsl) => {
if (dsl.name !== value) return;

setLocalSettings((state) => ({ ...state, dsl }));

const updatedFlowWrapper = {
flows: flows.map((flow) => ({
...flow,
dsl: settings.dsl.name,
})),
properties,
metadata,
};

setFlowsWrapper(updatedFlowWrapper);
});
});
}, []);

useEffect(() => {
// update settings if there is a name change
setLocalSettings((state) => ({ ...state, name: settings.name }));
}, [settings.name]);

useEffect(() => {
/** TODO: how to handle multiple flows? */
/** update the description from the first flow */
const description = getDescriptionIfExists(flows[0]);
if (settings.description !== description) {
if (description) {
setLocalSettings((state) => ({ ...state, description }));
}
}
}, [flows, settings.description]);

useEffect(() => {
// update the DSL if changed
if (settings.dsl.name === localSettings.dsl.name) return;
onChangeDsl(settings.dsl.name);
}, [settings.name, settings.description, settings.dsl]);

useEffect(() => {
// update settings with the default namespace fetched from the API
if (settings.namespace === previousNamespace) return;
setLocalSettings((state) => ({ ...state, namespace: settings.namespace }));
}, [settings.namespace]);

useEffect(() => {
if (isEqual(previousFlows, flows) || !Array.isArray(flows[0].steps)) return;
// subsequent changes to the integration requires fetching
// DSLs compatible with the specific integration
fetchCompatibleDSLs({
steps: flows[0].steps,
})
.then((value) => {
if (value) {
if (Array.isArray(value)) {
setAvailableDSLs(value);
}
}
})
.catch((e) => {
console.error(e);
});
}, [flows]);

const onChangeDescription = (newDesc: string) => {
setLocalSettings((state) => ({ ...state, description: newDesc }));
};

const onChangeName = (newName: string) => {
setLocalSettings((state) => ({ ...state, name: newName }));

if (ValidationService.isNameValidCheck(newName)) {
setNameValidation('success');
} else {
setNameValidation('error');
}
};

const onChangeNamespace = (newNamespace: string) => {
setLocalSettings((state) => ({ ...state, namespace: newNamespace }));

Expand Down Expand Up @@ -204,7 +115,7 @@ export const SettingsModal = ({ handleCloseModal, isModalOpen }: ISettingsModal)
variant="primary"
data-testid={'settings-modal--save'}
onClick={onSave}
isDisabled={namespaceValidation === 'error' || nameValidation === 'error'}
isDisabled={namespaceValidation === 'error'}
>
Save
</Button>,
Expand All @@ -225,37 +136,6 @@ export const SettingsModal = ({ handleCloseModal, isModalOpen }: ISettingsModal)
ouiaId="settings-modal"
>
<Form>
<FormGroup
fieldId="integration-name"
helperTextInvalid="Must be lowercase and alphanumeric (dashes allowed)"
validated={nameValidation}
isRequired
label="Name"
>
<TextInput
aria-describedby="integration-name-helper"
data-testid={'settings--integration-name'}
id="integration-name"
isRequired
name="integration-name"
onChange={onChangeName}
type="text"
value={localSettings.name}
validated={nameValidation}
aria-invalid={nameValidation === 'error'}
/>
</FormGroup>
<FormGroup fieldId="integration-description" label="Description">
<TextArea
aria-describedby="integration-description-helper"
data-testid={'settings--description'}
id="integration-description"
name="integration-description"
onChange={onChangeDescription}
type="textarea"
value={localSettings.description}
/>
</FormGroup>
<FormGroup
fieldId="namespace"
helperText="Specify the namespace for your cluster."
Expand All @@ -277,76 +157,6 @@ export const SettingsModal = ({ handleCloseModal, isModalOpen }: ISettingsModal)
aria-invalid={namespaceValidation === 'error'}
/>
</FormGroup>
<FormGroup
label="Type"
labelIcon={
<Popover
headerContent={'Type'}
bodyContent={
<div data-testid={'settings--integration-type-helper'}>
<p>
The integration type determines what steps you have in the catalog. Not all
shown here will be available to you, as it depends on the steps you currently
are using.
</p>
<br />
<ul>
<li>
<b>Kamelets</b>: Choose this if you want to create a connection to be used in
an integration. Read more about Kamelets&nbsp;
<a
href={'https://camel.apache.org/camel-k/latest/kamelets/kamelets.html'}
target={'_blank'}
rel={'noopener'}
>
here
</a>
.
</li>
<li>
<b>KameletBindings</b>: Choose this if you want to create an integration.
</li>
<li>
<b>Camel Routes</b> (advanced): Choose this if you want to create an advanced
integration.
</li>
</ul>
</div>
}
>
<button
type="button"
aria-label="More info for integration type"
onClick={(e) => e.preventDefault()}
data-testid={'settings--integration-type-helper-btn'}
aria-describedby="dsl-type"
className="pf-c-form__group-label-help"
>
<HelpIcon noVerticalAlign />
</button>
</Popover>
}
type="string"
fieldId="dsl-type"
>
<FormSelect
aria-label="Select Type"
onChange={onChangeDsl}
data-testid={'settings--integration-type'}
value={localSettings.dsl.name}
>
{availableDSLs.map((dsl, idx) => {
return (
<FormSelectOption
key={idx}
value={dsl}
label={dsl}
data-testid={`settings--integration-type__${dsl}`}
/>
);
})}
</FormSelect>
</FormGroup>
</Form>
</Modal>
);
Expand Down

0 comments on commit 822ef30

Please sign in to comment.