fix: update react-ui version, add class to title and subtitle compone…

…nts and update error message
splunk · May 7, 2021 · b79a6f5 · b79a6f5
1 parent 78c4c10
commit b79a6f5
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 61 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -19,8 +19,8 @@
   },
   "dependencies": {
     "@splunk/react-page": "^5.0.0",
-    "@splunk/react-toast-notifications": "^0.9.0",
-    "@splunk/react-ui": "4.0.0",
+    "@splunk/react-toast-notifications": "^0.10.0",
+    "@splunk/react-ui": "4.1.0",
     "@splunk/splunk-utils": "^2.0.0",
     "@splunk/themes": "^0.7.0",
     "axios": "^0.21.1",

diff --git a/ui/src/main/webapp/components/ComboBoxWrapper.jsx b/ui/src/main/webapp/components/ComboBoxWrapper.jsx
@@ -10,31 +10,7 @@ const StyledDiv = styled.div`
 `;
 
 function ComboBoxWrapper(props) {
-    const {
-        value,
-        name,
-        error,
-        placeholder,
-        disabled,
-        labelValueMapping,
-        // isGroup,
-        ...restProps
-    } = props;
-
-    // function getHeadingElement(elem) {
-    //     // Get the next sibling element
-    //     let sibling = elem.previousElementSibling;
-
-    //     // If the sibling matches our selector, use it
-    //     // If not, jump to the next sibling and continue the loop
-    //     while (sibling) {
-    //         if (!sibling.matches('[data-test="option"]')) {
-    //             return sibling.querySelector('[data-test="heading"]');
-    //         }
-    //         sibling = sibling.previousElementSibling;
-    //     }
-    //     return null;
-    // }
+    const { value, name, error, placeholder, disabled, labelValueMapping, ...restProps } = props;
 
     function handleChange(e, obj) {
         let effectiveValue = obj.value;
@@ -49,15 +25,7 @@ function ComboBoxWrapper(props) {
                 effectiveValue = entry[1] instanceof Map ? entry[1].get(obj.value) : entry[1];
             }
         }
-        // else if (isGroup) {
-        //     const target = e.target.closest('button[data-test="option"]');
-        //     const groupName = getHeadingElement(target).innerText.toUpperCase();
-        //     effectiveValue = labelValueMapping.get(groupName).get(obj.value);
-        // } else {
-        //     effectiveValue = labelValueMapping.get(obj.value);
-        // }
         restProps.handleChange(e, { ...obj, value: effectiveValue });
-        // restProps.handleChange(e, obj);
     }
 
     return (

diff --git a/ui/src/main/webapp/components/ConfigurationFormView.jsx b/ui/src/main/webapp/components/ConfigurationFormView.jsx
@@ -33,7 +33,7 @@ function ConfigurationFormView({ serviceName }) {
             handleError: true,
             callbackOnError: (err) => {
                 // eslint-disable-next-line no-param-reassign
-                err.uccErrorCode = 'ERR0004';
+                err.uccErrorCode = 'ERR0005';
                 setError(err);
             },
         }).then((response) => {

diff --git a/ui/src/main/webapp/components/table/TableWrapper.jsx b/ui/src/main/webapp/components/table/TableWrapper.jsx
@@ -30,7 +30,7 @@ function TableWrapper({ page, serviceName, handleRequestModalOpen, handleOpenPag
     const headers = tableConfig.header;
     const { moreInfo } = tableConfig;
     const services =
-        page === 'inputs'
+        page === PAGE_INPUT
             ? unifiedConfigs.pages.inputs.services
             : unifiedConfigs.pages.configuration.tabs.filter((x) => x.name === serviceName);
 
@@ -72,15 +72,15 @@ function TableWrapper({ page, serviceName, handleRequestModalOpen, handleOpenPag
                 if (error.response) {
                     // The request was made and the server responded with a status code
                     message = `Error received from server: ${error.response.data.messages[0].text}`;
-                    errorCode = 'ERR0001';
+                    errorCode = page === PAGE_INPUT ? 'ERR0001' : 'ERR0002';
                 } else if (error.request) {
                     // The request was made but no response was received
-                    message = `No response received while making request to input services`;
-                    errorCode = 'ERR0002';
+                    message = `No response received while making request to ${page} services`;
+                    errorCode = 'ERR0003';
                 } else {
                     // Something happened in setting up the request that triggered an Error
-                    message = `Error making request to input services`;
-                    errorCode = 'ERR0003';
+                    message = `Error making request to ${page} services`;
+                    errorCode = 'ERR0004';
                 }
                 // eslint-disable-next-line no-param-reassign
                 error.uccErrorCode = errorCode;

diff --git a/ui/src/main/webapp/constants/errorCodes.js b/ui/src/main/webapp/constants/errorCodes.js
@@ -1,7 +1,9 @@
 export default {
     ERR0001:
-        'Failed to load inputs due to error status code! This error can be ignored if you are seeing this error on SplunkCloud search-head.',
-    ERR0002: 'Failed to load inputs due to no response from server!',
-    ERR0003: 'Failed to load inputs due to failed request processing!',
-    ERR0004: 'Failed to load current state for selected entity in form!',
+        'Inputs page failed to load, the server reported internal errors which may indicate you do not have access to this page. This is normal on Splunk Search Heads.',
+    ERR0002:
+        'Configuration page failed to load, the server reported internal errors which may indicate you do not have access to this page.',
+    ERR0003: 'Failed to load content due to no response from server!',
+    ERR0004: 'Failed to load content due to failed request processing!',
+    ERR0005: 'Failed to load current state for selected entity in form!',
 };
diff --git a/ui/src/main/webapp/pages/Input/InputPageStyle.jsx b/ui/src/main/webapp/pages/Input/InputPageStyle.jsx
@@ -1,14 +1,22 @@
 import styled from 'styled-components';
 import { variables } from '@splunk/themes';
 
-export const TitleComponent = styled.div`
-    font-size: ${variables.fontSizeXXLarge};
-    margin-bottom: 20px;
+export const TitleComponent = styled.div.attrs({
+    className: "page-title"
+})`
+    &.page-title {
+        font-size: ${variables.fontSizeXXLarge};
+        margin-bottom: 20px;
+    }
 `;
 
-export const SubTitleComponent = styled.div`
-    font-size: ${variables.fontSize};
-    margin-bottom: 10px;
+export const SubTitleComponent = styled.div.attrs({
+    className: "page-subtitle"
+})`
+    &.page-subtitle {
+        font-size: ${variables.fontSize};
+        margin-bottom: 10px;
+    }
 `;
 
 export const TableCaptionComponent = styled.div`

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -1395,6 +1395,19 @@
     lodash "^4.17.14"
     prop-types "^15.6.2"
 
+"@splunk/react-icons@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/@splunk/react-icons/-/react-icons-3.1.0.tgz#041ac5a69e779ff8daac328f1bb255449854e7f8"
+  integrity sha512-TZz/q4OOgb25fcI2FIv9V4GVmkmyzP2F1BBmuseAXhrAl4ouubBWMGJT0b5L3+Y97LQNTmwVwvcDAjD2H8Nz+g==
+  dependencies:
+    "@splunk/ui-utils" "^1.3.0"
+    "@types/lodash" "^4.14.156"
+    "@types/react" "^16.9.38"
+    "@types/react-dom" "^16.9.8"
+    "@types/styled-components" "^5.1.0"
+    lodash "^4.17.14"
+    prop-types "^15.6.2"
+
 "@splunk/react-page@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@splunk/react-page/-/react-page-5.0.0.tgz"
@@ -1407,20 +1420,48 @@
     prop-types "^15.6.2"
     scriptjs "^2.5.8"
 
-"@splunk/react-toast-notifications@^0.9.0":
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/@splunk/react-toast-notifications/-/react-toast-notifications-0.9.0.tgz"
-  integrity sha512-r+7Zl+zjo+X1G9kPj0wyq8CLyw8FKUv4Rdlpzx+qVC8jwUELZFCnDJNs/lhtE7ColRsc8/jxlKx3J1f9I4mX8Q==
+"@splunk/react-toast-notifications@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.npmjs.org/@splunk/react-toast-notifications/-/react-toast-notifications-0.10.0.tgz#85e4954a4d7065b6237cab29573ccffab357898b"
+  integrity sha512-XlUw2+SBTT59M4RX+giN62tftnr5CjX9NaBSPmDrznpudmnHZLRQWlhJ+q+CgQx08/O/CS2tW+0O0PzatmRZsg==
   dependencies:
-    "@splunk/react-icons" "^3.0.1"
-    "@splunk/react-ui" "^4.0.0"
-    "@splunk/themes" "^0.7.0"
-    "@splunk/ui-utils" "^1.2.1"
+    "@splunk/react-icons" "^3.1.0"
+    "@splunk/react-ui" "^4.1.0"
+    "@splunk/themes" "^0.8.0"
+    "@splunk/ui-utils" "^1.3.0"
     lodash "^4.17.14"
     prop-types "^15.6.2"
     react-flip-move "^3.0.1"
 
-"@splunk/react-ui@4.0.0", "@splunk/react-ui@^4.0.0":
+"@splunk/react-ui@4.1.0", "@splunk/react-ui@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/@splunk/react-ui/-/react-ui-4.1.0.tgz#6fadad0b688ff4669aea41d53421e84d05595f4b"
+  integrity sha512-IIaBJvq+ZnYu9Bx6PVT0hgoFqxOzLkZYthpkQ/cppwK/5LJ085WIabfQIoDSUSGbioy9p0IbrELYoPTeOCDXEA==
+  dependencies:
+    "@splunk/react-icons" "^3.1.0"
+    "@splunk/themes" "^0.8.0"
+    "@splunk/ui-utils" "^1.3.0"
+    "@types/commonmark" "^0.27.0"
+    "@types/lodash" "^4.14.156"
+    "@types/react" "^16.9.38"
+    "@types/react-dom" "^16.9.8"
+    "@types/react-event-listener" "^0.4.10"
+    "@types/react-resize-detector" "^3.1.1"
+    "@types/styled-components" "^5.1.0"
+    "@types/tinycolor2" "^1.4.2"
+    commonmark "^0.27.0"
+    commonmark-react-renderer "^4.3.2"
+    decimal.js-light "^2.2.3"
+    lodash "^4.17.14"
+    moment "^2.22.2"
+    prop-types "^15.6.2"
+    react-event-listener "^0.6.2"
+    react-resize-detector "^3.2.1"
+    react-sortable-hoc "^1.11.0"
+    react-spring "^8.0.27"
+    tinycolor2 "^1.4.1"
+
+"@splunk/react-ui@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@splunk/react-ui/-/react-ui-4.0.0.tgz"
   integrity sha512-E3zwmLa49v5BIBoeoK6Q1A0GLkKr6UCWgyAwrKxyrF9afnHEwrYS84JRyKbvUWc46JvzApviLl7e5DvuMzum/A==
@@ -1478,6 +1519,19 @@
     lodash "^4.17.14"
     tinycolor2 "^1.4.1"
 
+"@splunk/themes@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.npmjs.org/@splunk/themes/-/themes-0.8.0.tgz#2a037f5163c699f314e5822375c73f5fa1e63edd"
+  integrity sha512-XZ6vag5ZchHj/zglSBwMU9eadrpqWJK5Xyxa379RELfbtGmLoNqWajk4Rv0yHClpV6PSELonTYzOU6KO0GImBw==
+  dependencies:
+    "@types/lodash" "^4.14.156"
+    "@types/react" "^16.9.38"
+    "@types/styled-components" "^5.1.0"
+    "@types/tinycolor2" "^1.4.2"
+    color-blend "^2.0.9"
+    lodash "^4.17.14"
+    tinycolor2 "^1.4.1"
+
 "@splunk/ui-utils@^1.2.0", "@splunk/ui-utils@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@splunk/ui-utils/-/ui-utils-1.2.1.tgz"
@@ -1486,6 +1540,14 @@
     keycode "^2.1.9"
     lodash "^4.17.14"
 
+"@splunk/ui-utils@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/@splunk/ui-utils/-/ui-utils-1.3.0.tgz#f08677bdf0b55247d7d66c226f59aa9b7007ab6a"
+  integrity sha512-YXAB49PrYlOUTNBdOT8Qr+TTJp23kd357H5kAwjmKp5LEeStyknbXcTuGMNwb+l/OVvuTZTmFlDvra6UM7cOvQ==
+  dependencies:
+    keycode "^2.1.9"
+    lodash "^4.17.14"
+
 "@splunk/webpack-configs@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@splunk/webpack-configs/-/webpack-configs-5.0.0.tgz"