feat: Add link for github page

DSD-DBS · Jun 27, 2024 · aa90ef6 · aa90ef6
1 parent 2093437
commit aa90ef6
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 85 deletions.
diff --git a/frontend/src/components/AppInfo.jsx b/frontend/src/components/AppInfo.jsx
@@ -0,0 +1,37 @@
+// Copyright DB InfraGO AG and contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState, useEffect } from 'react';
+import { ROUTE_PREFIX } from '../APIConfig';
+import { SquareMousePointer } from 'lucide-react';
+
+export const AppInfo = () => {
+  const [currentVersion, setcurrentVersion] = useState(null);
+
+  useEffect(() => {
+    fetch(`${ROUTE_PREFIX}/static/version.json`)
+      .then((response) => response.json())
+      .then((data) => setcurrentVersion(data.git))
+      .catch((error) => {
+        console.error(error);
+        setcurrentVersion({ version: 'Fetch failed' });
+      });
+  }, []);
+
+  return (
+    <div className="text-gray-500 dark:text-gray-300 print:hidden">
+      {currentVersion && <p>Version: {currentVersion.version}</p>}
+      <a
+        href="https://github.com/DSD-DBS/capella-model-explorer"
+        target="_blank"
+        className="text-custom-blue hover:text-custom-blue-hover">
+        Contribute on GitHub
+        <SquareMousePointer
+          className="
+          ml-1 inline-block h-4 w-4 text-custom-blue
+          hover:text-custom-blue-hover"
+        />
+      </a>
+    </div>
+  );
+};
diff --git a/frontend/src/components/InstanceView.jsx b/frontend/src/components/InstanceView.jsx
@@ -5,7 +5,7 @@ import { useEffect, useRef, useState } from 'react';
 import { SVGDisplay } from './SVGDisplay';
 import { Spinner } from './Spinner';
 import { Printer } from 'lucide-react';
-import { SoftwareVersion } from './SoftwareVersion';
+import { AppInfo } from './AppInfo';
 
 export const InstanceView = ({ templateName, objectID, endpoint }) => {
   const [details, setDetails] = useState([]);
@@ -112,7 +112,7 @@ export const InstanceView = ({ templateName, objectID, endpoint }) => {
         })}
       </div>
       <div className="my-8 text-center 3xl:hidden">
-        <SoftwareVersion />
+        <AppInfo />
       </div>
     </>
   );

