Skip to content

Commit

Permalink
feat: default warning hidden after any input (#1024)
Browse files Browse the repository at this point in the history 
Standard behaviour of warning message to be always be displayed was not
intuitive and was requested to be changed into hidden after any input
change.

there is additional property `alwaysDisplay` in warning message object
that is false by default, which enables warning to be always displayed
```
"create": {
    "message": "Some warning for account text create",
    "alwaysDisplay": true
},
```
  • Loading branch information
@soleksy-splunk
soleksy-splunk authored Jan 26, 2024
1 parent 5ee23f5 commit d0d69ee
Show file tree
Hide file tree
Showing 10 changed files with 174 additions and 33 deletions.
34 changes: 34 additions & 0 deletions docs/advanced/custom_warning.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
This feature allows us to pass broarder description on Input and Configuration page displayed under main description.

### Warning Properties

| Property | Type | Description |
| -------- | ------ | ----------------------------------------- |
| create | object | Warning object definition for create form |
| edit | object | Warning object definition for edit form |
| clone | object | Warning object definition for clone form |
| config | object | Warning object definition for config form |

### Warning Object Properties

| Property | Type | Description |
| ------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------- |
| message<span class="required-asterisk">\*</span> | string | Text used for that description, you can put \n to add a breakline |
| alwaysDisplay | boolean | Force warning to be always displayed, even after input changes. Default value is **false**. |

### Usage

```json
"warning": {
"create": {
"message": "Some warning for create form",
"alwaysDisplay": true
},
"edit": {
"message": "Some warning for edit form "
},
"clone": {
"message": "Some warning for clone form"
}
},
```
4 changes: 2 additions & 2 deletions docs/configurations.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ proxy configuration and logging level configuration.
| ----------------------------------------------------------------- | ------ | ------------------------------------------------------- |
| title<span class="required-asterisk">\*</span> | string | - |
| description | string | To provide a brief summary of an configuration page. |
| [subDescription](../advanced/sub_description) | object | To provide broader description of an configuration page |
| [subDescription](./advanced/sub_description) | object | To provide broader description of an configuration page |
| [tabs](#tabs-properties)<span class="required-asterisk">\*</span> | array | To specify a list of tab. |

### Tabs properties
Expand All @@ -22,7 +22,7 @@ proxy configuration and logging level configuration.
| style | string | By specifying this property in the global config file, the forms can either be opened as a new page or in a dialog. <br>Supported values are "page" or "dialog". <br> Default value is **dialog**. |
| options | object | This property allows you to enable the [saveValidator](../advanced/save_validator) feature. |
| hook | object | It is used to add custom behaviour to forms. Visit the [Custom Hook](../custom_ui_extensions/custom_hook) page to learn more. |
| warning | object | It is used to add custom warning message for each of modes ('create', 'edit', 'config', 'clone'), message is displayed on form |
| [warning](./advanced/custom_warning.md) | object | It is used to add custom warning message for each of modes ('create', 'edit', 'config', 'clone'), message is displayed on form |
| conf | string | TBD |
| restHandlerName | string | TBD |
| restHandlerModule | string | TBD |
Expand Down
2 changes: 1 addition & 1 deletion docs/inputs/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ Developers are required to add services in the global config file to create a ne
| style | string | By specifying this property in the global config file, the forms can either be opened as a new page or in a dialog. <br>Supported values are "page" or "dialog". <br> Default value is **dialog**. |
| options | object | This property allows you to enable the [saveValidator](../advanced/save_validator) feature. |
| hook | object | It is used to add custom behaviour to forms. Visit the [Custom Hook](../custom_ui_extensions/custom_hook) page to learn more. |
| warning | object | It is used to add custom warning message for each of modes ('create', 'edit', 'config', 'clone'), message is displayed on form |
| [warning](../advanced/custom_warning.md) | object | It is used to add custom warning message for each of modes ('create', 'edit', 'config', 'clone'), message is displayed on form |
| [subDescription](../advanced/sub_description) | object | To provide broader description of an inputs page |
| conf | string | TBD |
| restHandlerName | string | TBD |
Expand Down
1 change: 1 addition & 0 deletions mkdocs.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ nav:
- Save Validator: "advanced/save_validator.md"
- OS-dependent libraries: "advanced/os-dependent_libraries.md"
- Sub Description: "advanced/sub_description.md"
- Custom Warning: "advanced/custom_warning.md"
- Troubleshooting: "troubleshooting.md"
- Contributing: "contributing.md"
- Changelog: "CHANGELOG.md"
24 changes: 17 additions & 7 deletions splunk_add_on_ucc_framework/schema/schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1974,22 +1974,32 @@
"type": "object",
"properties": {
"create": {
"type": "string",
"maxLength": 500
"$ref": "#/definitions/WarningMessageObject"
},
"edit": {
"type": "string",
"maxLength": 500
"$ref": "#/definitions/WarningMessageObject"
},
"clone": {
"type": "string",
"maxLength": 500
"$ref": "#/definitions/WarningMessageObject"
},
"config": {
"$ref": "#/definitions/WarningMessageObject"
}
}
},
"WarningMessageObject": {
"type": "object",
"properties": {
"message": {
"type": "string",
"maxLength": 500
},
"alwaysDisplay": {
"type": "boolean",
"default": false
}
}
},
"required": ["message"]
},
"Field": {
"type": "string",
Expand Down
36 changes: 28 additions & 8 deletions tests/testdata/test_addons/package_global_config_everything/globalConfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,16 @@
{
"name": "account",
"warning": {
"create": "Some warning for account text create",
"edit": "Some warning for account text edit",
"clone": "Some warning for account text clone"
"create": {
"message": "Some warning for account text create",
"alwaysDisplay": true
},
"edit": {
"message": "Some warning for account text edit"
},
"clone": {
"message": "Some warning for account text clone"
}
},
"table": {
"actions": [
Expand Down Expand Up @@ -251,7 +258,9 @@
{
"name": "proxy",
"warning": {
"config": "Some warning for proxy text config"
"config": {
"message": "Some warning for account text config"
}
},
"entity": [
{
Expand Down Expand Up @@ -355,7 +364,9 @@
{
"name": "logging",
"warning": {
"config": "Some logging for proxy text config"
"config": {
"message": "Some warning for account text config"
}
},
"entity": [
{
Expand Down Expand Up @@ -495,9 +506,18 @@
{
"name": "example_input_one",
"warning": {
"create": "Some warning for input text create",
"edit": "Some warning for input text edit",
"clone": "Some warning for input text clone"
"create": {
"message": "Some warning for account text create"
},
"edit": {
"message": "Some warning for account text edit"
},
"clone": {
"message": "Some warning for account text clone"
},
"delete": {
"message": "Some warning for account text delete"
}
},
"entity": [
{
Expand Down
15 changes: 9 additions & 6 deletions ui/src/components/BaseFormView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ class BaseFormView extends PureComponent<BaseFormProps, BaseFormState> {

childWin?: Window | null;

customWarningMessage: string;
customWarningMessage: { message: string; alwaysDisplay?: boolean };

constructor(props: BaseFormProps, context: React.ContextType<typeof TableContext>) {
super(props);
Expand Down Expand Up @@ -152,7 +152,7 @@ class BaseFormView extends PureComponent<BaseFormProps, BaseFormState> {
addCustomValidator: this.addCustomValidator,
utilCustomFunctions: this.util,
};
this.customWarningMessage = '';
this.customWarningMessage = { message: '' };

if (props.page === PAGE_INPUT) {
globalConfig.pages?.inputs?.services.forEach((service) => {
Expand All @@ -173,7 +173,9 @@ class BaseFormView extends PureComponent<BaseFormProps, BaseFormState> {
context?.rowData?.[props.serviceName]?.[props.stanzaName];
}
if (props.mode !== 'delete') {
this.customWarningMessage = service?.warning?.[props.mode] || '';
this.customWarningMessage = service?.warning?.[props.mode] || {
message: '',
};
}
}
});
Expand All @@ -187,7 +189,7 @@ class BaseFormView extends PureComponent<BaseFormProps, BaseFormState> {
this.entities = tab.entity;
this.options = tab.options;
if (props.mode !== 'delete') {
this.customWarningMessage = tab?.warning?.[props.mode] || '';
this.customWarningMessage = tab?.warning?.[props.mode] || { message: '' };
}
if (tab.hook) {
this.hookDeferred = this.loadHook(
Expand Down Expand Up @@ -494,7 +496,7 @@ class BaseFormView extends PureComponent<BaseFormProps, BaseFormState> {
this.state = {
data: temState,
errorMsg: '',
warningMsg: this.customWarningMessage,
warningMsg: this.customWarningMessage?.message || '',
};

// Hook on create method call
Expand Down Expand Up @@ -955,7 +957,8 @@ class BaseFormView extends PureComponent<BaseFormProps, BaseFormState> {
clearAllErrorMsg = (State: BaseFormState) => {
const newFields = State ? { ...State } : { ...this.state };
newFields.errorMsg = '';
newFields.warningMsg = this.customWarningMessage || '';
newFields.warningMsg =
(this.customWarningMessage?.alwaysDisplay && this.customWarningMessage?.message) || '';
const newData: BaseFormStateData = State ? { ...State.data } : { ...this.state.data };
const temData: BaseFormStateData = {};
Object.keys(newData).forEach((key) => {
Expand Down
42 changes: 41 additions & 1 deletion ui/src/components/EntityModal/EntityModal.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import {
getConfigWithOauthDefaultValue,
getConfigWarningMessage,
getConfigWithSeparatedEndpointsOAuth,
getConfigWarningMessageAlwaysDisplay,
WARNING_MESSAGES_ALWAYS_DISPLAY,
} from './TestConfig';
import { ERROR_AUTH_PROCESS_TERMINATED_TRY_AGAIN } from '../../constants/oAuthErrorMessage';
import { Mode } from '../../constants/modes';
Expand Down Expand Up @@ -264,6 +266,8 @@ describe('EntityModal - auth_endpoint_token_access_type', () => {

describe('EntityModal - custom warning', () => {
const handleRequestClose = jest.fn();
const DEFAULT_MODE = 'create';
const DEFAULT_PAGE = 'configuration';

const setUpConfigWithWarningMessageForConfiguration = () => {
const newConfig = getConfigWarningMessage();
Expand Down Expand Up @@ -309,10 +313,46 @@ describe('EntityModal - custom warning', () => {
}
renderModal(mode, page);

const warningMessage = screen.getByText(WARNING_MESSAGES[mode]);
const warningMessage = screen.getByText(WARNING_MESSAGES[mode]?.message);
expect(warningMessage).toBeInTheDocument();
}
);

it('warning disappears after input change', async () => {
setUpConfigWithWarningMessageForConfiguration();
renderModal(DEFAULT_MODE, DEFAULT_PAGE);
const warningMessage = screen.getByText(WARNING_MESSAGES[DEFAULT_MODE]?.message);
expect(warningMessage).toBeInTheDocument();
const anyInput = screen.getAllByRole('textbox');
expect(anyInput[0]).toBeInTheDocument();

if (anyInput[0]) {
await userEvent.type(anyInput[0], 'aaa');
}

expect(warningMessage).not.toBeInTheDocument();
});

const setUpConfigWithWarningMessageAlwaysDisplayed = () => {
const newConfig = getConfigWarningMessageAlwaysDisplay();
setUnifiedConfig(newConfig);
};

it('warning always displayed', async () => {
setUpConfigWithWarningMessageAlwaysDisplayed();
renderModal(DEFAULT_MODE, DEFAULT_PAGE);
const warningMessage = screen.getByText(
WARNING_MESSAGES_ALWAYS_DISPLAY[DEFAULT_MODE]?.message
);
expect(warningMessage).toBeInTheDocument();
const anyInput = screen.getAllByRole('textbox');
expect(anyInput[0]).toBeInTheDocument();

if (anyInput[0]) {
await userEvent.type(anyInput[0], 'aaa');
}
expect(warningMessage).toBeInTheDocument();
});
});

describe('Default value', () => {
Expand Down
36 changes: 32 additions & 4 deletions ui/src/components/EntityModal/TestConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,10 +223,17 @@ export const getConfigEnableFalseForOauth = () => {
};

export const WARNING_MESSAGES = {
create: 'Some warning text create',
edit: 'Some warning text edit',
clone: 'Some warning text clone',
config: 'Some warning text config',
create: { message: 'Some warning text create' },
edit: { message: 'Some warning text edit' },
clone: { message: 'Some warning text clone' },
config: { message: 'Some warning text config' },
};

export const WARNING_MESSAGES_ALWAYS_DISPLAY = {
create: { message: 'Some warning text create', alwaysDisplay: true },
edit: { message: 'Some warning text edit', alwaysDisplay: true },
clone: { message: 'Some warning text clone', alwaysDisplay: true },
config: { message: 'Some warning text config', alwaysDisplay: true },
};

export const getConfigWarningMessage = () => {
Expand All @@ -246,6 +253,27 @@ export const getConfigWarningMessage = () => {
return newConfig satisfies z.infer<typeof GlobalConfigSchema>;
};

export const getConfigWarningMessageAlwaysDisplay = () => {
const globalConfig = getGlobalConfigMock();
const newConfig = {
...globalConfig,
pages: {
...globalConfig.pages,
configuration: {
...globalConfig.pages.configuration,
tabs: [
{
entity: accessTokenMock,
...defaultTableProps,
warning: WARNING_MESSAGES_ALWAYS_DISPLAY,
},
],
},
},
};
return newConfig satisfies z.infer<typeof GlobalConfigSchema>;
};

export const getConfigWarningMessageForInputServices = () => {
const globalConfig = getGlobalConfigMock();
const newConfig = {
Expand Down
13 changes: 9 additions & 4 deletions ui/src/types/globalConfig/pages.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,17 @@ const HooksSchema = z
})
.optional();

const WarningMessageSchema = z.object({
message: z.string(),
alwaysDisplay: z.boolean().default(false).optional(),
});

const WarningSchema = z
.object({
create: z.string().optional(),
edit: z.string().optional(),
config: z.string().optional(),
clone: z.string().optional(),
create: WarningMessageSchema.optional(),
edit: WarningMessageSchema.optional(),
config: WarningMessageSchema.optional(),
clone: WarningMessageSchema.optional(),
})
.optional();

Expand Down

0 comments on commit d0d69ee

Please sign in to comment.