#1305 Fusion 1.8.4 from Develop

Fusion 1.8.4 from Develop

Author: bilalesi

src/__mocks__/handlers/ResourceEditor/handlers.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import DataExplorerResolverPage from '../../shared/canvas/DataExplorerGraphFlow/DateExplorerGraphFlow';
+
+const DataExplorerGraphFlowPage = () => {
+  return <DataExplorerResolverPage />;
+};
+
+export default DataExplorerGraphFlowPage;

src/pages/DataExplorerGraphFlowPage/DataExplorerGraphFlowPage.tsx

@@ -146,6 +146,13 @@ app.get('*', async (req: express.Request, res: express.Response) => {
     },
     search: DEFAULT_SEARCH_STATE,
     modals: DEFAULT_MODALS_STATE,
+    dataExplorer: {
+      current: null,
+      links: [],
+      shrinked: false,
+      limited: false,
+      highlightIndex: -1,
+    },
   };
 
   // render an HTML string of our app

src/server/index.tsx

@@ -20,6 +20,7 @@ import CreateProject from './modals/CreateProject/CreateProject';
 import CreateOrganization from './modals/CreateOrganization/CreateOrganization';
 import CreateStudio from './modals/CreateStudio/CreateStudio';
 import AppInfo from './modals/AppInfo/AppInfo';
+import ResolvedLinkEditorPopover from './molecules/ResolvedLinkEditorPopover/ResolvedLinkEditorPopover';
 import './App.less';
 
 const App: React.FC = () => {
@@ -52,13 +53,14 @@ const App: React.FC = () => {
         <FusionMainLayout environment={nexusEcosystem?.environment}>
           <SubAppsView routesWithSubApps={routesWithSubApps} />
           <AppInfo {...{ ...nexusEcosystem }} />
+          <ResolvedLinkEditorPopover />
+          <DataPanel />
           {userAuthenticated && (
             <React.Fragment>
               <GalleryView />
               <CreateProject />
               <CreateOrganization />
               <CreateStudio />
-              <DataPanel />
             </React.Fragment>
           )}
         </FusionMainLayout>

src/shared/App.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import DataExplorerContentPage from '../../organisms/DataExplorerGraphFlowContent/DataExplorerGraphFlowContent';
+import './styles.less';
+
+const DataExplorerResolverPage = () => {
+  return (
+    <div className="data-explorer-resolver">
+      <div className="degf__content">
+        <DataExplorerContentPage />
+      </div>
+    </div>
+  );
+};
+
+export default DataExplorerResolverPage;

src/shared/canvas/DataExplorerGraphFlow/DateExplorerGraphFlow.tsx

@@ -0,0 +1,12 @@
+@import '../../lib.less';
+
+.data-explorer-resolver {
+  width: 100%;
+  max-width: 100%;
+  align-items: flex-start;
+  justify-content: flex-start;
+  background-color: @fusion-main-bg;
+  display: grid;
+  grid-auto-columns: 1fr;
+  gap: 10px;
+}

src/shared/canvas/DataExplorerGraphFlow/styles.less

@@ -7,8 +7,9 @@ import { notification } from 'antd';
 import { isObject, isString } from 'lodash';
 
 import { MyDataHeader, MyDataTable } from '../../molecules';
-import { RootState } from '../../../shared/store/reducers';
+import { RootState } from '../../store/reducers';
 import { TDateFilterType, TFilterOptions } from './types';
+import './styles.less';
 
 const makeDatetimePattern = ({
   dateFilterType,

src/shared/canvas/MyData/MyData.tsx

@@ -0,0 +1,3 @@
+.home-mydata {
+  margin-top: 52px;
+}

src/shared/canvas/MyData/styles.less

@@ -3,7 +3,7 @@ import * as moment from 'moment';
 import { clsx } from 'clsx';
 import useDateTimeInputs from './useDateTimeInputs';
 import { DATE_PATTERN } from '../../canvas/MyData/types';
-import './styles.scss';
+import './styles.less';
 
 type TDate = {
   day: string;

src/shared/components/DateSeparatedInputs/DateSeparated.tsx

@@ -0,0 +1,31 @@
+.seperated-input-container {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(50px, 1fr));
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  .seperated-input {
+    margin: 10px 0;
+    outline: none !important;
+    border: none;
+    border-bottom: 1px solid #003a8c;
+    padding: 4px 4px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #003a8c;
+    &::-webkit-input-placeholder {
+      color: #d9d9d9;
+    }
+    &:focus {
+      border-bottom: 1.8px solid #003a8c;
+    }
+    &:not(:placeholder-shown) {
+      text-align: center;
+      border-bottom: 2px solid #003a8c;
+      font-weight: 700;
+    }
+    &.error {
+      border-bottom: 1.8px solid red;
+    }
+  }
+}