FS-4943 designer UI issue (#102)

* FS-4943: fixing ui issues in the designer

* FS-4943: fix main UI changes in designer

Author: nuwan-samarasinghe

designer/client/AdapterDesigner.tsx

@@ -107,7 +107,7 @@ export default class AdapterDesigner extends Component<Props, State> {
                                 <Prompt when={!error} message={`${i18n("leaveDesigner")}`}
                                     //@ts-ignore
                                 /><AdapterMenu id={this.id} updateDownloadedAt={this.updateDownloadedAt}
-                                               //@ts-ignore
+                                //@ts-ignore
                                                updatePersona={this.updatePersona}/>
                                 <AdapterVisualisation downloadedAt={
                                     //@ts-ignore

designer/client/components/Visualization/AdapterVisualisation.tsx

@@ -4,8 +4,6 @@ import React, {useContext, useEffect, useRef, useState} from "react";
 import "../../../../digital-form-builder/designer/client/components/Visualisation/visualisation.scss";
 import {getLayout, Pos} from "../../../../digital-form-builder/designer/client/components/Visualisation/getLayout";
 import {AdapterPage} from "../Page";
-import {Info} from "../../../../digital-form-builder/designer/client/components/Visualisation/Info";
-import {Minimap} from "../../../../digital-form-builder/designer/client/components/Visualisation/Minimap";
 import {AdapterDataContext} from "../../context/AdapterDataContext";
 import {AdapterLines} from "./AdapterLines";
 
@@ -36,6 +34,7 @@ export const AdapterVisualisation = (props: Props) => {
 
     const {updatedAt, downloadedAt, previewUrl, persona, id} = props;
     const {pages} = data;
+    const scale = 0.05
 
     const wrapperStyle = layout && {
         width: layout?.width,
@@ -61,9 +60,48 @@ export const AdapterVisualisation = (props: Props) => {
                     </div>
                 </div>
 
-                {layout && <Info downloadedAt={downloadedAt} updatedAt={updatedAt}/>}
+                {layout &&
+                    <div style={{display: 'flex', justifyContent: 'space-between', width: '100%'}}>
+                        <div className="notification" style={{position: 'relative'}}>
+                            <p className="govuk-body">last downloaded at {downloadedAt}</p>
+                            <p className="govuk-body">last updated at {updatedAt}</p>
+                        </div>
+                        <div className="minimap" style={{position: 'relative'}}>
+                            <svg
+                                height={parseFloat(layout.height) * scale}
+                                width={parseFloat(layout.width) * scale}
+                            >
+                                {layout.edges.map((edge) => {
+                                    const points = edge.points
+                                        .map((points) => `${points.x * scale},${points.y * scale}`)
+                                        .join(" ");
+                                    return (
+                                        <g key={points}>
+                                            <polyline points={points}/>
+                                        </g>
+                                    );
+                                })}
 
-                {layout && <Minimap layout={layout}/>}
+                                {layout.nodes.map((node, index) => {
+                                    // @ts-ignore
+                                    return (
+                                        <g key={node + index}><a id={node + index} xlinkHref={`#${node.node.label}`}>
+                                            <rect
+                                                x={parseFloat(node.left) * scale}
+                                                y={parseFloat(node.top) * scale}
+                                                width={node.node.width * scale}
+                                                height={node.node.height * scale}
+                                                //@ts-ignore
+                                                title={node.node.label}
+                                            />
+                                        </a>
+                                        </g>
+                                    );
+                                })}
+                            </svg>
+                        </div>
+                    </div>
+                }
             </div>
         </>
     );

designer/client/components/menu/AdapterMenu.tsx

@@ -44,7 +44,7 @@ export default function AdapterMenu({updateDownloadedAt, id}: Props) {
     const {selectedTab, handleTabChange} = useTabs();
 
     return (
-        <nav className="menu">
+        <nav className="menu" style={{position: 'relative'}}>
             <div className="menu__row">
                 <button data-testid="menu-form-details" onClick={formDetails.show}>
                     {i18n("menu.formDetails")}

designer/client/index.tsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 import {LandingChoice, NewConfig} from "../../digital-form-builder/designer/client/pages/LandingPage";
 import {SaveError} from "../../digital-form-builder/designer/client/pages/ErrorPages";
 import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
-import { ViewFundForms } from "./pages/landing-page";
+import {ViewFundForms} from "./pages/landing-page";
 import AdapterDesigner from "./AdapterDesigner";
 import {adapterInitI18n} from "./i18n";
 
@@ -17,7 +17,7 @@ export class CustomApp extends React.Component {
     render() {
         return (
             <Router basename="/app">
-                <div id="app">
+                <div id="app" style={{overflow: 'auto'}}>
                     <Switch>
                         <Route path="/designer/:id" component={AdapterDesigner}/>
                         <Route path="/" exact>
@@ -27,7 +27,7 @@ export class CustomApp extends React.Component {
                             <NewConfig/>
                         </Route>
                         <Route path="/choose-existing" exact>
-                            <ViewFundForms />
+                            <ViewFundForms/>
                         </Route>
                         <Route path="/save-error" exact>
                             <SaveError/>