chore: dimmed as default disable method (#1502)

**Issue number:** N/A ### PR Type **What kind of change does this PR introduce?** * [ ] Feature * [ ] Bug Fix * [ ] Refactoring (no functional or API changes) * [ ] Documentation Update * [x] Maintenance (dependency updates, CI, etc.) ## Summary Allows users to use assistance technologies for disabled buttons and text fields. ### Changes Adapt to documentation suggestion to use "dimmed" option for disabled fields: [Text](https://splunkui.splunk.com/Packages/react-ui/Text?section=examples#Dimmed) [Button](https://splunkui.splunk.com/Packages/react-ui/Button?section=examples#Dimmed) ### User experience Users can navigate by disabled buttons and text fields by using tab. ## Checklist If an item doesn't apply to your changes, leave it unchecked. * [x] I have performed a self-review of this change according to the [development guidelines](https://splunk.github.io/addonfactory-ucc-generator/contributing/#development-guidelines) * [ ] Tests have been added/modified to cover the changes [(testing doc)](https://splunk.github.io/addonfactory-ucc-generator/contributing/#build-and-test) * [ ] Changes are documented * [x] PR title and description follows the [contributing principles](https://splunk.github.io/addonfactory-ucc-generator/contributing/#pull-requests) --------- Co-authored-by: srv-rr-github-token <[email protected]>
splunk · Dec 6, 2024 · 0c1ef99 · 0c1ef99
1 parent 3fd0501
commit 0c1ef99
Show file tree

Hide file tree

Showing 22 changed files with 177 additions and 87 deletions.
diff --git a/ui/jest.setup.ts b/ui/jest.setup.ts
@@ -1,8 +1,9 @@
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/jest-globals';
-
 import { configure } from '@testing-library/react';
+
 import { server } from './src/mocks/server';
+import './src/tests/expectExtenders';
 
 /**
  * Configure test attributes

diff --git a/ui/package.json b/ui/package.json
@@ -74,6 +74,7 @@
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
+    "@types/jest-image-snapshot": "^6.4.0",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^20.17.6",
     "@types/react": "^16.14.62",

diff --git a/ui/src/components/AcceptModal/AcceptModal.tsx b/ui/src/components/AcceptModal/AcceptModal.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import Modal from '@splunk/react-ui/Modal';
 import Message from '@splunk/react-ui/Message';
 import styled from 'styled-components';
-import { StyledButton } from '../../pages/EntryPageStyle';
+
+import { UCCButton } from '../UCCButton/UCCButton';
 
 const ModalWrapper = styled(Modal)`
     width: 600px;
@@ -30,13 +31,11 @@ function AcceptModal(props: AcceptModalProps) {
                 </Message>
             </Modal.Body>
             <Modal.Footer>
-                <StyledButton
-                    appearance="primary"
+                <UCCButton
                     onClick={() => props.handleRequestClose(false)}
                     label={props.declineBtnLabel || 'Cancel'}
                 />
-                <StyledButton
-                    appearance="primary"
+                <UCCButton
                     onClick={() => props.handleRequestClose(true)}
                     label={props.acceptBtnLabel || 'OK'}
                 />

diff --git a/ui/src/components/ConfigurationFormView.jsx b/ui/src/components/ConfigurationFormView.jsx
@@ -3,10 +3,9 @@ import PropTypes from 'prop-types';
 
 import { _ } from '@splunk/ui-utils/i18n';
 import styled from 'styled-components';
-import WaitSpinner from '@splunk/react-ui/WaitSpinner';
 
 import BaseFormView from './BaseFormView/BaseFormView';
-import { StyledButton } from '../pages/EntryPageStyle';
+import { UCCButton } from './UCCButton/UCCButton';
 import { getRequest, generateEndPointUrl } from '../util/api';
 import { MODE_CONFIG } from '../constants/modes';
 import { WaitSpinnerWrapper } from './table/CustomTableStyle';
@@ -88,12 +87,11 @@ function ConfigurationFormView({ serviceName }) {
                 )}
             </PageContext.Consumer>
             <ButtonWrapper>
-                <StyledButton
+                <UCCButton
                     className="saveBtn"
-                    appearance="primary"
-                    label={isSubmitting ? <WaitSpinner /> : _('Save')}
+                    label={_('Save')}
                     onClick={handleSubmit}
-                    disabled={isSubmitting}
+                    loading={isSubmitting}
                 />
             </ButtonWrapper>
         </>

diff --git a/ui/src/components/DashboardInfoModal/DashboardInfoModal.tsx b/ui/src/components/DashboardInfoModal/DashboardInfoModal.tsx
@@ -6,7 +6,7 @@ import Heading from '@splunk/react-ui/Heading';
 import P from '@splunk/react-ui/Paragraph';
 import QuestionCircle from '@splunk/react-icons/QuestionCircle';
 
-import { StyledButton } from '../../pages/EntryPageStyle';
+import { UCCButton } from '../UCCButton/UCCButton';
 
 const ModalWrapper = styled(Modal)`
     width: 700px;
@@ -48,15 +48,14 @@ function DashboardInfoModal(props: DashboardInfoModalProps) {
             </Modal.Body>
             <Modal.Footer>
                 {props?.troubleshootingButton?.link ? ( // to do change it into troubleshooting link
-                    <StyledButton
+                    <UCCButton
                         icon={<QuestionCircle width={16} height={16} />}
                         to={props?.troubleshootingButton?.link}
                         label={props.troubleshootingButton?.label || 'Troubleshooting {add-on}'}
                         openInNewContext
                     />
                 ) : null}
-                <StyledButton
-                    appearance="primary"
+                <UCCButton
                     onClick={() => props.handleRequestClose()}
                     label={props.closeBtnLabel || 'Close'}
                 />

diff --git a/ui/src/components/DeleteModal/DeleteModal.tsx b/ui/src/components/DeleteModal/DeleteModal.tsx
@@ -2,17 +2,16 @@ import React, { Component } from 'react';
 import Modal from '@splunk/react-ui/Modal';
 import Message from '@splunk/react-ui/Message';
 import styled from 'styled-components';
-import WaitSpinner from '@splunk/react-ui/WaitSpinner';
 import update from 'immutability-helper';
 import { _ } from '@splunk/ui-utils/i18n';
-import { generateToast } from '../../util/util';
-import { StyledButton } from '../../pages/EntryPageStyle';
 
+import { generateToast } from '../../util/util';
 import { deleteRequest, generateEndPointUrl } from '../../util/api';
 import TableContext from '../../context/TableContext';
 import { parseErrorMsg, getFormattedMessage } from '../../util/messageUtil';
 import { PAGE_INPUT } from '../../constants/pages';
 import { StandardPages } from '../../types/components/shareableTypes';
+import { UCCButton } from '../UCCButton/UCCButton';
 
 const ModalWrapper = styled(Modal)`
     width: 800px;
@@ -109,17 +108,16 @@ class DeleteModal extends Component<DeleteModalProps, DeleteModalState> {
                     <p>{deleteMsg}</p>
                 </Modal.Body>
                 <Modal.Footer>
-                    <StyledButton
+                    <UCCButton
                         appearance="secondary"
                         onClick={this.handleRequestClose}
                         label={_('Cancel')}
                         disabled={this.state.isDeleting}
                     />
-                    <StyledButton
-                        appearance="primary"
-                        label={this.state.isDeleting ? <WaitSpinner /> : _('Delete')}
+                    <UCCButton
+                        label={_('Delete')}
                         onClick={this.handleDelete}
-                        disabled={this.state.isDeleting}
+                        loading={this.state.isDeleting}
                     />
                 </Modal.Footer>
             </ModalWrapper>

diff --git a/ui/src/components/EntityModal/EntityModal.test.tsx b/ui/src/components/EntityModal/EntityModal.test.tsx
@@ -62,7 +62,7 @@ describe('Oauth field disabled on edit - diableonEdit property', () => {
         renderModalWithProps(props);
         const oauthTextBox = getDisabledOauthField();
         expect(oauthTextBox).toBeInTheDocument();
-        expect(oauthTextBox).not.toHaveAttribute('disabled');
+        expect(oauthTextBox).toBeVisuallyEnabled();
     });
 
     it('Oauth Oauth - disableonEdit = true, oauth field disabled on edit', async () => {
@@ -82,7 +82,7 @@ describe('Oauth field disabled on edit - diableonEdit property', () => {
 
         const oauthTextBox = getDisabledOauthField();
         expect(oauthTextBox).toBeInTheDocument();
-        expect(oauthTextBox).toHaveAttribute('disabled');
+        expect(oauthTextBox).toBeVisuallyDisabled();
     });
 
     it('Oauth Basic - Enable field equal false, so field disabled', async () => {
@@ -102,7 +102,7 @@ describe('Oauth field disabled on edit - diableonEdit property', () => {
 
         const oauthTextBox = getDisabledBasicField();
         expect(oauthTextBox).toBeInTheDocument();
-        expect(oauthTextBox).toHaveAttribute('disabled');
+        expect(oauthTextBox).toBeVisuallyDisabled();
     });
 
     it('if oauth field not disabled with create after disableonEdit true', async () => {
@@ -120,7 +120,7 @@ describe('Oauth field disabled on edit - diableonEdit property', () => {
         renderModalWithProps(props);
         const oauthTextBox = getDisabledBasicField();
         expect(oauthTextBox).toBeInTheDocument();
-        expect(oauthTextBox).not.toHaveAttribute('disabled');
+        expect(oauthTextBox).toBeVisuallyEnabled();
     });
 });
 
@@ -163,7 +163,7 @@ describe('Options - Enable field property', () => {
         renderModalWithProps(props);
         const oauthTextBox = getDisabledOauthField();
         expect(oauthTextBox).toBeInTheDocument();
-        expect(oauthTextBox).toHaveAttribute('disabled');
+        expect(oauthTextBox).toBeVisuallyDisabled();
     });
 
     it('Oauth Basic - Enable field equal false, so field disabled', async () => {
@@ -181,7 +181,7 @@ describe('Options - Enable field property', () => {
         renderModalWithProps(props);
         const oauthTextBox = getDisabledOauthField();
         expect(oauthTextBox).toBeInTheDocument();
-        expect(oauthTextBox).toHaveAttribute('disabled');
+        expect(oauthTextBox).toBeVisuallyDisabled();
     });
 
     it('Oauth Basic - Fully enabled field, enabled: true, disableonEdit: false', async () => {
@@ -199,7 +199,7 @@ describe('Options - Enable field property', () => {
         renderModalWithProps(props);
         const oauthTextBox = getDisabledOauthField();
         expect(oauthTextBox).toBeInTheDocument();
-        expect(oauthTextBox).not.toHaveAttribute('disabled');
+        expect(oauthTextBox).toBeVisuallyEnabled();
     });
 });
 

diff --git a/ui/src/components/EntityModal/EntityModal.tsx b/ui/src/components/EntityModal/EntityModal.tsx
@@ -1,15 +1,14 @@
-import React, { Component, ReactElement } from 'react';
+import React, { Component } from 'react';
 import Modal from '@splunk/react-ui/Modal';
 import styled from 'styled-components';
-import WaitSpinner from '@splunk/react-ui/WaitSpinner';
 import { _ } from '@splunk/ui-utils/i18n';
-
 import { ButtonClickHandler } from '@splunk/react-ui/Button';
+
 import { Mode, MODE_CLONE, MODE_CREATE, MODE_EDIT } from '../../constants/modes';
-import { StyledButton } from '../../pages/EntryPageStyle';
 import BaseFormView from '../BaseFormView/BaseFormView';
 import { StandardPages } from '../../types/components/shareableTypes';
 import PageContext from '../../context/PageContext';
+import { UCCButton } from '../UCCButton/UCCButton';
 
 const ModalWrapper = styled(Modal)`
     width: 800px;
@@ -33,7 +32,7 @@ interface EntityModalState {
 class EntityModal extends Component<EntityModalProps, EntityModalState> {
     form: React.RefObject<BaseFormView>;
 
-    buttonText: string | ReactElement;
+    buttonText: string;
 
     constructor(props: EntityModalProps) {
         super(props);
@@ -98,18 +97,17 @@ class EntityModal extends Component<EntityModalProps, EntityModalState> {
                     </PageContext.Consumer>
                 </Modal.Body>
                 <Modal.Footer>
-                    <StyledButton
+                    <UCCButton
                         appearance="secondary"
                         onClick={this.handleRequestClose}
                         label={_('Cancel')}
                         disabled={this.state.isSubmititng}
                     />
-                    <StyledButton
+                    <UCCButton
                         className="saveBtn"
-                        appearance="primary"
-                        label={this.state.isSubmititng ? <WaitSpinner /> : this.buttonText}
+                        label={this.buttonText}
+                        loading={this.state.isSubmititng}
                         onClick={this.handleSubmit}
-                        disabled={this.state.isSubmititng}
                     />
                 </Modal.Footer>
             </ModalWrapper>

diff --git a/ui/src/components/EntityPage/EntityPage.tsx b/ui/src/components/EntityPage/EntityPage.tsx
@@ -1,21 +1,21 @@
 import React, { memo, useRef, useState } from 'react';
 
 import Link from '@splunk/react-ui/Link';
-import WaitSpinner from '@splunk/react-ui/WaitSpinner';
 import ColumnLayout from '@splunk/react-ui/ColumnLayout';
 import { _ } from '@splunk/ui-utils/i18n';
 import { variables } from '@splunk/themes';
 
 import Heading from '@splunk/react-ui/Heading';
 import styled from 'styled-components';
 import { ButtonClickHandler } from '@splunk/react-ui/Button';
+
 import { MODE_CLONE, MODE_CREATE, MODE_EDIT, Mode } from '../../constants/modes';
 import BaseFormView from '../BaseFormView/BaseFormView';
 import { SubTitleComponent } from '../../pages/Input/InputPageStyle';
 import { PAGE_INPUT } from '../../constants/pages';
-import { StyledButton } from '../../pages/EntryPageStyle';
 import { StandardPages } from '../../types/components/shareableTypes';
 import PageContext from '../../context/PageContext';
+import { UCCButton } from '../UCCButton/UCCButton';
 
 interface EntityPageProps {
     handleRequestClose: () => void;
@@ -108,19 +108,18 @@ function EntityPage({
                         </PageContext.Consumer>
                     </ShadowedDiv>
                     <ButtonRow>
-                        <StyledButton
+                        <UCCButton
                             appearance="secondary"
                             onClick={handleRequestClose}
                             label={_('Cancel')}
                             disabled={isSubmitting}
                             style={{ width: '80px' }}
                         />
-                        <StyledButton
+                        <UCCButton
                             type="Submit"
-                            appearance="primary"
-                            label={isSubmitting ? <WaitSpinner /> : buttonText}
+                            label={buttonText}
                             onClick={handleSubmit}
-                            disabled={isSubmitting}
+                            loading={isSubmitting}
                             style={{ width: '80px' }}
                         />
                     </ButtonRow>

diff --git a/ui/src/components/ErrorModal/ErrorModal.tsx b/ui/src/components/ErrorModal/ErrorModal.tsx
@@ -4,7 +4,7 @@ import Message from '@splunk/react-ui/Message';
 import styled from 'styled-components';
 
 import { getFormattedMessage } from '../../util/messageUtil';
-import { StyledButton } from '../../pages/EntryPageStyle';
+import { UCCButton } from '../UCCButton/UCCButton';
 
 const ModalWrapper = styled(Modal)`
     width: 600px;
@@ -31,7 +31,7 @@ function ErrorModal(props: ErrorModalProps) {
                 </Message>
             </Modal.Body>
             <Modal.Footer>
-                <StyledButton appearance="primary" onClick={handleRequestClose} label="OK" />
+                <UCCButton onClick={handleRequestClose} label="OK" />
             </Modal.Footer>
         </ModalWrapper>
     );

diff --git a/ui/src/components/FormModifications/FormModifications.test.tsx b/ui/src/components/FormModifications/FormModifications.test.tsx
@@ -127,18 +127,22 @@ it('verify modification after text components change', async () => {
         expect(parentElement).toHaveTextContent(mods.label);
     };
 
-    expect(componentInput).toBeDisabled();
+    expect(componentInput).toBeVisuallyDisabled();
+
     verifyAllProps(componentParentElement, componentInput, mods1Field1);
 
-    expect(component2Input).toBeDisabled();
+    expect(component2Input).toBeVisuallyDisabled();
+
     verifyAllProps(component2ParentElement, component2Input, mods1Field2);
 
     await userEvent.type(componentMakingModsTextBox1, secondValueToInput);
 
-    expect(componentInput).toBeEnabled();
+    expect(component2Input).toBeVisuallyEnabled();
+
     verifyAllProps(componentParentElement, componentInput, mods2Field1);
 
-    expect(component2Input).toBeEnabled();
+    expect(component2Input).toBeVisuallyEnabled();
+
     verifyAllProps(component2ParentElement, component2Input, mods2Field2);
 });
 

diff --git a/ui/src/components/MenuInput/MenuInput.tsx b/ui/src/components/MenuInput/MenuInput.tsx
@@ -8,13 +8,14 @@ import ChevronLeft from '@splunk/react-icons/ChevronLeft';
 import { _ as i18n } from '@splunk/ui-utils/i18n';
 import styled from 'styled-components';
 import { variables } from '@splunk/themes';
+
 import { getFormattedMessage } from '../../util/messageUtil';
 import { getUnifiedConfigs } from '../../util/util';
 import CustomMenu from '../CustomMenu';
-import { StyledButton } from '../../pages/EntryPageStyle';
 import { invariant } from '../../util/invariant';
 import { usePageContext } from '../../context/usePageContext';
 import { shouldHideForPlatform } from '../../util/pageContext';
+import { UCCButton } from '../UCCButton/UCCButton';
 
 const CustomSubTitle = styled.span`
     color: ${variables.brandColorD20};
@@ -67,14 +68,7 @@ function MenuInput({ handleRequestOpen }: MenuInputProps) {
     }, [inputs.services, pageContext.platform]);
 
     const closeReasons = ['clickAway', 'escapeKey', 'offScreen', 'toggleClick'];
-    const toggle = (
-        <StyledButton
-            appearance="primary"
-            id="addInputBtn"
-            label={i18n('Create New Input')}
-            isMenu
-        />
-    );
+    const toggle = <UCCButton id="addInputBtn" label={i18n('Create New Input')} isMenu />;
 
     useEffect(() => {
         if (!isSubMenu) {
@@ -211,9 +205,8 @@ function MenuInput({ handleRequestOpen }: MenuInputProps) {
 
     // Making a dropdown if we have one service
     const makeInputButton = () => (
-        <StyledButton
+        <UCCButton
             label={getFormattedMessage(100)}
-            appearance="primary"
             id="addInputBtn"
             onClick={() => {
                 handleRequestOpen({ serviceName: services[0].name });