Merge branch 'develop' into f-3945/filter-by-type-mydata-page

src/__mocks__/handlers/DataExplorer/handlers.ts

@@ -1,13 +1,19 @@
 import { rest } from 'msw';
 import { deltaPath } from '__mocks__/handlers/handlers';
-import { Project, Resource } from '@bbp/nexus-sdk';
+import { Resource } from '@bbp/nexus-sdk';
 import {
   AggregatedBucket,
   AggregationsResult,
 } from 'subapps/dataExplorer/DataExplorerUtils';
 
+export const getCompleteResources = (
+  resources: Resource[] = defaultPartialResources
+) => {
+  return resources.map(res => ({ ...res, ...propertiesOnlyInSource }));
+};
+
 export const dataExplorerPageHandler = (
-  mockResources: Resource[],
+  partialResources: Resource[] = defaultPartialResources,
   total: number = 300
 ) => {
   return rest.get(deltaPath(`/resources`), (req, res, ctx) => {
@@ -23,16 +29,47 @@ export const dataExplorerPageHandler = (
       ],
       _total: total,
       _results: passedType
-        ? mockResources.filter(res => res['@type'] === passedType)
-        : mockResources,
+        ? partialResources.filter(res => res['@type'] === passedType)
+        : partialResources,
       _next:
         'https://bbp.epfl.ch/nexus/v1/resources?size=50&sort=@id&after=%5B1687269183553,%22https://bbp.epfl.ch/neurosciencegraph/data/31e22529-2c36-44f0-9158-193eb50526cd%22%5D',
     };
     return res(ctx.status(200), ctx.json(mockResponse));
   });
 };
 
