feat: Implemented styled component

splunk · Apr 2, 2021 · 503aeb4 · 503aeb4
1 parent a7eb1ee
commit 503aeb4
Show file tree

Hide file tree

Showing 23 changed files with 818 additions and 177 deletions.
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/package.json b/splunk_add_on_ucc_framework/ucc_ui_lib/package.json
@@ -20,7 +20,12 @@
     "test:ci": "cross-env JEST_JUNIT_OUTPUT_DIR=./test-reports JEST_JUNIT_OUTPUT_NAME=unit-results.xml JEST_JUNIT_CLASSNAME=unit yarn run test --ci --reporters=default jest-junit --coverage --coverageDirectory=coverage_report/coverage_maps_unit --coverageReporters=json",
     "test:watch": "jest --watch"
   },
-  "dependencies": {},
+  "dependencies": {
+    "css-loader": "^5.2.0",
+    "node-sass": "^5.0.0",
+    "sass-loader": "10.1.1",
+    "style-loader": "^2.0.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.2.0",
     "@splunk/babel-preset": "^3.0.0",

diff --git a/...k_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/appserver/templates/base.html b/...k_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/appserver/templates/base.html
@@ -9,7 +9,7 @@
         <link rel="apple-touch-icon" href="apple-touch-icon.png" />
     </head>
 
-    <body style="min-width: 960px; background-color: #eee">
+    <body>
         <script src="${make_url('/config?autoload=1')}" crossorigin="use-credentials"></script>
         <script src="${make_url('/static/js/i18n.js')}"></script>
         <script src="${make_url('/i18ncatalog?autoload=1')}"></script>

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/BaseFormView.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/BaseFormView.jsx
@@ -408,7 +408,7 @@ class BaseFormView extends PureComponent {
         return (
             <div
                 className="form-horizontal"
-                style={this.props.mode === MODE_CONFIG ? { marginTop: '10px' } : {}}
+                style={this.props.mode === MODE_CONFIG ? { marginTop: '40px' } : {}}
             >
                 {this.generateWarningMessage()}
                 {this.generateErrorMessage()}

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/CheckBoxComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/CheckBoxComponent.jsx
@@ -27,7 +27,7 @@ class CheckBoxComponent extends Component {
 }
 
 CheckBoxComponent.propTypes = {
-    value: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+    value: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
     handleChange: PropTypes.func.isRequired,
     field: PropTypes.string,
     disabled: PropTypes.bool,

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ConfigurationFormView.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ConfigurationFormView.jsx
@@ -3,14 +3,23 @@ import PropTypes from 'prop-types';
 
 import { _ } from '@splunk/ui-utils/i18n';
 import Button from '@splunk/react-ui/Button';
-import ControlGroup from '@splunk/react-ui/ControlGroup';
+import styled from 'styled-components';
 import WaitSpinner from '@splunk/react-ui/WaitSpinner';
 
 import BaseFormView from './BaseFormView';
 import { axiosCallWrapper } from '../util/axiosCallWrapper';
 import { MODE_CONFIG } from '../constants/modes';
 import { WaitSpinnerWrapper } from './table/CustomTableStyle';
 
+const ButtonWrapper = styled.div`
+    margin-left: 270px !important;
+    width: 150px;
+
+    .save_btn {
+        width: 100%;
+    }
+`;
+
 function ConfigurationFormView({ serviceName }) {
     const form = useRef();
     const [error, setError] = useState(null);
@@ -54,16 +63,15 @@ function ConfigurationFormView({ serviceName }) {
                 currentServiceState={currentServiceState}
                 handleFormSubmit={handleFormSubmit}
             />
-            <ControlGroup label="">
-                <div style={{ flexGrow: 0 }}>
-                    <Button
-                        appearance="primary"
-                        label={isSubmitting ? <WaitSpinner /> : _('Save')}
-                        onClick={handleSubmit}
-                        disabled={isSubmitting}
-                    />
-                </div>
-            </ControlGroup>
+            <ButtonWrapper>
+                <Button
+                    className="save_btn"
+                    appearance="primary"
+                    label={isSubmitting ? <WaitSpinner /> : _('Save')}
+                    onClick={handleSubmit}
+                    disabled={isSubmitting}
+                />
+            </ButtonWrapper>
         </>
     ) : (
         <WaitSpinnerWrapper />

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ControlWrapper.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ControlWrapper.jsx
@@ -15,10 +15,10 @@ const ControlGroupWrapper = styled(ControlGroup)`
 
     > * {
         &:first-child {
-            width: 170px !important;
+            width: 240px !important;
         }
         &:nth-child(3) {
-            margin-left: 200px !important;
+            margin-left: 270px !important;
         }
     }
 `;

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/EntityModal.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/EntityModal.jsx
@@ -50,38 +50,36 @@ class EntityModal extends Component {
 
     render() {
         return (
-            <div>
-                <ModalWrapper open={this.props.open}>
-                    <Modal.Header
-                        title={this.props.formLabel}
-                        onRequestClose={this.handleRequestClose}
+            <ModalWrapper open={this.props.open}>
+                <Modal.Header
+                    title={this.props.formLabel}
+                    onRequestClose={this.handleRequestClose}
+                />
+                <Modal.Body>
+                    <BaseFormView
+                        ref={this.form}
+                        page={this.props.page}
+                        serviceName={this.props.serviceName}
+                        mode={this.props.mode}
+                        stanzaName={this.props.stanzaName}
+                        handleFormSubmit={this.handleFormSubmit}
                     />
-                    <Modal.Body>
-                        <BaseFormView
-                            ref={this.form}
-                            page={this.props.page}
-                            serviceName={this.props.serviceName}
-                            mode={this.props.mode}
-                            stanzaName={this.props.stanzaName}
-                            handleFormSubmit={this.handleFormSubmit}
-                        />
-                    </Modal.Body>
-                    <Modal.Footer>
-                        <Button
-                            appearance="secondary"
-                            onClick={this.handleRequestClose}
-                            label={_('Cancel')}
-                            disabled={this.state.isSubmititng}
-                        />
-                        <Button
-                            appearance="primary"
-                            label={this.state.isSubmititng ? <WaitSpinner /> : this.buttonText}
-                            onClick={this.handleSubmit}
-                            disabled={this.state.isSubmititng}
-                        />
-                    </Modal.Footer>
-                </ModalWrapper>
-            </div>
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button
+                        appearance="secondary"
+                        onClick={this.handleRequestClose}
+                        label={_('Cancel')}
+                        disabled={this.state.isSubmititng}
+                    />
+                    <Button
+                        appearance="primary"
+                        label={this.state.isSubmititng ? <WaitSpinner /> : this.buttonText}
+                        onClick={this.handleSubmit}
+                        disabled={this.state.isSubmititng}
+                    />
+                </Modal.Footer>
+            </ModalWrapper>
         );
     }
 }

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ErrorModal.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ErrorModal.jsx
@@ -1,29 +1,26 @@
-import React,  { useState } from 'react';
+import React, { useState } from 'react';
 import Button from '@splunk/react-ui/Button';
 import Modal from '@splunk/react-ui/Modal';
 import Message from '@splunk/react-ui/Message';
+import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
-import {getFormattedMessage} from '../util/messageUtil';
+import { getFormattedMessage } from '../util/messageUtil';
 
-function ErrorModal(props) {
+const ModalWrapper = styled(Modal)`
+    width: 600px;
+`;
 
+function ErrorModal(props) {
     const [open, setOpen] = useState(props.open);
 
     const handleRequestClose = () => {
         setOpen(false);
     };
 
     return (
-        <Modal
-            onRequestClose={handleRequestClose}
-            open={open}
-            style={{ width: '600px' }}
-        >
-            <Modal.Header
-                onRequestClose={handleRequestClose}
-                title={getFormattedMessage(104)}
-            />
+        <ModalWrapper open={open}>
+            <Modal.Header onRequestClose={handleRequestClose} title={getFormattedMessage(104)} />
             <Modal.Body>
                 <Message appearance="fill" type="error">
                     {props.message}
@@ -32,11 +29,11 @@ function ErrorModal(props) {
             <Modal.Footer>
                 <Button appearance="primary" onClick={handleRequestClose} label="OK" />
             </Modal.Footer>
-        </Modal>
+        </ModalWrapper>
     );
 }
 ErrorModal.propTypes = {
     message: PropTypes.string,
     open: PropTypes.string,
 };
-export default ErrorModal;
+export default ErrorModal;
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/MultiInputComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/MultiInputComponent.jsx
@@ -1,11 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Multiselect from '@splunk/react-ui/Multiselect';
-import { _ } from '@splunk/ui-utils/i18n';
+import styled from 'styled-components';
 import axios from 'axios';
+import { _ } from '@splunk/ui-utils/i18n';
+
 import { axiosCallWrapper } from '../util/axiosCallWrapper';
 import { filterResponse } from '../util/util';
 
+const MultiSelectWrapper = styled(Multiselect)`
+    width: 300px !important;
+`;
+
 function MultiInputComponent(props) {
     const {
         field,
@@ -95,7 +101,7 @@ function MultiInputComponent(props) {
     const valueList = value ? value.split(delimiter) : [];
 
     return (
-        <Multiselect
+        <MultiSelectWrapper
             values={valueList}
             error={error}
             name={field}
@@ -104,10 +110,9 @@ function MultiInputComponent(props) {
             allowNewValues={createSearchChoice}
             onChange={handleChange}
             inline
-            style={{ width: '100%' }}
         >
             {options && options.length > 0 && options}
-        </Multiselect>
+        </MultiSelectWrapper>
     );
 }
 

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/RadioComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/RadioComponent.jsx
@@ -1,26 +1,29 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import RadioBar from '@splunk/react-ui/RadioBar';
+import styled from 'styled-components';
 
-class RadioComponent extends Component {
+const RadioBarWrapper = styled(RadioBar)`
+    width: 300px;
+`;
 
+class RadioComponent extends Component {
     handleChange = (e, { value }) => {
         this.props.handleChange(this.props.field, value);
     };
 
     render() {
         return (
-            <RadioBar
+            <RadioBarWrapper
                 inline
                 onChange={this.handleChange}
                 value={this.props.value}
                 key={this.props.field}
-                style={{ width: `50% !important` }}
             >
-                {this.props.controlOptions.items.map(item => (
+                {this.props.controlOptions.items.map((item) => (
                     <RadioBar.Option key={item.value} value={item.value} label={item.label} />
                 ))}
-            </RadioBar>
+            </RadioBarWrapper>
         );
     }
 }
@@ -29,8 +32,7 @@ RadioComponent.propTypes = {
     value: PropTypes.string,
     handleChange: PropTypes.func.isRequired,
     field: PropTypes.string,
-    controlOptions: PropTypes.object
+    controlOptions: PropTypes.object,
 };
 
-
-export default RadioComponent;
+export default RadioComponent;
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/SingleInputComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/SingleInputComponent.jsx
@@ -3,9 +3,15 @@ import PropTypes from 'prop-types';
 import Select from '@splunk/react-ui/Select';
 import { _ } from '@splunk/ui-utils/i18n';
 import axios from 'axios';
+import styled from 'styled-components';
+
 import { axiosCallWrapper } from '../util/axiosCallWrapper';
 import { filterResponse } from '../util/util';
 
+const SelectWrapper = styled(Select)`
+    width: 300px !important;
+`;
+
 function SingleInputComponent(props) {
     const {
         field,
@@ -105,18 +111,17 @@ function SingleInputComponent(props) {
     const effectivePlaceholder = loading ? _('Loading') : placeholder;
 
     return (
-        <Select
+        <SelectWrapper
             value={value}
             name={field}
             error={error}
             placeholder={effectivePlaceholder}
             disabled={effectiveDisabled}
             onChange={handleChange}
             inline
-            style={{ width: '50%' }}
         >
             {options && options.length > 0 && options}
-        </Select>
+        </SelectWrapper>
     );
 }
 

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx
@@ -1,6 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Text from '@splunk/react-ui/Text';
+import styled from 'styled-components';
+
+const TextWrapper = styled(Text)`
+    width: 300px !important;
+`;
 
 class TextComponent extends Component {
     handleChange = (e, { value }) => {
@@ -9,7 +14,7 @@ class TextComponent extends Component {
 
     render() {
         return (
-            <Text
+            <TextWrapper
                 inline
                 error={this.props.error}
                 placeholder={this.props?.controlOptions?.placeholder}
@@ -18,7 +23,6 @@ class TextComponent extends Component {
                 value={this.props.value}
                 onChange={this.handleChange}
                 type={this.props.encrypted ? 'password' : 'text'}
-                style={{ width: '100%' }}
             />
         );
     }