[cherry-pick] Fix duplicating requests

packages/dashboard-backend/src/devworkspaceClient/services/personalAccessTokenApi/__tests__/helpers.spec.ts

@@ -10,18 +10,17 @@
  *   Red Hat, Inc. - initial API and implementation
  */
 
+import { api } from '@eclipse-che/common';
+import k8s from '@kubernetes/client-node';
 import {
   buildLabelSelector,
+  DUMMY_TOKEN_DATA,
+  isPatSecret,
+  PersonalAccessTokenSecret,
   toSecret,
   toSecretName,
   toToken,
-  isPatSecret,
-  PersonalAccessTokenSecret,
-  TokenName,
-  DUMMY_TOKEN_DATA,
 } from '../helpers';
-import k8s from '@kubernetes/client-node';
-import { api } from '@eclipse-che/common';
 
 describe('Helpers for Personal Access Token API', () => {
   test('buildLabelSelector', () => {

packages/dashboard-frontend/src/components/WorkspaceProgress/StepTitle/index.module.css

@@ -10,6 +10,10 @@
 *   Red Hat, Inc. - initial API and implementation
 */
 
+.pf-c-wizard__nav {
+  color: var(--pf-global--palette--black-1000);
+}
+
 .pf-c-wizard__nav .error {
   color: var(--pf-global--palette--black-1000);
   font-weight: bold;

packages/dashboard-frontend/src/components/WorkspaceProgress/Wizard/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,157 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WorkspaceProgressWizard component snapshot 1`] = `
+<div
+  className="progress pf-c-wizard"
+>
+  <button
+    aria-expanded={true}
+    aria-label="Wizard Toggle"
+    className="pf-c-wizard__toggle pf-m-expanded"
+    onClick={[Function]}
+  >
+    <ol
+      className="pf-c-wizard__toggle-list"
+    >
+      <li
+        className="pf-c-wizard__toggle-list-item"
+      >
+        <span
+          className="pf-c-wizard__toggle-num"
+        />
+
+      </li>
+    </ol>
+    <span
+      className="pf-c-wizard__toggle-icon"
+    >
+      <svg
+        aria-hidden="true"
+        aria-labelledby={null}
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style={
+          Object {
+            "verticalAlign": "-0.125em",
+          }
+        }
+        viewBox="0 0 320 512"
+        width="1em"
+      >
+        <path
+          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+        />
+      </svg>
+    </span>
+  </button>
+  <div
+    className="pf-c-wizard__outer-wrap"
+  >
+    <div
+      className="pf-c-wizard__inner-wrap"
+    >
+      <nav
+        aria-label="Workspace Progress Steps"
+        className="pf-c-wizard__nav pf-m-expanded"
+      >
+        <ol
+          className="pf-c-wizard__nav-list"
+        >
+          <li
+            className="pf-c-wizard__nav-item"
+          >
+            <button
+              aria-current={false}
+              aria-disabled={null}
+              className="pf-c-wizard__nav-link"
+              disabled={false}
+              onClick={[Function]}
+            >
+              initialize
+            </button>
+          </li>
+          <li
+            className="pf-c-wizard__nav-item"
+          >
+            <button
+              aria-current="page"
+              aria-disabled={null}
+              className="pf-c-wizard__nav-link pf-m-current"
+              disabled={false}
+              onClick={[Function]}
+            >
+              limit-check
+            </button>
+          </li>
+          <li
+            className="pf-c-wizard__nav-item"
+          >
+            <button
+              aria-current={false}
+              aria-disabled={null}
+              className="pf-c-wizard__nav-link"
+              disabled={false}
+              onClick={[Function]}
+            >
+              create
+            </button>
+            <ol
+              className="pf-c-wizard__nav-list"
+            >
+              <li
+                className="pf-c-wizard__nav-item"
+              >
+                <button
+                  aria-current={false}
+                  aria-disabled={true}
+                  className="pf-c-wizard__nav-link pf-m-disabled"
+                  disabled={true}
+                  onClick={[Function]}
+                >
+                  fetch
+                </button>
+              </li>
+              <li
+                className="pf-c-wizard__nav-item"
+              >
+                <button
+                  aria-current={false}
+                  aria-disabled={true}
+                  className="pf-c-wizard__nav-link pf-m-disabled"
+                  disabled={true}
+                  onClick={[Function]}
+                >
+                  conflict-check
+                </button>
+              </li>
+              <li
+                className="pf-c-wizard__nav-item"
+              >
+                <button
+                  aria-current={false}
+                  aria-disabled={true}
+                  className="pf-c-wizard__nav-link pf-m-disabled"
+                  disabled={true}
+                  onClick={[Function]}
+                >
+                  apply
+                </button>
+              </li>
+            </ol>
+          </li>
+        </ol>
+      </nav>
+      <div
+        aria-label={null}
+        aria-labelledby={null}
+        className="pf-c-wizard__main"
+      >
+        <div
+          className="pf-c-wizard__main-body"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/dashboard-frontend/src/components/WorkspaceProgress/Wizard/__tests__/index.spec.tsx

@@ -0,0 +1,142 @@
+/*
+ * Copyright (c) 2018-2023 Red Hat, Inc.
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *   Red Hat, Inc. - initial API and implementation
+ */
+
+import React from 'react';
+import WorkspaceProgressWizard, { WorkspaceProgressWizardStep } from '..';
+import { Step, StepId } from '../..';
+import getComponentRenderer, { screen } from '../../../../services/__mocks__/getComponentRenderer';
+
+const mockGoToNext = jest.fn();
+
+const { createSnapshot, renderComponent } = getComponentRenderer(getComponent);
+
+describe('WorkspaceProgressWizard', () => {
+  let steps: WorkspaceProgressWizardStep[];
+  let ref: React.RefObject<any>;
+
+  beforeEach(() => {
+    steps = [
+      {
+        id: Step.INITIALIZE,
+        name: Step.INITIALIZE,
+        component: <></>,
+      },
+      {
+        id: Step.LIMIT_CHECK,
+        name: Step.LIMIT_CHECK,
+        component: <></>,
+      },
+      {
+        id: Step.CREATE,
+        name: Step.CREATE,
+        component: <></>,
+        steps: [
+          {
+            id: Step.FETCH,
+            name: Step.FETCH,
+            component: <></>,
+          },
+          {
+            id: Step.CONFLICT_CHECK,
+            name: Step.CONFLICT_CHECK,
+            component: <></>,
+          },
+          {
+            id: Step.APPLY,
+            name: Step.APPLY,
+            component: <></>,
+          },
+        ],
+      },
+    ];
+    ref = React.createRef();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('component snapshot', () => {
+    const activeStepId: StepId = Step.LIMIT_CHECK;
+
+    const snapshot = createSnapshot(activeStepId, steps, ref);
+    expect(snapshot).toMatchSnapshot();
+  });
+
+  test('switching active step', () => {
+    const activeStepId: StepId = Step.INITIALIZE;
+
+    const { reRenderComponent } = renderComponent(activeStepId, steps, ref);
+
+    const buttonInitialize = screen.getByRole('button', { name: Step.INITIALIZE });
+    const buttonLimitCheck = screen.getByRole('button', { name: Step.LIMIT_CHECK });
+
+    expect(buttonInitialize.className.split(' ')).toEqual(expect.arrayContaining(['pf-m-current']));
+    expect(buttonLimitCheck.className.split(' ')).not.toEqual(
+      expect.arrayContaining(['pf-m-current']),
+    );
+
+    const nextActiveStepId = Step.LIMIT_CHECK;
+    reRenderComponent(nextActiveStepId, steps, ref);
+
+    const nextButtonInitialize = screen.getByRole('button', { name: Step.INITIALIZE });
+    const nextButtonLimitCheck = screen.getByRole('button', { name: Step.LIMIT_CHECK });
+
+    expect(nextButtonInitialize.className.split(' ')).not.toEqual(
+      expect.arrayContaining(['pf-m-current']),
+    );
+    expect(nextButtonLimitCheck.className.split(' ')).toEqual(
+      expect.arrayContaining(['pf-m-current']),
+    );
+  });
+
+  describe('trigger goToNext using reference', () => {
+    test('on the very first step', () => {
+      const activeStepId: StepId = Step.INITIALIZE;
+
+      renderComponent(activeStepId, steps, ref);
+
+      expect(mockGoToNext).not.toHaveBeenCalled();
+
+      ref.current?.goToNext();
+
+      expect(mockGoToNext).toHaveBeenCalledWith(Step.LIMIT_CHECK, Step.INITIALIZE);
+    });
+
+    test('on the very last step', () => {
+      const activeStepId: StepId = Step.APPLY;
+
+      renderComponent(activeStepId, steps, ref);
+
+      expect(mockGoToNext).not.toHaveBeenCalled();
+
+      ref.current?.goToNext();
+
+      expect(mockGoToNext).toHaveBeenCalledWith(undefined, Step.APPLY);
+    });
+  });
+});
+
+function getComponent(
+  activeStepId: StepId,
+  steps: WorkspaceProgressWizardStep[],
+  ref: React.RefObject<any>,
+): React.ReactElement {
+  return (
+    <WorkspaceProgressWizard
+      ref={ref}
+      activeStepId={activeStepId}
+      steps={steps}
+      onNext={mockGoToNext}
+    />
+  );
+}

packages/dashboard-frontend/src/components/WorkspaceProgress/Wizard/index.module.css

@@ -0,0 +1,40 @@
+/*
+* Copyright (c) 2018-2023 Red Hat, Inc.
+* This program and the accompanying materials are made
+* available under the terms of the Eclipse Public License 2.0
+* which is available at https://www.eclipse.org/legal/epl-2.0/
+*
+* SPDX-License-Identifier: EPL-2.0
+*
+* Contributors:
+*   Red Hat, Inc. - initial API and implementation
+*/
+
+.progress {
+  height: 700px;
+}
+
+.progress .pf-c-wizard__nav {
+  width: 100%;
+  border: none;
+  box-shadow: none;
+}
+
+.progress .pf-c-wizard__nav-link {
+  margin-left: 8px;
+  pointer-events: none;
+}
+
+.progress .pf-c-wizard__nav-link:hover,
+.progress .pf-c-wizard__nav-link:focus {
+  --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--Color);
+  --pf-c-wizard__nav-link-toggle--Color: var(--pf-c-wizard__nav-link--Color);
+}
+
+.progress .pf-c-wizard__nav-link > svg {
+  margin-right: 5px;
+}
+
+.progress .pf-c-wizard__toggle {
+  display: none;
+}