Same workspace actions menu (#1108)

* fix: workspace actions toggling * refactor: rework WorkspaceActionsProvider, extract consumers Signed-off-by: Oleksii Kurinnyi <okurinny@redhat.com> * refactor: update sidebar navigation Signed-off-by: Oleksii Kurinnyi <okurinny@redhat.com> * refactor: update workspaces list Signed-off-by: Oleksii Kurinnyi <okurinny@redhat.com> * refactor: workspace details page Signed-off-by: Oleksii Kurinnyi <okurinny@redhat.com> * chore: clean up Signed-off-by: Oleksii Kurinnyi <okurinny@redhat.com> * fixup! refactor: workspace details page * fixup! fixup! refactor: workspace details page * fixup! fixup! fixup! refactor: workspace details page * fixup! fixup! fixup! fixup! refactor: workspace details page * Update packages/dashboard-frontend/src/contexts/WorkspaceActions/DeleteButton/__tests__/index.spec.tsx Co-authored-by: Oleksii Orel <oorel@redhat.com> * Fix linter warning --------- Signed-off-by: Oleksii Kurinnyi <okurinny@redhat.com> Co-authored-by: Oleksii Orel <oorel@redhat.com>
eclipse-che · May 13, 2024 · a010b15 · a010b15
1 parent 9834cd4
commit a010b15
Show file tree

Hide file tree

Showing 57 changed files with 2,619 additions and 1,875 deletions.
diff --git a/packages/dashboard-frontend/jest.config.js b/packages/dashboard-frontend/jest.config.js
@@ -52,7 +52,7 @@ module.exports = {
     global: {
       statements: 90,
       branches: 86,
-      functions: 84,
+      functions: 85,
       lines: 90,
     },
   },

diff --git a/packages/dashboard-frontend/src/Layout/Header/__mocks__/index.tsx b/packages/dashboard-frontend/src/Layout/Header/__mocks__/index.tsx
@@ -14,7 +14,7 @@ import React from 'react';
 
 import { Props } from '@/Layout/Header';
 
-export default class Header extends React.PureComponent<Props> {
+export class Header extends React.PureComponent<Props> {
   public render(): React.ReactElement {
     return (
       <div>

diff --git a/packages/dashboard-frontend/src/Layout/Header/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/Layout/Header/__tests__/index.spec.tsx
@@ -16,7 +16,7 @@ import { createHashHistory } from 'history';
 import React from 'react';
 import renderer from 'react-test-renderer';
 
-import Header from '..';
+import { Header } from '..';
 
 jest.mock('../Tools', () => {
   const FakeTools = (props: { logout: () => void; changeTheme: () => void }) => (

diff --git a/packages/dashboard-frontend/src/Layout/Header/index.tsx b/packages/dashboard-frontend/src/Layout/Header/index.tsx
@@ -27,7 +27,7 @@ type State = {
   isVisible: boolean;
 };
 
-export default class Header extends React.PureComponent<Props, State> {
+export class Header extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
 

diff --git a/.../dashboard-frontend/src/Layout/Navigation/RecentItem/WorkspaceActions/__mocks__/index.tsx b/.../dashboard-frontend/src/Layout/Navigation/RecentItem/WorkspaceActions/__mocks__/index.tsx
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2018-2024 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';
+
+export class RecentItemWorkspaceActions extends React.PureComponent {
+  render(): React.ReactNode {
+    return <div>RecentItemWorkspaceActions</div>;
+  }
+}
diff --git a/...Layout/Navigation/RecentItem/WorkspaceActions/__tests__/__snapshots__/index.spec.tsx.snap b/...Layout/Navigation/RecentItem/WorkspaceActions/__tests__/__snapshots__/index.spec.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RecentItemWorkspaceActions snapshot 1`] = `
+<div
+  onClick={[Function]}
+>
+  <div
+    data-testid="workspace-actions-dropdown"
+  >
+    <button
+      data-testid="workspace-actions-dropdown-open-workspace-button"
+      disabled={false}
+      onClick={[Function]}
+    >
+      Open
+    </button>
+  </div>
+</div>
+`;
diff --git a/...board-frontend/src/Layout/Navigation/RecentItem/WorkspaceActions/__tests__/index.spec.tsx b/...board-frontend/src/Layout/Navigation/RecentItem/WorkspaceActions/__tests__/index.spec.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2018-2024 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 { Provider } from 'react-redux';
+
+import { NavigationRecentItemObject } from '@/Layout/Navigation';
+import { RecentItemWorkspaceActions } from '@/Layout/Navigation/RecentItem/WorkspaceActions';
+import getComponentRenderer from '@/services/__mocks__/getComponentRenderer';
+import { constructWorkspace } from '@/services/workspace-adapter';
+import { DevWorkspaceBuilder } from '@/store/__mocks__/devWorkspaceBuilder';
+import { FakeStoreBuilder } from '@/store/__mocks__/storeBuilder';
+
+jest.mock('@/contexts/WorkspaceActions/Dropdown');
+
+const { createSnapshot } = getComponentRenderer(getComponent);
+
+describe('RecentItemWorkspaceActions', () => {
+  test('snapshot', () => {
+    const workspace = constructWorkspace(
+      new DevWorkspaceBuilder()
+        .withName('my-workspace')
+        .withUID('1234')
+        .withStatus({ phase: 'STOPPED' })
+        .build(),
+    );
+
+    const snapshot = createSnapshot({
+      label: 'my-workspace',
+      to: '/namespace/my-workspace',
+      workspace,
+    });
+    expect(snapshot).toMatchSnapshot();
+  });
+});
+
+function getComponent(item: NavigationRecentItemObject): React.ReactElement {
+  const store = new FakeStoreBuilder().build();
+  return (
+    <Provider store={store}>
+      <RecentItemWorkspaceActions item={item} />
+    </Provider>
+  );
+}
diff --git a/packages/dashboard-frontend/src/Layout/Navigation/RecentItem/WorkspaceActions/index.tsx b/packages/dashboard-frontend/src/Layout/Navigation/RecentItem/WorkspaceActions/index.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2018-2024 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 { WorkspaceActionsConsumer } from '@/contexts/WorkspaceActions';
+import { WorkspaceActionsDropdown } from '@/contexts/WorkspaceActions/Dropdown';
+import { NavigationRecentItemObject } from '@/Layout/Navigation';
+
+type Props = {
+  item: NavigationRecentItemObject;
+};
+
+export class RecentItemWorkspaceActions extends React.PureComponent<Props> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  public render(): React.ReactElement {
+    const { item } = this.props;
+    const menuAppendTo = document.body;
+
+    return (
+      <div
+        onClick={e => {
+          e.stopPropagation();
+        }}
+      >
+        <WorkspaceActionsConsumer>
+          {context => {
+            return (
+              <WorkspaceActionsDropdown
+                context={context}
+                isPlain
+                menuAppendTo={menuAppendTo}
+                onAction={async () => {
+                  // no-op
+                }}
+                position="right"
+                toggle="kebab-toggle"
+                workspace={item.workspace}
+              />
+            );
+          }}
+        </WorkspaceActionsConsumer>
+      </div>
+    );
+  }
+}
diff --git a/...ard-frontend/src/Layout/Navigation/RecentItem/__tests__/__snapshots__/index.spec.tsx.snap b/...ard-frontend/src/Layout/Navigation/RecentItem/__tests__/__snapshots__/index.spec.tsx.snap
@@ -19,6 +19,7 @@ exports[`Navigation Item snapshot with RUNNING correctly 1`] = `
       aria-current={null}
       className="pf-c-nav__link navItem"
       data-testid="/namespace/workspace"
+      id="/namespace/workspace"
       onClick={[Function]}
       tabIndex={null}
     >
@@ -27,7 +28,7 @@ exports[`Navigation Item snapshot with RUNNING correctly 1`] = `
       >
         <div>
           Mock Workspace status indicator, status: 
-          RUNNING
+          Stopped
         </div>
         <div
           data-testid="patternfly-tooltip"
@@ -52,7 +53,7 @@ exports[`Navigation Item snapshot with RUNNING correctly 1`] = `
         </div>
       </span>
       <div>
-        Mock NavigationItemWorkspaceActions
+        RecentItemWorkspaceActions
       </div>
     </a>
   </li>
@@ -78,6 +79,7 @@ exports[`Navigation Item snapshot with STOPPED status 1`] = `
       aria-current={null}
       className="pf-c-nav__link navItem"
       data-testid="/namespace/workspace"
+      id="/namespace/workspace"
       onClick={[Function]}
       tabIndex={null}
     >
@@ -86,7 +88,7 @@ exports[`Navigation Item snapshot with STOPPED status 1`] = `
       >
         <div>
           Mock Workspace status indicator, status: 
-          STOPPED
+          Stopped
         </div>
         <div
           data-testid="patternfly-tooltip"
@@ -111,7 +113,7 @@ exports[`Navigation Item snapshot with STOPPED status 1`] = `
         </div>
       </span>
       <div>
-        Mock NavigationItemWorkspaceActions
+        RecentItemWorkspaceActions
       </div>
     </a>
   </li>

diff --git a/packages/dashboard-frontend/src/Layout/Navigation/RecentItem/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/Layout/Navigation/RecentItem/__tests__/index.spec.tsx
@@ -11,34 +11,35 @@
  */
 
 import { Nav } from '@patternfly/react-core';
-import { createMemoryHistory } from 'history';
 import React from 'react';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router';
 
 import { NavigationRecentItemObject } from '@/Layout/Navigation';
-import NavigationRecentItem from '@/Layout/Navigation/RecentItem';
+import { NavigationRecentItem } from '@/Layout/Navigation/RecentItem';
 import getComponentRenderer, { screen } from '@/services/__mocks__/getComponentRenderer';
 import { WorkspaceStatus } from '@/services/helpers/types';
+import { constructWorkspace } from '@/services/workspace-adapter';
+import { DevWorkspaceBuilder } from '@/store/__mocks__/devWorkspaceBuilder';
 import { FakeStoreBuilder } from '@/store/__mocks__/storeBuilder';
 
 jest.mock('@/components/Workspace/Status/Indicator');
-jest.mock('@/Layout/Navigation/RecentItemWorkspaceActions', () => {
-  return {
-    __esModule: true,
-    default: () => <div>Mock NavigationItemWorkspaceActions</div>,
-  };
-});
+jest.mock('@/Layout/Navigation/RecentItem/WorkspaceActions');
 
 const { createSnapshot, renderComponent } = getComponentRenderer(getComponent);
 
 describe('Navigation Item', () => {
+  const workspace = constructWorkspace(
+    new DevWorkspaceBuilder()
+      .withName('workspace')
+      .withUID('test-wksp-id')
+      .withStatus({ phase: 'STOPPED' })
+      .build(),
+  );
   const item: NavigationRecentItemObject = {
-    status: WorkspaceStatus.STOPPED,
-    label: 'workspace',
-    to: '/namespace/workspace',
-    isDevWorkspace: false,
-    workspaceUID: 'test-wksp-id',
+    label: workspace.name,
+    to: `/namespace/${workspace.name}`,
+    workspace,
   };
 
   afterEach(() => {
@@ -47,14 +48,14 @@ describe('Navigation Item', () => {
 
   test('snapshot with STOPPED status', () => {
     const status = WorkspaceStatus.STOPPED;
-    const snapshot = createSnapshot(Object.assign({}, item, { status }), '', true);
+    const snapshot = createSnapshot(Object.assign({}, item, { status }), '');
 
     expect(snapshot.toJSON()).toMatchSnapshot();
   });
 
   test('snapshot with RUNNING correctly', () => {
     const status = WorkspaceStatus.RUNNING;
-    const snapshot = createSnapshot(Object.assign({}, item, { status }), '', true);
+    const snapshot = createSnapshot(Object.assign({}, item, { status }), '');
 
     expect(snapshot.toJSON()).toMatchSnapshot();
   });
@@ -109,23 +110,13 @@ describe('Navigation Item', () => {
   });
 });
 
-function getComponent(
-  item: NavigationRecentItemObject,
-  activeItem = '',
-  isDefaultExpanded = false,
-): React.ReactElement {
+function getComponent(item: NavigationRecentItemObject, activeItem = ''): React.ReactElement {
   const store = new FakeStoreBuilder().build();
-  const history = createMemoryHistory();
   return (
     <Provider store={store}>
       <MemoryRouter>
         <Nav>
-          <NavigationRecentItem
-            isDefaultExpanded={isDefaultExpanded}
-            item={item}
-            activePath={activeItem}
-            history={history}
-          />
+          <NavigationRecentItem item={item} activePath={activeItem} />
         </Nav>
       </MemoryRouter>
     </Provider>