diff --git a/frontend/src/components/SoftwareVersion.jsx b/frontend/src/components/SoftwareVersion.jsx
diff --git a/frontend/src/views/HomeView.jsx b/frontend/src/views/HomeView.jsx
@@ -1,11 +1,10 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useState, useEffect } from "react";
-import { WiredTemplatesList } from "../components/WiredTemplatesList";
-import { API_BASE_URL } from "../APIConfig";
-import { ThemeSwitcher } from "../components/ThemeSwitcher";
-import { SoftwareVersion } from "../components/SoftwareVersion";
+import React, { useState, useEffect } from 'react';
+import { WiredTemplatesList } from '../components/WiredTemplatesList';
+import { API_BASE_URL } from '../APIConfig';
+import { AppInfo } from '../components/AppInfo';
 
 export const HomeView = () => {
   const [modelInfo, setModelInfo] = useState(null);
@@ -14,21 +13,24 @@ export const HomeView = () => {
   useEffect(() => {
     const fetchModelInfo = async () => {
       try {
-        const response = await fetch(API_BASE_URL + "/model-info");
+        const response = await fetch(API_BASE_URL + '/model-info');
         const data = await response.json();
         setModelInfo(data);
       } catch (err) {
-        setError("Failed to fetch model info: " + err.message);
+        setError('Failed to fetch model info: ' + err.message);
       }
-      document.body.style.height = "auto";
+      document.body.style.height = 'auto';
     };
 
     fetchModelInfo();
   }, []);
 
   if (error) {
     return (
-      <div className="rounded bg-red-500 p-2 text-xl text-white dark:bg-custom-dark-error">
+      <div
+        className="
+        rounded bg-red-500 p-2 text-xl text-white
+        dark:bg-custom-dark-error">
         {error}
       </div>
     );
@@ -38,7 +40,10 @@ export const HomeView = () => {
     <div className="mb-8 flex-col overflow-auto p-4">
       <div className="flex w-full items-center justify-center px-4">
         {modelInfo && (
-          <div className="rounded-lg bg-gray-100 p-4 text-gray-700 shadow-lg dark:bg-custom-dark-3 dark:text-gray-100 md:mx-auto">
+          <div
+            className="
+            rounded-lg bg-gray-100 p-4 text-gray-700 shadow-lg
+            dark:bg-custom-dark-3 dark:text-gray-100 md:mx-auto">
             <h2 className="text-xl">{modelInfo.title}</h2>
             {modelInfo.capella_version && (
               <p>Capella Version: {modelInfo.capella_version}</p>
@@ -48,16 +53,18 @@ export const HomeView = () => {
             {modelInfo.hash && <p>Commit Hash: {modelInfo.hash}</p>}
             <div
               className="hidden md:block"
-              dangerouslySetInnerHTML={{ __html: modelInfo.badge }}
-            ></div>
+              dangerouslySetInnerHTML={{ __html: modelInfo.badge }}></div>
           </div>
         )}
       </div>
       <div className="mt-4">
         <WiredTemplatesList />
       </div>
-      <div className="mt-8 text-center 3xl:fixed 3xl:bottom-4 3xl:left-4 3xl:block 3xl:text-left">
-        <SoftwareVersion />
+      <div
+        className="
+        mt-10 text-center 3xl:fixed 3xl:bottom-4 3xl:left-4 3xl:block
+        3xl:text-left">
+        <AppInfo />
       </div>
     </div>
   );

diff --git a/frontend/src/views/TemplateView.jsx b/frontend/src/views/TemplateView.jsx
@@ -9,27 +9,27 @@ selected we show a hint to select one.
 
 */
 
-import React, { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
-import { useMediaQuery } from "react-responsive";
-import { Header } from "../components/Header";
-import { InstanceView } from "../components/InstanceView";
-import { TemplateDetails } from "../components/TemplateDetails";
-import { SoftwareVersion } from "../components/SoftwareVersion";
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useMediaQuery } from 'react-responsive';
+import { Header } from '../components/Header';
+import { InstanceView } from '../components/InstanceView';
+import { TemplateDetails } from '../components/TemplateDetails';
+import { AppInfo } from '../components/AppInfo';
 
 export const TemplateView = ({ endpoint }) => {
   let { templateName, objectID } = useParams();
   const [singleObjectID, setObjectID] = useState(null);
-  const isSmallScreen = useMediaQuery({ query: "(max-width: 1080px)" });
+  const isSmallScreen = useMediaQuery({ query: '(max-width: 1080px)' });
   const [isSidebarVisible, setIsSidebarVisible] = useState(!isSmallScreen);
 
   useEffect(() => {
-    document.body.style.overflow = "hidden";
-    document.documentElement.style.overflow = "hidden";
+    document.body.style.overflow = 'hidden';
+    document.documentElement.style.overflow = 'hidden';
 
     return () => {
-      document.body.style.overflow = "";
-      document.documentElement.style.overflow = "";
+      document.body.style.overflow = '';
+      document.documentElement.style.overflow = '';
     };
   }, []);
   useEffect(() => {
@@ -54,25 +54,26 @@ export const TemplateView = ({ endpoint }) => {
       {isSmallScreen && (
         <button
           onClick={toggleSidebar}
-          className={`
+          className="
           text-md fixed left-1/2 top-16 z-20 m-4 flex h-10 w-auto
           -translate-x-1/2 cursor-pointer items-center justify-center
           rounded-b-md border-2 border-gray-900 bg-custom-blue p-2 px-4
           text-white transition-transform duration-500 ease-in-out
           hover:bg-custom-blue-hover focus:outline-none
-          dark:border-white print:hidden
-        `}
-        >
-          {isSidebarVisible ? "Collapse Sidebar" : "Expand Sidebar"}
+          dark:border-white print:hidden">
+          {isSidebarVisible ? 'Collapse Sidebar' : 'Expand Sidebar'}
         </button>
       )}
       <div className="flex">
         <div
-          className={`z-19 mt-32 flex min-w-80 transform flex-col items-center md:mr-8 md:mt-20 print:hidden ${
-            isSidebarVisible ? "mr-8 translate-y-0" : "hidden"
-          }`}
-        >
-          <aside className="h-auto flex-col overflow-y-auto rounded-lg shadow-lg dark:shadow-dark print:hidden">
+          className={`z-19 mt-32 flex min-w-80 transform flex-col items-center
+             md:mr-8 md:mt-20 print:hidden ${
+               isSidebarVisible ? 'mr-8 translate-y-0' : 'hidden'
+             }`}>
+          <aside
+            className="
+            h-auto flex-col overflow-y-auto rounded-lg
+            shadow-lg dark:shadow-dark print:hidden">
             <TemplateDetails
               endpoint={endpoint}
               onSingleInstance={setObjectID}
@@ -84,15 +85,20 @@ export const TemplateView = ({ endpoint }) => {
           <div className="overflow-y-auto md:w-screen">
             {!objectID && !singleObjectID && (
               <p
-                className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform text-xl text-gray-700 dark:text-gray-300 ${
-                  isSidebarVisible && isSmallScreen ? "hidden" : ""
-                }`}
-              >
+                className={`
+                  absolute left-1/2 top-1/2 -translate-x-1/2
+                  -translate-y-1/2 transform text-xl text-gray-700
+                 dark:text-gray-300 ${
+                   isSidebarVisible && isSmallScreen ? 'hidden' : ''
+                 }`}>
                 Select an Instance
               </p>
             )}
             <div className="relative flex flex-1 md:ml-12 md:mr-12">
-              <div className="html-wrapper relative flex h-screen items-center justify-center pt-32 print:pt-0">
+              <div
+                className="
+                html-wrapper relative flex h-screen items-center justify-center
+                pt-32 print:pt-0">
                 {(objectID || singleObjectID) && (
                   <div className="m-auto mx-auto box-border">
                     <InstanceView
@@ -107,9 +113,22 @@ export const TemplateView = ({ endpoint }) => {
           </div>
         </main>
       </div>
-      <div className="hidden text-center 3xl:fixed 3xl:bottom-4 3xl:left-4 3xl:mb-0 3xl:mt-0 3xl:block 3xl:text-left">
-        <SoftwareVersion />
-      </div>
+      {!objectID && !singleObjectID ? (
+        <div
+          className={`
+          fixed bottom-4 left-1/2 mb-0 -translate-x-1/2 text-center
+          3xl:left-4 3xl:translate-x-0 3xl:text-left
+          `}>
+          <AppInfo />
+        </div>
+      ) : (
+        <div
+          className="
+          hidden text-center  3xl:fixed 3xl:bottom-4 3xl:left-4 3xl:mb-0
+          3xl:mt-0 3xl:block 3xl:text-left">
+          <AppInfo />
+        </div>
+      )}
     </div>
   );
 };