-export const filterByProjectHandler = (mockResources: Resource[]) => {
+const propertiesOnlyInSource = { userProperty1: { subUserProperty1: 'bar' } };
+
+export const sourceResourceHandler = (
+  partialResources: Resource[] = defaultPartialResources
+) => {
+  return rest.get(
+    deltaPath(`/resources/:org/:project/_/:id`),
+    (req, res, ctx) => {
+      const { id } = req.params;
+      const decodedId = decodeURIComponent(id as string);
+
+      const partialResource = partialResources.find(
+        resource => resource['@id'] === decodedId
+      );
+      if (partialResource) {
+        return res(
+          ctx.status(200),
+          ctx.json({ ...partialResource, ...propertiesOnlyInSource })
+        );
+      }
+
+      return res(
+        ctx.status(200),
+        ctx.json(getMockResource(decodedId, { ...propertiesOnlyInSource }))
+      );
+    }
+  );
+};
+
+export const filterByProjectHandler = (
+  mockResources: Resource[] = defaultPartialResources
+) => {
   return rest.get(deltaPath(`/resources/:org/:project`), (req, res, ctx) => {
     if (req.url.searchParams.has('aggregations')) {
       return res(
@@ -180,7 +217,7 @@ export const getMockResource = (
   _updatedBy: 'https://bbp.epfl.ch/nexus/v1/realms/bbp/users/antonel',
 });
 
-export const defaultMockResult: Resource[] = [
+const defaultPartialResources: Resource[] = [
   getMockResource('self1', {}),
   getMockResource(
     'self2',

src/server/index.tsx

@@ -150,7 +150,7 @@ app.get('*', async (req: express.Request, res: express.Response) => {
       current: null,
       leftNodes: { links: [], shrinked: false },
       rightNodes: { links: [], shrinked: false },
-      limited: false,
+      fullscreen: false,
     },
   };
 

src/shared/App.less

@@ -9,27 +9,40 @@
   margin: 52px auto 0;
   display: flex;
   background: #f5f5f5 !important;
+
   &.-unconstrained-width {
     padding: 2em;
     max-width: none;
   }
+
   &.resource-view {
-    max-width: 60%;
+    max-width: 1320px;
     background-color: @primary-card;
-    background-image: linear-gradient(
-      315deg,
-      @primary-card 0%,
-      @subtle-white 74%
-    );
     min-height: calc(100vh - 40px);
     transition: background-image ease-out 1s;
+
+    &.background {
+      max-width: 60%;
+      background-image: linear-gradient(
+        315deg,
+        @primary-card 0%,
+        @subtle-white 74%
+      );
+
+      .resource-details {
+        .highShadow();
+        padding: 1em;
+        width: 100%;
+        background-color: @background-color-subtle;
+      }
+    }
+
     .resource-details {
-      .highShadow();
-      padding: 1em;
+      background-color: @fusion-main-bg;
       width: 100%;
-      background-color: @background-color-subtle;
     }
   }
+
   &.data-explorer-container {
     width: fit-content;
     min-width: calc(100vw - 1rem);
@@ -55,6 +68,7 @@
   .ant-alert-warning {
     margin: 1em 0;
   }
+
   section.links {
     width: 48%;
   }
@@ -64,6 +78,7 @@
   .identities-list {
     margin: 0;
     padding: 0;
+
     .list-item {
       cursor: auto;
     }
@@ -76,13 +91,15 @@
 .ant-pagination-item {
   margin-right: 2px;
 }
+
 .ant-list-pagination {
   text-align: center;
 }
 
 .ant-input-affix-wrapper .ant-input-suffix {
   color: rgba(0, 0, 0, 0.2);
 }
+
 .ant-upload.ant-upload-drag .ant-upload {
   padding: @default-pad;
 }
@@ -97,13 +114,15 @@
 
 .studio-view {
   padding: 0 2em;
+
   .workspace {
     display: flex;
     width: 100%;
     height: 600px;
     min-width: 800px;
     min-height: 600px;
   }
+
   .studio-back-button {
     margin-bottom: 5px;
   }
@@ -211,3 +230,29 @@
   outline: none;
   border-radius: 0;
 }
+
+.full-screen-switch__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  span {
+    color: @fusion-blue-8;
+  }
+  .full-screen-switch {
+    border-color: #2e76bf !important;
+    background: linear-gradient(
+        0deg,
+        rgba(0, 58, 140, 0.3),
+        rgba(0, 58, 140, 0.3)
+      ),
+      linear-gradient(0deg, rgba(46, 118, 191, 0.2), rgba(46, 118, 191, 0.2));
+    border: 1px solid #003a8c4d;
+    .ant-switch-handle {
+      top: 1px;
+      &::before {
+        background: @fusion-daybreak-10;
+      }
+    }
+  }
+}

src/shared/canvas/DataExplorerGraphFlow/DataExplorerGraphFlowEmpty.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const DataExplorerGraphFlowEmpty = () => {
+  return (
+    <div className="data-explorer-resolver no-current">
+      <div className="empty">
+        <img
+          src={require('../../images/graphNodes.svg')}
+          alt="nodes"
+          style={{ width: 500 }}
+        />
+        <div className="empty__title">No data explorer graph flow</div>
+        <div className="empty__subtitle">
+          Please select a node from any resource view editor to start exploring
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DataExplorerGraphFlowEmpty;

src/shared/canvas/DataExplorerGraphFlow/DateExplorerGraphFlow.spec.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import React from 'react';
-import { waitFor } from '@testing-library/react';
+import { RenderResult, waitFor } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { NexusClient, createNexusClient } from '@bbp/nexus-sdk';
 import { AnyAction, Store } from 'redux';
@@ -9,10 +9,11 @@ import { createMemoryHistory, MemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import { setupServer } from 'msw/node';
 import { deltaPath } from '__mocks__/handlers/handlers';
-import { cleanup, render, act, screen } from '../../../utils/testUtil';
+import { cleanup, render, screen } from '../../../utils/testUtil';
 import {
   DATA_EXPLORER_GRAPH_FLOW_DIGEST,
   InitNewVisitDataExplorerGraphView,
+  TDataExplorerState,
 } from '../../../shared/store/reducers/data-explorer';
 import configureStore from '../../store';
 import DateExplorerGraphFlow from './DateExplorerGraphFlow';
@@ -21,25 +22,33 @@ import {
   getDataExplorerGraphFlowResourceObject,
   getDataExplorerGraphFlowResourceObjectTags,
 } from '../../../__mocks__/handlers/DataExplorerGraphFlow/handlers';
+import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
+import userEvent from '@testing-library/user-event';
 
-const initialDataExplorerState = {
+const initialDataExplorerState: TDataExplorerState = {
   current: {
     isDownloadable: false,
     _self: initialResource._self,
     title: initialResource.name,
     types: initialResource['@type'],
     resource: ['public', 'sscx', initialResource['@id'], initialResource._rev],
   },
-  links: [],
-  shrinked: false,
-  highlightIndex: -1,
-  limited: false,
+  leftNodes: { links: [], shrinked: false },
+  rightNodes: { links: [], shrinked: false },
+  fullscreen: false,
 };
+
 describe('DataExplorerGraphFlow', () => {
+  let server: ReturnType<typeof setupServer>;
+  let app: JSX.Element;
+  let container: HTMLElement;
+  let rerender: (ui: React.ReactElement) => void;
   let store: Store<any, AnyAction>;
+  let user: UserEvent;
   let history: MemoryHistory<{}>;
-  let server: ReturnType<typeof setupServer>;
   let nexus: NexusClient;
+  let component: RenderResult;
+
   beforeAll(async () => {
     nexus = createNexusClient({
       fetch,
@@ -78,8 +87,15 @@ describe('DataExplorerGraphFlow', () => {
     cleanup();
   });
 
-  it('should render the name of the resource', async () => {
-    const App: JSX.Element = (
+  beforeEach(() => {
+    history = createMemoryHistory({});
+
+    nexus = createNexusClient({
+      fetch,
+      uri: deltaPath(),
+    });
+    store = configureStore(history, { nexus }, {});
+    app = (
       <Provider store={store}>
         <Router history={history}>
           <NexusProvider nexusClient={nexus}>
@@ -88,40 +104,33 @@ describe('DataExplorerGraphFlow', () => {
         </Router>
       </Provider>
     );
-    await act(async () => {
-      await render(App);
-    });
+    component = render(app);
+    container = component.container;
+    rerender = component.rerender;
+    user = userEvent.setup();
+  });
+
+  it('should render the name of the resource', async () => {
     store.dispatch(
       InitNewVisitDataExplorerGraphView({
         current: initialDataExplorerState.current,
-        limited: false,
+        fullscreen: false,
       })
     );
-
+    rerender(app);
     const resourceTitle = await waitFor(() =>
       screen.getByText(initialResource.name)
     );
     expect(resourceTitle).toBeInTheDocument();
   });
   it('should clean the data explorer state when quit the page', async () => {
-    const App: JSX.Element = (
-      <Provider store={store}>
-        <Router history={history}>
-          <NexusProvider nexusClient={nexus}>
-            <DateExplorerGraphFlow />
-          </NexusProvider>
-        </Router>
-      </Provider>
-    );
-    await act(async () => {
-      await render(App);
-    });
     store.dispatch(
       InitNewVisitDataExplorerGraphView({
         current: initialDataExplorerState.current,
-        limited: false,
+        fullscreen: false,
       })
     );
+    rerender(app);
     history.push('/another-page');
     const dataExplorerState = store.getState().dataExplorer;
     const sessionStorageItem = sessionStorage.getItem(
@@ -131,6 +140,26 @@ describe('DataExplorerGraphFlow', () => {
     expect(dataExplorerState.leftNodes.links.length).toBe(0);
     expect(dataExplorerState.rightNodes.links.length).toBe(0);
     expect(dataExplorerState.current).toBeNull();
-    expect(dataExplorerState.limited).toBe(false);
+    expect(dataExplorerState.fullscreen).toBe(false);
+  });
+
+  it('should the fullscren toggle present in the screen if the user in fullscreen mode', async () => {
+    store.dispatch(
+      InitNewVisitDataExplorerGraphView({
+        current: initialDataExplorerState.current,
+        fullscreen: true,
+      })
+    );
+    rerender(app);
+    const fullscreenSwitch = container.querySelector(
+      'button[aria-label="fullscreen switch"]'
+    );
+    const fullscreenTitle = container.querySelector(
+      'h1[aria-label="fullscreen title"]'
+    );
+    expect(fullscreenSwitch).toBeInTheDocument();
+    expect(fullscreenTitle).toBeInTheDocument();
+    await user.click(fullscreenSwitch as HTMLButtonElement);
+    expect(store.getState().dataExplorer.fullscreen).toBe(false);
   });
 });