@rh-support/troubleshoot 0.3.2 → 0.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/lib/esm/components/AccountInfo/ManagedAccountsDropdown.d.ts.map +1 -1
  2. package/lib/esm/components/AccountInfo/ManagedAccountsDropdown.js +3 -4
  3. package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseHostname.d.ts.map +1 -1
  4. package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseHostname.js +7 -2
  5. package/lib/esm/components/CaseInformation/Description.d.ts.map +1 -1
  6. package/lib/esm/components/CaseInformation/Description.js +14 -9
  7. package/lib/esm/components/CaseInformation/Fts.js +1 -1
  8. package/lib/esm/components/ImproveCase/KtQuestions.d.ts.map +1 -1
  9. package/lib/esm/components/ImproveCase/KtQuestions.js +33 -21
  10. package/lib/esm/components/Issue/Issue.d.ts.map +1 -1
  11. package/lib/esm/components/Issue/Issue.js +6 -5
  12. package/lib/esm/components/Recommendations/InsightsRuleInfo.d.ts +7 -0
  13. package/lib/esm/components/Recommendations/InsightsRuleInfo.d.ts.map +1 -1
  14. package/lib/esm/components/Recommendations/InsightsRuleInfo.js +3 -2
  15. package/lib/esm/scss/_pf4-overrides.scss +8 -1
  16. package/package.json +6 -5
package/lib/esm/components/AccountInfo/ManagedAccountsDropdown.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ManagedAccountsDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountInfo/ManagedAccountsDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAGhF,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAM7G,UAAU,MAAO,SAAQ,gBAAgB;IACrC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,eAAe,EAAE,mBAAmB,CAAC,OAAO,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC;IACxE,sBAAsB,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,iBAAiB,CAAC,sBAAsB,CAAC,CAAC,KAAK,IAAI,CAAC;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAOD,iBAAS,uBAAuB,CAAC,KAAK,EAAE,MAAM,eA4D7C;kBA5DQ,uBAAuB;;;AA8DhC,OAAO,EAAE,uBAAuB,EAAE,CAAC"}
1
+ {"version":3,"file":"ManagedAccountsDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountInfo/ManagedAccountsDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAGhF,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAM7G,UAAU,MAAO,SAAQ,gBAAgB;IACrC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,eAAe,EAAE,mBAAmB,CAAC,OAAO,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC;IACxE,sBAAsB,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,iBAAiB,CAAC,sBAAsB,CAAC,CAAC,KAAK,IAAI,CAAC;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAOD,iBAAS,uBAAuB,CAAC,KAAK,EAAE,MAAM,eA6D7C;kBA7DQ,uBAAuB;;;AA+DhC,OAAO,EAAE,uBAAuB,EAAE,CAAC"}
package/lib/esm/components/AccountInfo/ManagedAccountsDropdown.js CHANGED
@@ -25,9 +25,8 @@ function ManagedAccountsDropdown(props) {
25
25
  setSelectedItem(toOption(item, { labelKey: getLabelForAccountOption }));
26
26
  }, [props.managedAccounts.data, props.selectedAccountNumber]);
27
27
  // Only accounts that have granted access permission to partner should be listed
