@rh-support/troubleshoot 0.3.2 → 0.3.3

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 (10) 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/CaseInformation/Description.d.ts.map +1 -1
  4. package/lib/esm/components/CaseInformation/Description.js +14 -9
  5. package/lib/esm/components/CaseInformation/Fts.js +1 -1
  6. package/lib/esm/components/ImproveCase/KtQuestions.d.ts.map +1 -1
  7. package/lib/esm/components/ImproveCase/KtQuestions.js +33 -21
  8. package/lib/esm/components/Issue/Issue.d.ts.map +1 -1
  9. package/lib/esm/components/Issue/Issue.js +6 -5
  10. package/package.json +5 -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/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rh-support/troubleshoot",
3
- "version": "0.3.2",
3
+ "version": "0.3.3",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org"
@@ -72,10 +72,10 @@
72
72
  "@patternfly/react-core": "4.202.16",
73
73
  "@progress/kendo-drawing": "^1.6.0",
74
74
  "@progress/kendo-react-pdf": "^3.12.0",
75
- "@rh-support/components": "1.1.82",
76
- "@rh-support/react-context": "0.3.2",
75
+ "@rh-support/components": "1.1.83",
76
+ "@rh-support/react-context": "0.3.3",
77
77
  "@rh-support/types": "0.2.0",
78
- "@rh-support/user-permissions": "0.2.66",
78
+ "@rh-support/user-permissions": "0.2.67",
79
79
  "@rh-support/utils": "0.2.49",
80
80
  "@types/react-redux": "^7.1.12",
81
81
  "@types/redux": "^3.6.0",
@@ -141,5 +141,5 @@
141
141
  "not ie <= 11",
142
142
  "not op_mini all"
143
143
  ],
144
- "gitHead": "f69fb5ac2a9d8561d300a9e7f02456268d1e2fc7"
144
+ "gitHead": "8ad6dda321ad690b179be7346240345a57f1749b"
145
145
  }