@rh-support/troubleshoot 2.6.300 → 2.6.301

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 (3) hide show
  1. package/lib/esm/components/CaseManagement/OpenshiftDropdownV4.d.ts.map +1 -1
  2. package/lib/esm/components/CaseManagement/OpenshiftDropdownV4.js +44 -23
  3. package/package.json +2 -2
package/lib/esm/components/CaseManagement/OpenshiftDropdownV4.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OpenshiftDropdownV4.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenshiftDropdownV4.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAgB5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAI5D,OAAO,KAA2D,MAAM,OAAO,CAAC;AAOhF,UAAU,MAAO,SAAQ,gBAAgB;IACrC,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzF,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iCAAiC,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,IAAI,CAAC;CAC3C;AAsBD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBA+dzC;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
1
+ {"version":3,"file":"OpenshiftDropdownV4.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenshiftDropdownV4.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAgB5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAI5D,OAAO,KAA2D,MAAM,OAAO,CAAC;AAOhF,UAAU,MAAO,SAAQ,gBAAgB;IACrC,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzF,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iCAAiC,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,IAAI,CAAC;CAC3C;AAsBD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBAsfzC;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
package/lib/esm/components/CaseManagement/OpenshiftDropdownV4.js CHANGED
@@ -36,11 +36,17 @@ const createState = (external_cluster_id, display_name, openshift_version, suppo
36
36
  function OpenshiftDropdownV4(props) {
37
37
  const { t } = useTranslation();
38
38
  const PER_PAGE = 200;
39
+ const LOAD_MORE_VALUE = 'loader';
39
40
  const [clustersRawResponse, setClustersRawResponse] = useState([]);
41
+ const clustersRawResponseRef = useRef(clustersRawResponse);
42
+ clustersRawResponseRef.current = clustersRawResponse;
40
43
  const abortControllerRef = useRef();
44
+ const loadMoreInProgressRef = useRef(false);
41
45
  const [clustersSelectOptions, setClustersSelectOptions] = useState([]);
42
46
  const [isOpen, setIsOpen] = useState(false);
43
47
  const [inputVal, setInputVal] = useState(props.openshiftDisplayName);
48
+ const inputValRef = useRef(inputVal);
49
+ inputValRef.current = inputVal;
44
50
  const [showArchivedClusters, setShowArchivedClusters] = useState(false);
45
51
  const [isFetchingClusters, setIsFetchingClusters] = useState(false);
46
52
  const [totalResultsNo, setTotalResultsNo] = useState(0);
@@ -67,31 +73,41 @@ function OpenshiftDropdownV4(props) {
67
73
  const fetchedClusters = yield fetchAccountClusters();
68
74
  setClustersRawResponse(fetchedClusters.items);
69
75
  setTotalResultsNo(fetchedClusters.total);
70
- setClustersSelectOptions(getClusterOptions(fetchedClusters.items));
76
+ setClustersSelectOptions(getClusterOptions(fetchedClusters.items, fetchedClusters.total));
71
77
  });
72
78
  const onToggle = () => setIsOpen(!isOpen);
73
- const onViewMoreClick = () => __awaiter(this, void 0, void 0, function* () {
74
- setClustersRawResponse((prev) => {
75
- const page = Math.floor(prev.length / PER_PAGE) + 1;
76
- fetchAccountClusters(inputVal, page).then((fetchedClusters) => {
77
- setClustersRawResponse((latest) => {
78
- const clusterResponse = [...latest, ...((fetchedClusters === null || fetchedClusters === void 0 ? void 0 : fetchedClusters.items) || [])];
79
- setTotalResultsNo(fetchedClusters.total);
80
- setClustersSelectOptions(getClusterOptions(clusterResponse));
81
- return clusterResponse;
82
- });
83
- });
84
- return prev;
85
- });
79
+ const onViewMoreClick = (event) => __awaiter(this, void 0, void 0, function* () {
80
+ var _a;
81
+ (_a = event === null || event === void 0 ? void 0 : event.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(event);
82
+ if (loadMoreInProgressRef.current)
83
+ return;
84
+ loadMoreInProgressRef.current = true;
85
+ try {
86
+ const currentClusters = clustersRawResponseRef.current;
87
+ const page = Math.floor(currentClusters.length / PER_PAGE) + 1;
88
+ const fetchedClusters = yield fetchAccountClusters(inputValRef.current, page);
89
+ const clusterResponse = [...clustersRawResponseRef.current, ...((fetchedClusters === null || fetchedClusters === void 0 ? void 0 : fetchedClusters.items) || [])];
90
+ setClustersRawResponse(clusterResponse);
91
+ setTotalResultsNo(fetchedClusters.total);
92
+ setClustersSelectOptions(getClusterOptions(clusterResponse, fetchedClusters.total));
93
+ setIsOpen(true);
94
+ }
95
+ finally {
96
+ loadMoreInProgressRef.current = false;
97
+ }
86
98
  });
87
99
  const onSelect = (event, selectedCluster) => __awaiter(this, void 0, void 0, function* () {
88
- if (selectedCluster.type === 'checkbox') {
100
+ if (selectedCluster === LOAD_MORE_VALUE) {
101
+ onViewMoreClick(event);
102
+ return;
103
+ }
104
+ if ((selectedCluster === null || selectedCluster === void 0 ? void 0 : selectedCluster.type) === 'checkbox') {
89
105
  setShowArchivedClusters(!showArchivedClusters);
90
106
  props.onClusterClear();
91
107
  setClustersRawResponse([]);
92
108
  setInputVal('');
93
109
  }
94
- else if (selectedCluster !== 'loader') {
110
+ else {
95
111
  props.onClusterIdStateUpdate(selectedCluster);
96
112
  const displayName = selectedCluster.display_name || selectedCluster.toString();
97
113
  setInputVal(displayName);
@@ -139,7 +155,7 @@ function OpenshiftDropdownV4(props) {
139
155
  ],
140
156
  // eslint-disable-next-line react-hooks/exhaustive-deps
141
157
  [showArchivedClusters, focusedItemIndex]);
142
- const getClusterOptions = (clusters) => {
158
+ const getClusterOptions = (clusters, total = totalResultsNo) => {
143
159
  const clustersResponseGrouped = groupBy(clusters, 'console_url') || [];
144
160
  const domainNames = Object.keys(clustersResponseGrouped) || [];
145
161
  // move clusters with empty console_urls to the end of domains array
@@ -161,11 +177,11 @@ function OpenshiftDropdownV4(props) {
161
177
  clusterOptions.push(React.createElement(Divider, { component: "div", key: index + domain }));
162
178
  });
163
179
  if (isFetchingClusters) {
164
- clusterOptions.push(React.createElement(SelectOption, { isLoading: true, disabled: true },
180
+ clusterOptions.push(React.createElement(SelectOption, { isLoading: true, disabled: true, key: "clusters-loading" },
165
181
  React.createElement(Spinner, { size: "lg" })));
166
182
  }
167
- else if (!isFetchingClusters && clustersRawResponse.length < totalResultsNo) {
168
- clusterOptions.push(React.createElement(SelectOption, { isLoadButton: true, onClick: onViewMoreClick, value: "loader" }, "Display additional results"));
183
+ else if (!isFetchingClusters && clusters.length < total) {
184
+ clusterOptions.push(React.createElement(SelectOption, { isLoadButton: true, key: "display-additional-results", onClick: onViewMoreClick, value: LOAD_MORE_VALUE }, "Display additional results"));
169
185
  }
170
186
  return [
171
187
  ...dropdownHeaderOptions,
@@ -297,7 +313,7 @@ function OpenshiftDropdownV4(props) {
297
313
  if (!isUnmounted) {
298
314
  setClustersRawResponse(fetchedClusters.items);
299
315
  setTotalResultsNo(fetchedClusters.total);
300
- setClustersSelectOptions(getClusterOptions(fetchedClusters.items) || []);
316
+ setClustersSelectOptions(getClusterOptions(fetchedClusters.items, fetchedClusters.total) || []);
301
317
  }
302
318
  });
303
319
  fetchClusters();
@@ -315,7 +331,7 @@ function OpenshiftDropdownV4(props) {
315
331
  const fetchedClusters = yield fetchAccountClusters(value);
316
332
  setClustersRawResponse(fetchedClusters.items);
317
333
  setTotalResultsNo(fetchedClusters.total);
318
- setClustersSelectOptions(getClusterOptions(fetchedClusters.items));
334
+ setClustersSelectOptions(getClusterOptions(fetchedClusters.items, fetchedClusters.total));
319
335
  }), 500);
320
336
  const getSelectedItem = () => {
321
337
  if (!isEmpty(inputVal)) {
@@ -339,7 +355,12 @@ function OpenshiftDropdownV4(props) {
339
355
  React.createElement("span", { className: `form-required ${isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-hidden": true }, "*"),
340
356
  !isExportingPDF ? React.createElement(CaseOpenShiftPopover, null) : ''),
341
357
  React.createElement("span", { id: titleId, hidden: true }, "Select a state"),
342
- React.createElement(Select, { id: "openshift-cluster-selector", isOpen: isOpen, selected: getSelectedItem(), onSelect: onSelect, onOpenChange: (isOpen) => setIsOpen(isOpen), toggle: toggle, shouldFocusFirstItemOnOpen: true, isScrollable: true, "aria-invalid": props.isClusterIdInvalid, "aria-describedby": "clusterID-validate-helper", "data-tracking-id": "openshift-cluster-id", className: "openshift-cluster-id" },
358
+ React.createElement(Select, { id: "openshift-cluster-selector", isOpen: isOpen, selected: getSelectedItem(), onSelect: onSelect, onOpenChange: (nextOpen) => {
359
+ if (!nextOpen && loadMoreInProgressRef.current) {
360
+ return;
361
+ }
362
+ setIsOpen(nextOpen);
363
+ }, toggle: toggle, shouldFocusFirstItemOnOpen: true, isScrollable: true, "aria-invalid": props.isClusterIdInvalid, "aria-describedby": "clusterID-validate-helper", "data-tracking-id": "openshift-cluster-id", className: "openshift-cluster-id" },
343
364
  React.createElement(SelectList, { id: "openshift-cluster-selector-listbox" }, clustersSelectOptions)),
344
365
  React.createElement("div", { id: "clusterID-validate-helper", className: `form-instructions ${props.isClusterIdInvalid ? 'form-invalid' : ''}` }, props.clusterIdDropdownFormInstructions))));
345
366
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rh-support/troubleshoot",
3
- "version": "2.6.300",
3
+ "version": "2.6.301",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org"
@@ -127,5 +127,5 @@
127
127
  "defaults and supports es6-module",
128
128
  "maintained node versions"
129
129
  ],
130
- "gitHead": "5a3a62786c13896575f6db3805b3a0dc0bd1299f"
130
+ "gitHead": "d3844bbc14dc38574879a42ac31febd7b72f0bfb"
131
131
  }