28
- const managedAccountsOptions = props.managedAccounts.data
29
- .filter((account) => account.partnerCaseAccess === 'All')
30
- .map((account) => (Object.assign({ actionItem: (React.createElement(React.Fragment, null, account.subscriptionAbuse && (React.createElement("span", { className: "form-instructions form-invalid pf-u-text-nowrap pf-u-pr-sm" },
28
+ const managedAccountsWithPermission = () => props.managedAccounts.data.filter((account) => account.partnerCaseAccess === 'All') || [];
29
+ const managedAccountsOptions = managedAccountsWithPermission().map((account) => (Object.assign({ actionItem: (React.createElement(React.Fragment, null, account.subscriptionAbuse && (React.createElement("span", { className: "form-instructions form-invalid pf-u-text-nowrap pf-u-pr-sm" },
31
30
  ' ',
32
31
  React.createElement(InfoCircleIcon, null),
33
32
  " ",
@@ -35,7 +34,7 @@ function ManagedAccountsDropdown(props) {
35
34
  return (React.createElement(Dropdown, { className: `push-top ${props.className}`, id: props.id, placeholder: "Select a managed account", list: toOptions(managedAccountsOptions, {
36
35
  childrenKey: 'children',
37
36
  actionItemKey: 'actionItem',
38
- }), selectedItem: selectedItem, title: `Select a managed account`, onChange: props.onManagedAccountChange, disabled: props.disabled }));
37
+ }), selectedItem: selectedItem, title: `Select a managed account`, onChange: props.onManagedAccountChange, disabled: props.disabled || managedAccountsWithPermission.length === 0 }));
39
38
  }
40
39
  ManagedAccountsDropdown.defaultProps = defaultProps;
41
40
  export { ManagedAccountsDropdown };
package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseHostname.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CaseHostname.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseHostname.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAY5D,UAAU,MAAO,SAAQ,gBAAgB;IACrC,cAAc,EAAE,OAAO,CAAC;CAC3B;AAMD,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM,eAgKlC;kBAhKQ,YAAY;;;AAmKrB,OAAO,EAAE,YAAY,EAAE,CAAC"}
1
+ {"version":3,"file":"CaseHostname.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseHostname.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAY5D,UAAU,MAAO,SAAQ,gBAAgB;IACrC,cAAc,EAAE,OAAO,CAAC;CAC3B;AAMD,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM,eAuKlC;kBAvKQ,YAAY;;;AA0KrB,OAAO,EAAE,YAAY,EAAE,CAAC"}
package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseHostname.js CHANGED
@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
8
8
  });
9
9
  };
10
10
  import { accounts } from '@cee-eng/hydrajs';
11
- import { Popover, PopoverPosition, Switch } from '@patternfly/react-core';
11
+ import { Popover, PopoverPosition, Spinner, Switch } from '@patternfly/react-core';
12
12
  import { InlineEdit, LoadingIndicator, ToastNotification, useFetch, ValueChangedIcon } from '@rh-support/components';
13
13
  import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
14
14
  import { ability, CaseListFields, resourceActions, resources } from '@rh-support/user-permissions';
@@ -35,11 +35,13 @@ function CaseHostname(props) {
35
35
  const [isHostnameUpdating, setIsHostnameUpdating] = useState(false);
36
36
  const canUseHostName = ability.can(resourceActions.PATCH, resources.CASE_CREATE, CaseListFields.HOSTNAME);
37
37
  const [isShareHostNamesChecked, setIsShareHostNamesChecked] = useState(false);
38
+ const [isHostnamesLoading, setIsHostnamesLoading] = useState(true);
38
39
  const { globalMetadataState: { loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
39
40
  const { request: fetchHostnameDefault } = useFetch(accounts.getIsSharingHostname);
40
41
  const userOriginalHostnameValue = () => __awaiter(this, void 0, void 0, function* () {
41
42
  const fetchedHostnameStatus = yield fetchHostnameDefault(accountNumber);
42
43
  setIsShareHostNamesChecked(fetchedHostnameStatus.shareHostnameWithRHT);
44
+ setIsHostnamesLoading(false);
43
45
  });
44
46
  // value changed logic to show a none local status change
45
47
  const [localHostnameChange, setLocalHostnameChange] = useState(false);
@@ -83,17 +85,20 @@ function CaseHostname(props) {
83
85
  const { request: updateShareHostnames } = useFetch(accounts.updateIsSharingHostname);
84
86
  const onShareHostnameCheck = () => __awaiter(this, void 0, void 0, function* () {
85
87
  try {
88
+ setIsHostnamesLoading(true);
86
89
  yield updateShareHostnames(!isShareHostNamesChecked, accountNumber);
87
90
  setIsShareHostNamesChecked(!isShareHostNamesChecked);
88
91
  }
89
92
  catch (error) {
90
93
  console.log(error);
91
94
  }
95
+ setIsHostnamesLoading(false);
92
96
  });
93
97
  const shareHostnameLabel = 'Share hostnames';
94
98
  const hostNameVisibilityContent = (React.createElement("div", null,
95
99
  React.createElement("p", null, "You can share this information at any time to improve your support experience."),
96
- React.createElement(Switch, { label: shareHostnameLabel, isChecked: isShareHostNamesChecked, onChange: onShareHostnameCheck })));
100
+ React.createElement(Switch, { label: shareHostnameLabel, isChecked: isShareHostNamesChecked, onChange: onShareHostnameCheck }),
101
+ isHostnamesLoading && (React.createElement(Spinner, { isSVG: true, size: "lg", className: "pf-u-ml-sm hostnameSpinner", "aria-label": "Hostname loading" }))));
97
102
  if (!canUseHostName) {
98
103
  return React.createElement(React.Fragment, null);
99
104
  }
package/lib/esm/components/CaseInformation/Description.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Description.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/Description.tsx"],"names":[],"mappings":"AAaA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,MAAM,eA2FhD"}
1
+ {"version":3,"file":"Description.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/Description.tsx"],"names":[],"mappings":"AAcA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,MAAM,eA4FhD"}
package/lib/esm/components/CaseInformation/Description.js CHANGED
@@ -1,4 +1,5 @@
1
- import { InlineEdit, TextAreaAutosize } from '@rh-support/components';
1
+ import { TextArea } from '@patternfly/react-core';
2
+ import { InlineEdit } from '@rh-support/components';
2
3
  import isEmpty from 'lodash/isEmpty';
3
4
  import isEqual from 'lodash/isEqual';
4
5
  import React, { useContext, useState } from 'react';
@@ -10,7 +11,7 @@ import { getUpdatedDescription } from '../../reducers/CaseHelpers';
10
11
  import { setCaseDetails } from '../../reducers/CaseReducer';
11
12
  export default function Description(props) {
12
13
  const { t } = useTranslation();
13
- const { description, hasLargeCaseDescription, issue, environment, periodicityOfIssue, timeFramesAndUrgency, v3ClusterName, } = useCaseSelector((state) => ({
14
+ const { hasLargeCaseDescription, issue, environment, periodicityOfIssue, timeFramesAndUrgency, v3ClusterName } = useCaseSelector((state) => ({
14
15
  description: state.caseDetails.description,
15
16
  issue: state.caseDetails.issue,
16
17
  environment: state.caseDetails.environment,
@@ -20,27 +21,31 @@ export default function Description(props) {
20
21
  v3ClusterName: state.v3ClusterName,
21
22
  }), isEqual);
22
23
  const caseDispatch = useCaseDispatch();
23
- const { routeState: { showValidationErrorAlert }, } = useContext(RouteContext);
24
+ const [hasFocusedLostKT4, setHasFocusedLostKT4] = useState(false);
24
25
  const [isIssueTextAreaFocused, setIssueTextAreaFocused] = useState(false);
25
26
  const onKTQ1IssueFocusChange = (e) => {
26
27
  setIssueTextAreaFocused(e.type === 'focus');
28
+ e.type === 'blur' && setHasFocusedLostKT4(true);
27
29
  };
28
30
  const onCaseDetailsChange = (caseDetails) => {
29
31
  setCaseDetails(caseDispatch, caseDetails);
30
32
  };
31
- const onKTQ1IssueChange = (e) => {
32
- var _a;
33
- const ktQ1Local = isEmpty((_a = e.target.value) === null || _a === void 0 ? void 0 : _a.trim()) ? '' : e.target.value;
33
+ const onKTQ1IssueChange = (value, e) => {
34
+ const ktQ1Local = isEmpty(value === null || value === void 0 ? void 0 : value.trim()) ? '' : value;
34
35
  const newDescription = getUpdatedDescription(ktQ1Local, environment, periodicityOfIssue, timeFramesAndUrgency, v3ClusterName);
35
36
  onCaseDetailsChange({ issue: ktQ1Local, description: newDescription });
36
37
  };
37
- const isKT1Required = isEmpty(environment) && isEmpty(periodicityOfIssue) && isEmpty(timeFramesAndUrgency);
38
+ const isKT1Required = true;
39
+ const { routeState: { showValidationErrorAlert }, } = useContext(RouteContext);
38
40
  const descriptionErrorMessage = t(LargeDescriptionErrorMessage, { limit: DESCRIPTION_LENGTH_LIMIT });
39
- const isDescriptionInvalid = (isEmpty(description) || hasLargeCaseDescription) && showValidationErrorAlert;
41
+ const isDescriptionInvalid = (issue) => {
42
+ return (hasFocusedLostKT4 && isEmpty(issue)) || showValidationErrorAlert;
43
+ };
40
44
  return (React.createElement(InlineEdit, { labelContent: React.createElement(React.Fragment, null,
41
45
  React.createElement(Trans, null, "What are you experiencing? What are you expecting to happen?"),
42
46
  ' ',
43
47
  isKT1Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), labelProps: { htmlFor: 'open-case-ktQ1-issue' }, content: issue, allowInlineEdit: !!props.inlineEditable, hideSaveCancel: !!props.hideSaveCancel, initialIsEditing: isEmpty(issue), usePreformattedTag: true, saveOnBlur: true },
44
- React.createElement(TextAreaAutosize, { id: "open-case-ktQ1-issue", name: "open-case-ktQ1-issue", className: `form-control${isDescriptionInvalid ? ' form-invalid' : ''}`, "aria-invalid": isDescriptionInvalid, "aria-required": isKT1Required, required: isKT1Required, value: issue, disabled: isEmpty(issue) && hasLargeCaseDescription && !setIssueTextAreaFocused, onChange: onKTQ1IssueChange, onFocus: onKTQ1IssueFocusChange, onBlur: onKTQ1IssueFocusChange, "data-tracking-id": "open-case-ktQ1-issue" }),
48
+ React.createElement(TextArea, { id: "open-case-ktQ1-issue", name: "open-case-ktQ1-issue", className: `form-control${isDescriptionInvalid(issue) ? ' form-invalid' : ''}`, "aria-invalid": (issue === null || issue === void 0 ? void 0 : issue.length) > 20000 ? 'true' : 'false', "aria-required": isKT1Required, isRequired: isKT1Required, value: issue, isDisabled: isEmpty(issue) && hasLargeCaseDescription && !setIssueTextAreaFocused, onChange: onKTQ1IssueChange, onFocus: onKTQ1IssueFocusChange, onBlur: onKTQ1IssueFocusChange, "data-tracking-id": "open-case-ktQ1-issue" }),
49
+ React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-20k-warning-ktQ1-environment" }, `${(issue === null || issue === void 0 ? void 0 : issue.length) > 20000 ? 'Description cannot be more than 20000 characters' : ''}`),
45
50
  React.createElement("p", { className: "form-instructions" }, `${hasLargeCaseDescription && isIssueTextAreaFocused ? descriptionErrorMessage : ''}`)));
46
51
  }
package/lib/esm/components/CaseInformation/Fts.js CHANGED
@@ -81,7 +81,7 @@ function Fts(props) {
81
81
  if (canEditCase.alert())
82
82
  return;
83
83
  setFtsContact(e.target.value);
84
- if (props.inlineEditable)
84
+ if (props.inlineEditable && !isEmpty(caseNumber))
85
85
  return;
86
86
  setContactInfoIntoGlobalState(e.target.value);
87
87
  };
package/lib/esm/components/ImproveCase/KtQuestions.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"KtQuestions.d.ts","sourceRoot":"","sources":["../../../../src/components/ImproveCase/KtQuestions.tsx"],"names":[],"mappings":"AAiBA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAGD,iBAAS,WAAW,CAAC,KAAK,EAAE,MAAM,eA+NjC;kBA/NQ,WAAW;;;AAiOpB,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"KtQuestions.d.ts","sourceRoot":"","sources":["../../../../src/components/ImproveCase/KtQuestions.tsx"],"names":[],"mappings":"AAkBA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAGD,iBAAS,WAAW,CAAC,KAAK,EAAE,MAAM,eAwPjC;kBAxPQ,WAAW;;;AA0PpB,eAAe,WAAW,CAAC"}
package/lib/esm/components/ImproveCase/KtQuestions.js CHANGED
@@ -1,4 +1,5 @@
1
- import { InlineEdit, TextAreaAutosize } from '@rh-support/components';
1
+ import { TextArea } from '@patternfly/react-core';
2
+ import { InlineEdit } from '@rh-support/components';
2
3
  import isEmpty from 'lodash/isEmpty';
3
4
  import isEqual from 'lodash/isEqual';
4
5
  import React, { useContext, useEffect, useState } from 'react';
@@ -24,19 +25,19 @@ function KtQuestions(props) {
24
25
  const { routeState: { showValidationErrorAlert }, } = useContext(RouteContext);
25
26
  const [isKTQ2TextAreaActive, setKTQ2TextAreaActive] = useState(false);
26
27
  const [hasFocusedLostKT2, setHasFocusedLostKT2] = useState(false);
27
- const [isKTQ2InValid, setKTQ2InValid] = useState(false);
28
+ // const [isKTQ2InValid, setKTQ2InValid] = useState(false);
28
29
  const onKTQ2FocusChange = (e) => {
29
30
  setKTQ2TextAreaActive(e.type === 'focus');
30
31
  e.type === 'blur' && setHasFocusedLostKT2(true);
31
- e.type !== 'focus' && setKTQ2InValid(isEmpty(description));
32
+ // e.type !== 'focus' && setKTQ2InValid(isEmpty(description));
32
33
  };
33
34
  const [isKTQ3TextAreaActive, setKTQ3TextAreaActive] = useState(false);
34
- const [isKTQ3InValid, setKTQ3InValid] = useState(false);
35
+ // const [isKTQ3InValid, setKTQ3InValid] = useState(false);
35
36
  const [hasFocusedLostKT3, setHasFocusedLostKT3] = useState(false);
36
37
  const onKTQ3FocusChange = (e) => {
37
38
  setKTQ3TextAreaActive(e.type === 'focus');
38
39
  e.type === 'blur' && setHasFocusedLostKT3(true);
39
- e.type !== 'focus' && setKTQ3InValid(isEmpty(description));
40
+ // e.type !== 'focus' && setKTQ3InValid(isEmpty(description));
40
41
  };
41
42
  const [isKTQ4TextAreaActive, setKTQ4TextAreaActive] = useState(false);
42
43
  const [isKTQ4InValid, setKTQ4InValid] = useState(false);
@@ -47,24 +48,22 @@ function KtQuestions(props) {
47
48
  e.type === 'blur' && setHasFocusedLostKT4(true);
48
49
  };
49
50
  useEffect(() => {
50
- hasFocusedLostKT2 && setKTQ2InValid(isEmpty(description) && isEmpty(timeFramesAndUrgency));
51
- hasFocusedLostKT3 && setKTQ3InValid(isEmpty(description) && isEmpty(timeFramesAndUrgency));
51
+ // hasFocusedLostKT2 && setKTQ2InValid(isEmpty(description) && isEmpty(timeFramesAndUrgency));
52
+ // hasFocusedLostKT3 && setKTQ3InValid(isEmpty(description) && isEmpty(timeFramesAndUrgency));
52
53
  hasFocusedLostKT4 && setKTQ4InValid(isEmpty(description) && isEmpty(timeFramesAndUrgency));
53
54
  }, [description, timeFramesAndUrgency, hasFocusedLostKT2, hasFocusedLostKT3, hasFocusedLostKT4]);
54
55
  const onCaseDetailsChange = (caseDetails) => {
55
56
  setCaseDetails(caseDispatch, caseDetails);
56
57
  };
57
58
  // Troubleshoot Page Question 3
58
- const onKtQ2Change = (e) => {
59
- var _a;
60
- const ktQ2Local = isEmpty((_a = e.target.value) === null || _a === void 0 ? void 0 : _a.trim()) ? '' : e.target.value;
59
+ const onKtQ2Change = (value, e) => {
60
+ const ktQ2Local = isEmpty(value === null || value === void 0 ? void 0 : value.trim()) ? '' : value;
61
61
  const newDescription = getUpdatedDescription(issue, ktQ2Local, periodicityOfIssue, timeFramesAndUrgency, v3ClusterName);
62
62
  onCaseDetailsChange({ environment: ktQ2Local, description: newDescription });
63
63
  };
64
64
  // Troubleshoot Page Question 4
65
- const onKtQ3Change = (e) => {
66
- var _a;
67
- const ktQ3Local = isEmpty((_a = e.target.value) === null || _a === void 0 ? void 0 : _a.trim()) ? '' : e.target.value;
65
+ const onKtQ3Change = (value, e) => {
66
+ const ktQ3Local = isEmpty(value === null || value === void 0 ? void 0 : value.trim()) ? '' : value;
68
67
  const newDescription = getUpdatedDescription(issue, environment, ktQ3Local, timeFramesAndUrgency, v3ClusterName);
69
68
  onCaseDetailsChange({
70
69
  periodicityOfIssue: ktQ3Local,
@@ -72,35 +71,48 @@ function KtQuestions(props) {
72
71
  });
73
72
  };
74
73
  // Troubleshoot Page Question 2
75
- const onKtQ4Change = (e) => {
76
- var _a;
77
- const ktQ4Local = isEmpty((_a = e.target.value) === null || _a === void 0 ? void 0 : _a.trim()) ? '' : e.target.value;
74
+ const onKtQ4Change = (value, e) => {
75
+ const ktQ4Local = isEmpty(value === null || value === void 0 ? void 0 : value.trim()) ? '' : value;
78
76
  const newDescription = getUpdatedDescription(issue, environment, periodicityOfIssue, ktQ4Local, v3ClusterName);
79
77
  onCaseDetailsChange({ timeFramesAndUrgency: ktQ4Local, description: newDescription });
80
78
  };
81
- const isKT2Required = isEmpty(issue) && isEmpty(timeFramesAndUrgency) && isEmpty(periodicityOfIssue);
82
- const isKT3Required = isEmpty(issue) && isEmpty(timeFramesAndUrgency) && isEmpty(environment);
79
+ const isKT2Required = false;
80
+ const isKT3Required = false;
83
81
  const isKT4Required = true;
84
82
  const descriptionErrorMessage = t(LargeDescriptionErrorMessage, { limit: DESCRIPTION_LENGTH_LIMIT });
85
83
  const isBusinessImpactInvalid = (isEmpty(timeFramesAndUrgency) || hasLargeCaseDescription) && showValidationErrorAlert;
84
+ const invalidateQT4 = (value) => {
85
+ return isEmpty(value) && hasFocusedLostKT4;
86
+ };
86
87
  return (React.createElement(React.Fragment, null,
87
88
  React.createElement(InlineEdit, { labelProps: { htmlFor: 'ktQ4-timeFramesAndUrgency' }, labelContent: React.createElement(React.Fragment, null,
88
89
  t(KtQuestionConstant.timeFramesAndUrgency),
89
90
  ' ',
90
91
  isKT4Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), allowInlineEdit: props.inlineEditable, hideSaveCancel: props.hideSaveCancel, initialIsEditing: isEmpty(timeFramesAndUrgency), usePreformattedTag: true, saveOnBlur: true, content: timeFramesAndUrgency },
91
- React.createElement(TextAreaAutosize, { className: `form-control${isBusinessImpactInvalid || isKTQ4InValid ? ' form-invalid' : ''}`, "aria-invalid": isBusinessImpactInvalid, id: "ktQ4-timeFramesAndUrgency", value: timeFramesAndUrgency, disabled: isEmpty(timeFramesAndUrgency) && hasLargeCaseDescription && !isKTQ4TextAreaActive, onChange: onKtQ4Change, onFocus: onKTQ4FocusChange, onBlur: onKTQ4FocusChange, "aria-required": isKT4Required, required: isKT4Required, "data-tracking-id": "open-case-ktQ4-timeFramesAndUrgency", placeholder: "E.g., users affected, financial impact, and whether it\u2019s a matter of legal, national, or medical urgency" }),
92
+ React.createElement(TextArea, { className: `form-control${(invalidateQT4(timeFramesAndUrgency) && isBusinessImpactInvalid) || isKTQ4InValid
93
+ ? ' form-invalid'
94
+ : ''}`, "aria-invalid": timeFramesAndUrgency && (timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length) > 4000 ? 'true' : 'false', id: "ktQ4-timeFramesAndUrgency", value: timeFramesAndUrgency, isDisabled: isEmpty(timeFramesAndUrgency) && hasLargeCaseDescription && !isKTQ4TextAreaActive, onChange: onKtQ4Change, onFocus: onKTQ4FocusChange, onBlur: onKTQ4FocusChange, "aria-required": isKT4Required, "data-tracking-id": "open-case-ktQ4-timeFramesAndUrgency", placeholder: "E.g., users affected, financial impact, and whether it\u2019s a matter of legal, national, or medical urgency", isRequired: isKT4Required }),
95
+ React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-4k-warning-ktQ4-environment" }, `${isKTQ4TextAreaActive && (timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length) > 4000
96
+ ? 'Description cannot be more than 4000 characters'
97
+ : ''}`),
92
98
  React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-warning-ktQ4-timeFramesAndUrgency" }, `${hasLargeCaseDescription && isKTQ4TextAreaActive ? descriptionErrorMessage : ''}`)),
93
99
  React.createElement(InlineEdit, { labelProps: { htmlFor: 'ktQ2-environment' }, labelContent: React.createElement(React.Fragment, null,
94
100
  t(KtQuestionConstant.environment),
95
101
  ' ',
96
102
  isKT2Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), allowInlineEdit: props.inlineEditable, hideSaveCancel: props.hideSaveCancel, initialIsEditing: isEmpty(environment), usePreformattedTag: true, saveOnBlur: true, content: environment },
97
- React.createElement(TextAreaAutosize, { className: `form-control${isKTQ2InValid || hasLargeCaseDescription ? ' form-invalid' : ''}`, id: "ktQ2-environment", value: environment, disabled: isEmpty(environment) && hasLargeCaseDescription && !isKTQ2TextAreaActive, onChange: onKtQ2Change, onFocus: onKTQ2FocusChange, onBlur: onKTQ2FocusChange, "aria-required": isKT2Required, required: isKT2Required, "data-tracking-id": "open-case-ktQ2-environment" }),
103
+ React.createElement(TextArea, { className: `form-control`, id: "ktQ2-environment", value: environment, isDisabled: isEmpty(environment) && hasLargeCaseDescription && !isKTQ2TextAreaActive, onChange: onKtQ2Change, onFocus: onKTQ2FocusChange, onBlur: onKTQ2FocusChange, "aria-required": isKT2Required, isRequired: isKT2Required, "data-tracking-id": "open-case-ktQ2-environment", "aria-invalid": environment && (environment === null || environment === void 0 ? void 0 : environment.length) > 4000 ? 'true' : 'false' }),
104
+ React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-4k-warning-ktQ2-environment" }, `${isKTQ2TextAreaActive && (environment === null || environment === void 0 ? void 0 : environment.length) > 4000
105
+ ? 'Description cannot be more than 4000 characters'
106
+ : ''}`),
98
107
  React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-warning-ktQ2-environment" }, `${hasLargeCaseDescription && isKTQ2TextAreaActive ? descriptionErrorMessage : ''}`)),
99
108
  React.createElement(InlineEdit, { labelProps: { htmlFor: 'ktQ3-periodicityOfIssue' }, labelContent: React.createElement(React.Fragment, null,
100
109
  t(KtQuestionConstant.periodicityOfIssue),
101
110
  ' ',
102
111
  isKT3Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), allowInlineEdit: props.inlineEditable, hideSaveCancel: props.hideSaveCancel, initialIsEditing: isEmpty(periodicityOfIssue), usePreformattedTag: true, saveOnBlur: true, content: periodicityOfIssue },
103
- React.createElement(TextAreaAutosize, { className: `form-control${isKTQ3InValid || hasLargeCaseDescription ? ' form-invalid' : ''}`, id: "ktQ3-periodicityOfIssue", value: periodicityOfIssue, disabled: isEmpty(periodicityOfIssue) && hasLargeCaseDescription && !isKTQ3TextAreaActive, onChange: onKtQ3Change, onFocus: onKTQ3FocusChange, onBlur: onKTQ3FocusChange, "aria-required": isKT3Required, required: isKT3Required, "data-tracking-id": "open-case-ktQ3-periodicityOfIssue" }),
112
+ React.createElement(TextArea, { className: `form-control`, id: "ktQ3-periodicityOfIssue", value: periodicityOfIssue, isDisabled: isEmpty(periodicityOfIssue) && hasLargeCaseDescription && !isKTQ3TextAreaActive, onChange: onKtQ3Change, onFocus: onKTQ3FocusChange, onBlur: onKTQ3FocusChange, "aria-required": isKT3Required, isRequired: isKT3Required, "data-tracking-id": "open-case-ktQ3-periodicityOfIssue", "aria-invalid": periodicityOfIssue && (periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length) > 4000 ? 'true' : 'false' }),
113
+ React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-4k-warning-ktQ3-environment" }, `${isKTQ3TextAreaActive && (periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length) > 4000
114
+ ? 'Description cannot be more than 4000 characters'
115
+ : ''}`),
104
116
  React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-warning-ktQ3-periodicityOfIssue" }, `${hasLargeCaseDescription && isKTQ3TextAreaActive ? descriptionErrorMessage : ''}`))));
105
117
  }
106
118
  KtQuestions.defaultProps = defaultProps;
package/lib/esm/components/Issue/Issue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Issue.d.ts","sourceRoot":"","sources":["../../../../src/components/Issue/Issue.tsx"],"names":[],"mappings":"AAcA,MAAM,CAAC,OAAO,UAAU,KAAK,gBAuF5B"}
1
+ {"version":3,"file":"Issue.d.ts","sourceRoot":"","sources":["../../../../src/components/Issue/Issue.tsx"],"names":[],"mappings":"AAeA,MAAM,CAAC,OAAO,UAAU,KAAK,gBA0F5B"}
package/lib/esm/components/Issue/Issue.js CHANGED
@@ -1,4 +1,5 @@
1
- import { InlineEdit, MoreOrLess, TextAreaAutosize } from '@rh-support/components';
1
+ import { TextArea } from '@patternfly/react-core';
2
+ import { InlineEdit, MoreOrLess } from '@rh-support/components';
2
3
  import { useGlobalStateContext } from '@rh-support/react-context';
3
4
  import isEmpty from 'lodash/isEmpty';
4
5
  import isEqual from 'lodash/isEqual';
@@ -26,9 +27,8 @@ export default function Issue() {
26
27
  const onCaseDetailsChange = (caseDetails) => {
27
28
  setCaseDetails(caseDispatch, caseDetails);
28
29
  };
29
- const onKTQ1IssueChange = (e) => {
30
- var _a;
31
- const ktQ1Local = isEmpty((_a = e.target.value) === null || _a === void 0 ? void 0 : _a.trim()) ? '' : e.target.value;
30
+ const onKTQ1IssueChange = (value, e) => {
31
+ const ktQ1Local = isEmpty(value === null || value === void 0 ? void 0 : value.trim()) ? '' : value;
32
32
  const description = getUpdatedDescription(ktQ1Local, environment, periodicityOfIssue, timeFramesAndUrgency, v3ClusterName);
33
33
  setHasLargeDescription(description.length > DESCRIPTION_LENGTH_LIMIT);
34
34
  onCaseDetailsChange({ issue: ktQ1Local, description });
@@ -43,7 +43,8 @@ export default function Issue() {
43
43
  React.createElement(MoreOrLess, { maxHeight: 600, appStickyHeaderRef: navBarRef },
44
44
  React.createElement(InlineEdit, { labelProps: { htmlFor: 'issue-section-ktQ1-issue' }, labelContent: React.createElement(React.Fragment, null,
45
45
  React.createElement(Trans, null, "What are you experiencing? What are you expecting to happen?")), allowInlineEdit: true, hideSaveCancel: true, initialIsEditing: isEmpty(issue), usePreformattedTag: true, content: issue },
46
- React.createElement(TextAreaAutosize, { id: "issue-section-ktQ1-issue", name: "issue-section-ktQ1-issue", "aria-describedby": "describeIssueDesc", "aria-invalid": hasLargeDescription, className: `form-control${hasLargeDescription ? ' form-invalid' : ''}`, value: issue, placeholder: t('Elaborate more on your issue'), "data-tracking-id": "open-case-describe-ktQ1-issue", onChange: onKTQ1IssueChange }))),
46
+ React.createElement(TextArea, { id: "issue-section-ktQ1-issue", name: "issue-section-ktQ1-issue", className: `form-control${hasLargeDescription ? ' form-invalid' : ''}`, "aria-invalid": (issue === null || issue === void 0 ? void 0 : issue.length) > 20000 ? 'true' : 'false', value: issue, onChange: onKTQ1IssueChange, "data-tracking-id": "open-case-describe-ktQ1-issue", "aria-describedby": "describeIssueDesc", placeholder: t('Elaborate more on your issue') }),
47
+ React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-20k-warning-ktQ1-environment" }, `${(issue === null || issue === void 0 ? void 0 : issue.length) > 20000 ? 'Description cannot be more than 20000 characters' : ''}`))),
47
48
  ((_a = getUpdatedDescription(issue, environment, periodicityOfIssue, timeFramesAndUrgency, v3ClusterName)) === null || _a === void 0 ? void 0 : _a.length) > DESCRIPTION_LENGTH_LIMIT && (React.createElement("div", { className: "pull-top" },
48
49
  React.createElement("p", { className: "form-instructions form-invalid" }, maxLengtMessage))))));
49
50
  }
package/lib/esm/components/Recommendations/InsightsRuleInfo.d.ts CHANGED
@@ -4,6 +4,13 @@ interface IProps {
4
4
  showNewTag: boolean;
5
5
  duplicateKeys: string[];
6
6
  }
7
+ declare global {
8
+ namespace JSX {
9
+ interface IntrinsicElements {
10
+ 'pfe-cta': any;
11
+ }
12
+ }
13
+ }
7
14
  export declare function InsightsRuleInfo({ doc, showNewTag, duplicateKeys }: IProps): JSX.Element;
8
15
  export {};
9
16
  //# sourceMappingURL=InsightsRuleInfo.d.ts.map
package/lib/esm/components/Recommendations/InsightsRuleInfo.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InsightsRuleInfo.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/InsightsRuleInfo.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAI7D,UAAU,MAAM;IACZ,GAAG,EAAE,wBAAwB,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,EAAE,CAAC;CAC3B;AAOD,wBAAgB,gBAAgB,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,MAAM,eA0J1E"}
1
+ {"version":3,"file":"InsightsRuleInfo.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/InsightsRuleInfo.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAI7D,UAAU,MAAM;IACZ,GAAG,EAAE,wBAAwB,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,EAAE,CAAC;CAC3B;AAOD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,GAAG,CAAC;QACV,UAAU,iBAAiB;YACvB,SAAS,EAAE,GAAG,CAAC;SAClB;KACJ;CACJ;AAED,wBAAgB,gBAAgB,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,MAAM,eA4J1E"}
package/lib/esm/components/Recommendations/InsightsRuleInfo.js CHANGED
@@ -74,6 +74,7 @@ export function InsightsRuleInfo({ doc, showNewTag, duplicateKeys }) {
74
74
  React.createElement(Trans, null, "Additional info")),
75
75
  React.createElement(AccordionContent, { isHidden: !isAdditionalExpanded },
76
76
  React.createElement("p", { onClick: onAdditionalInfoElemClick, dangerouslySetInnerHTML: parseMoreInfo(ruleData === null || ruleData === void 0 ? void 0 : ruleData.more_info, (_g = insightsReport === null || insightsReport === void 0 ? void 0 : insightsReport.current) === null || _g === void 0 ? void 0 : _g.details) }))))),
77
- React.createElement("a", { className: "se-recommended ts-result-insights cta-link", rel: "noopener noreferrer", target: "_blank", onClick: onCtaClick(doc.view_uri), "data-tracking-id": "se-recommended-insights-rule", "aria-label": "Related article", role: "button", href: getTrackingULRWithQueryParams(doc.view_uri, SessionResourceSource.INSIGHTS) },
78
- React.createElement(Trans, null, "Related article")))))));
77
+ React.createElement("pfe-cta", null,
78
+ React.createElement("a", { className: "se-recommended ts-result-insights cta-link", rel: "noopener noreferrer", target: "_blank", onClick: onCtaClick(doc.view_uri), "data-tracking-id": "se-recommended-insights-rule", "aria-label": "Related article", role: "button", href: getTrackingULRWithQueryParams(doc.view_uri, SessionResourceSource.INSIGHTS) },
79
+ React.createElement(Trans, null, "Related article"))))))));
79
80
  }
package/lib/esm/scss/_pf4-overrides.scss CHANGED
@@ -108,7 +108,7 @@
108
108
 
109
109
  .pf-c-alert {
110
110
  .pf-c-alert__title {
111
- font-weight: 600;
111
+ font-weight: 600 !important;
112
112
  font-size: 15px;
113
113
  }
114
114
 
@@ -248,6 +248,13 @@
248
248
 
249
249
  & > *:not(.ea-rule) .cta-link {
250
250
  padding: 0 0.8rem;
251
+ border: none;
252
+ font-size: 14px;
253
+ font-weight: 700;
254
+ }
255
+ .cta-link::after {
256
+ border: 0;
257
+ margin-left: 0 !important;
251
258
  }
252
259
  }
253
260
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rh-support/troubleshoot",
3
- "version": "0.3.2",
3
+ "version": "0.3.5",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org"
@@ -31,6 +31,7 @@
31
31
  "@patternfly/patternfly": "4.196.7",
32
32
  "@patternfly/pfe-accordion": "1.12.3",
33
33
  "@patternfly/pfe-collapse": "1.12.3",
34
+ "@patternfly/pfe-cta": "^1.12.3",
34
35
  "@patternfly/pfe-tabs": "1.12.3",
35
36
  "@patternfly/react-core": "4.202.16",
36
37
  "@rh-support/components": "^0.1.3",
@@ -72,10 +73,10 @@
72
73
  "@patternfly/react-core": "4.202.16",
73
74
  "@progress/kendo-drawing": "^1.6.0",
74
75
  "@progress/kendo-react-pdf": "^3.12.0",
75
- "@rh-support/components": "1.1.82",
76
- "@rh-support/react-context": "0.3.2",
76
+ "@rh-support/components": "1.1.83",
77
+ "@rh-support/react-context": "0.3.4",
77
78
  "@rh-support/types": "0.2.0",
78
- "@rh-support/user-permissions": "0.2.66",
79
+ "@rh-support/user-permissions": "0.2.67",
79
80
  "@rh-support/utils": "0.2.49",
80
81
  "@types/react-redux": "^7.1.12",
81
82
  "@types/redux": "^3.6.0",
@@ -141,5 +142,5 @@
141
142
  "not ie <= 11",
142
143
  "not op_mini all"
143
144
  ],
144
- "gitHead": "f69fb5ac2a9d8561d300a9e7f02456268d1e2fc7"
145
+ "gitHead": "de58d49b00c17b15e090aee40a57150952ef560c"
145
146
  }