Skip to content

Commit

Permalink
fix: update react-ui version, add class to title and subtitle compone…
Browse files Browse the repository at this point in the history 
…nts and update error message
  • Loading branch information
@harshpatel-crest
harshpatel-crest committed May 7, 2021
1 parent 78c4c10 commit b79a6f5
Show file tree
Hide file tree
Showing 7 changed files with 101 additions and 61 deletions.
4 changes: 2 additions & 2 deletions ui/package.json
View file
Expand Up @@ -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",
Expand Down
34 changes: 1 addition & 33 deletions ui/src/main/webapp/components/ComboBoxWrapper.jsx
View file
Expand Up @@ -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;
Expand All @@ -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 (
Expand Down
2 changes: 1 addition & 1 deletion ui/src/main/webapp/components/ConfigurationFormView.jsx
View file
Expand Up @@ -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) => {
Expand Down
12 changes: 6 additions & 6 deletions ui/src/main/webapp/components/table/TableWrapper.jsx
View file
Expand Up @@ -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);

Expand Down Expand Up @@ -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;
Expand Down
10 changes: 6 additions & 4 deletions ui/src/main/webapp/constants/errorCodes.js
View file
@@ -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!',
};
20 changes: 14 additions & 6 deletions ui/src/main/webapp/pages/Input/InputPageStyle.jsx
View file
@@ -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`
Expand Down
80 changes: 71 additions & 9 deletions ui/yarn.lock
View file
Expand Up @@ -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"
Expand All @@ -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==
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down

0 comments on commit b79a6f5

Please sign in to comment.