Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: dimmed as default disable method #1502

Merged
merged 13 commits into from
Dec 6, 2024
Merged

chore: dimmed as default disable method #1502

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
621584d
feat: dimmed as default disable method
soleksy-splunk Dec 3, 2024
bed3bb7
test: align tests to dimmed disabled version
soleksy-splunk Dec 3, 2024
bb9dbeb
test: add storybook with text field prosp true
soleksy-splunk Dec 3, 2024
cf2fa84
update screenshots
srv-rr-github-token Dec 3, 2024
d7b8ead
ci: trigger
soleksy-splunk Dec 3, 2024
199ee82
chore: new button component
soleksy-splunk Dec 5, 2024
d285729
test: review
soleksy-splunk Dec 5, 2024
b98bac8
chore: rename button component
soleksy-splunk Dec 5, 2024
6ca0925
chore: extend expect
soleksy-splunk Dec 5, 2024
17bf7a1
chore: review
soleksy-splunk Dec 5, 2024
e41291b
chore: toMatchImageSnapshot types
soleksy-splunk Dec 5, 2024
1548f4f
chore: add except extenders to storybook
soleksy-splunk Dec 5, 2024
3020b4b
chore: revert toMatchImageSnapshot extension change
soleksy-splunk Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui/src/components/ConfigurationFormView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ function ConfigurationFormView({ serviceName }) {
appearance="primary"
label={isSubmitting ? <WaitSpinner /> : _('Save')}
onClick={handleSubmit}
disabled={isSubmitting}
disabled={isSubmitting && 'dimmed'}
/>
</ButtonWrapper>
</>
Expand Down
4 changes: 2 additions & 2 deletions ui/src/components/DeleteModal/DeleteModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,13 +113,13 @@ class DeleteModal extends Component<DeleteModalProps, DeleteModalState> {
appearance="secondary"
onClick={this.handleRequestClose}
label={_('Cancel')}
disabled={this.state.isDeleting}
disabled={this.state.isDeleting && 'dimmed'}
/>
<StyledButton
appearance="primary"
label={this.state.isDeleting ? <WaitSpinner /> : _('Delete')}
onClick={this.handleDelete}
disabled={this.state.isDeleting}
disabled={this.state.isDeleting && 'dimmed'}
soleksy-splunk marked this conversation as resolved.
Show resolved Hide resolved
/>
</Modal.Footer>
</ModalWrapper>
Expand Down
21 changes: 14 additions & 7 deletions ui/src/components/EntityModal/EntityModal.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,8 @@ describe('Oauth field disabled on edit - diableonEdit property', () => {
renderModalWithProps(props);
const oauthTextBox = getDisabledOauthField();
expect(oauthTextBox).toBeInTheDocument();
expect(oauthTextBox).not.toHaveAttribute('disabled');
expect(oauthTextBox).not.toHaveAttribute('readonly');
expect(oauthTextBox?.getAttribute('aria-disabled')).toBe('false');
soleksy-splunk marked this conversation as resolved.
Show resolved Hide resolved
});

it('Oauth Oauth - disableonEdit = true, oauth field disabled on edit', async () => {
Expand All @@ -82,7 +83,8 @@ describe('Oauth field disabled on edit - diableonEdit property', () => {

const oauthTextBox = getDisabledOauthField();
expect(oauthTextBox).toBeInTheDocument();
expect(oauthTextBox).toHaveAttribute('disabled');
expect(oauthTextBox).toHaveAttribute('readonly');
expect(oauthTextBox?.getAttribute('aria-disabled')).toBe('true');
});

it('Oauth Basic - Enable field equal false, so field disabled', async () => {
Expand All @@ -102,7 +104,8 @@ describe('Oauth field disabled on edit - diableonEdit property', () => {

const oauthTextBox = getDisabledBasicField();
expect(oauthTextBox).toBeInTheDocument();
expect(oauthTextBox).toHaveAttribute('disabled');
expect(oauthTextBox).toHaveAttribute('readonly');
expect(oauthTextBox?.getAttribute('aria-disabled')).toBe('true');
});

it('if oauth field not disabled with create after disableonEdit true', async () => {
Expand All @@ -120,7 +123,8 @@ describe('Oauth field disabled on edit - diableonEdit property', () => {
renderModalWithProps(props);
const oauthTextBox = getDisabledBasicField();
expect(oauthTextBox).toBeInTheDocument();
expect(oauthTextBox).not.toHaveAttribute('disabled');
expect(oauthTextBox).not.toHaveAttribute('readonly');
expect(oauthTextBox?.getAttribute('aria-disabled')).toBe('false');
});
});

Expand Down Expand Up @@ -163,7 +167,8 @@ describe('Options - Enable field property', () => {
renderModalWithProps(props);
const oauthTextBox = getDisabledOauthField();
expect(oauthTextBox).toBeInTheDocument();
expect(oauthTextBox).toHaveAttribute('disabled');
expect(oauthTextBox).toHaveAttribute('readonly');
expect(oauthTextBox?.getAttribute('aria-disabled')).toBe('true');
});

it('Oauth Basic - Enable field equal false, so field disabled', async () => {
Expand All @@ -181,7 +186,8 @@ describe('Options - Enable field property', () => {
renderModalWithProps(props);
const oauthTextBox = getDisabledOauthField();
expect(oauthTextBox).toBeInTheDocument();
expect(oauthTextBox).toHaveAttribute('disabled');
expect(oauthTextBox).toHaveAttribute('readonly');
expect(oauthTextBox?.getAttribute('aria-disabled')).toBe('true');
});

it('Oauth Basic - Fully enabled field, enabled: true, disableonEdit: false', async () => {
Expand All @@ -199,7 +205,8 @@ describe('Options - Enable field property', () => {
renderModalWithProps(props);
const oauthTextBox = getDisabledOauthField();
expect(oauthTextBox).toBeInTheDocument();
expect(oauthTextBox).not.toHaveAttribute('disabled');
expect(oauthTextBox).not.toHaveAttribute('readonly');
expect(oauthTextBox?.getAttribute('aria-disabled')).toBe('false');
});
});

Expand Down
4 changes: 2 additions & 2 deletions ui/src/components/EntityModal/EntityModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,14 +102,14 @@ class EntityModal extends Component<EntityModalProps, EntityModalState> {
appearance="secondary"
onClick={this.handleRequestClose}
label={_('Cancel')}
disabled={this.state.isSubmititng}
disabled={this.state.isSubmititng && 'dimmed'}
/>
<StyledButton
className="saveBtn"
appearance="primary"
label={this.state.isSubmititng ? <WaitSpinner /> : this.buttonText}
onClick={this.handleSubmit}
disabled={this.state.isSubmititng}
disabled={this.state.isSubmititng && 'dimmed'}
/>
</Modal.Footer>
</ModalWrapper>
Expand Down
4 changes: 2 additions & 2 deletions ui/src/components/EntityPage/EntityPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,15 +112,15 @@ function EntityPage({
appearance="secondary"
onClick={handleRequestClose}
label={_('Cancel')}
disabled={isSubmitting}
disabled={isSubmitting && 'dimmed'}
style={{ width: '80px' }}
/>
<StyledButton
type="Submit"
appearance="primary"
label={isSubmitting ? <WaitSpinner /> : buttonText}
onClick={handleSubmit}
disabled={isSubmitting}
disabled={isSubmitting && 'dimmed'}
style={{ width: '80px' }}
/>
</ButtonRow>
Expand Down
12 changes: 8 additions & 4 deletions ui/src/components/FormModifications/FormModifications.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,18 +127,22 @@ it('verify modification after text components change', async () => {
expect(parentElement).toHaveTextContent(mods.label);
};

expect(componentInput).toBeDisabled();
expect(componentInput).toHaveAttribute('readonly');
expect(componentInput.getAttribute('aria-disabled')).toBe('true');
verifyAllProps(componentParentElement, componentInput, mods1Field1);

expect(component2Input).toBeDisabled();
expect(component2Input).toHaveAttribute('readonly');
expect(component2Input.getAttribute('aria-disabled')).toBe('true');
verifyAllProps(component2ParentElement, component2Input, mods1Field2);

await userEvent.type(componentMakingModsTextBox1, secondValueToInput);

expect(componentInput).toBeEnabled();
expect(componentInput).not.toHaveAttribute('readonly');
expect(componentInput.getAttribute('aria-disabled')).toBe('false');
verifyAllProps(componentParentElement, componentInput, mods2Field1);

expect(component2Input).toBeEnabled();
expect(component2Input).not.toHaveAttribute('readonly');
expect(component2Input.getAttribute('aria-disabled')).toBe('false');
verifyAllProps(component2ParentElement, component2Input, mods2Field2);
});

Expand Down
4 changes: 2 additions & 2 deletions ui/src/components/InteractAllStatusButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export function InteractAllStatusButtons(props: DisableAllStatusButtonProps) {
setIsDisabling(false);
}}
role="button"
disabled={props.dataRows.length < 1}
disabled={props.dataRows.length < 1 && 'dimmed'}
>
Activate all
</InteractAllActionButton>
Expand All @@ -68,7 +68,7 @@ export function InteractAllStatusButtons(props: DisableAllStatusButtonProps) {
setIsDisabling(true);
}}
role="button"
disabled={props.dataRows.length < 1}
disabled={props.dataRows.length < 1 && 'dimmed'}
>
Deactivate all
</InteractAllActionButton>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/TextComponent/TextComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ class TextComponent extends Component<TextComponentProps> {
inline
error={this.props.error}
className={this.props.field}
disabled={this.props.disabled}
disabled={this.props.disabled && 'dimmed'}
value={
this.props.value === null || typeof this.props.value === 'undefined'
? ''
Expand Down
11 changes: 11 additions & 0 deletions ui/src/components/TextComponent/stories/TextComponent.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,14 @@ export const Base: Story = {
disabled: false,
},
};

export const AllPropsTrue: Story = {
args: {
handleChange: fn(),
value: 'default value',
field: 'field',
error: true,
encrypted: true,
disabled: true,
},
};
3 changes: 3 additions & 0 deletions ...ents/TextComponent/stories/__images__/TextComponent-all-props-true-chromium.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading