diff --git a/frontend/package-lock.json b/frontend/package-lock.json index f3f0d70..380544c 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,6 +8,7 @@ "name": "frontend", "version": "0.0.0", "dependencies": { + "@icons-pack/react-simple-icons": "^10.0.0", "lucide-react": "^0.439.0", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -2531,6 +2532,14 @@ "deprecated": "Use @eslint/object-schema instead", "dev": true }, + "node_modules/@icons-pack/react-simple-icons": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/@icons-pack/react-simple-icons/-/react-simple-icons-10.0.0.tgz", + "integrity": "sha512-oU0PVDx9sbNQjRxJN555dsHbRApYN+aBq/O9+wo3JgNkEfvBMgAEtsSGtXWWXQsLAxJcYiFOCzBWege/Xj/JFQ==", + "peerDependencies": { + "react": "^16.13 || ^17 || ^18" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index 1609fed..7f9e643 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,6 +13,7 @@ "format": "prettier --write ./**/*.{js,jsx,ts,tsx,css,md,json} --config ./.prettierrc.json" }, "dependencies": { + "@icons-pack/react-simple-icons": "^10.0.0", "lucide-react": "^0.439.0", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/frontend/src/components/AppInfo.jsx b/frontend/src/components/AppInfo.jsx new file mode 100644 index 0000000..0004e08 --- /dev/null +++ b/frontend/src/components/AppInfo.jsx @@ -0,0 +1,35 @@ +// Copyright DB InfraGO AG and contributors +// SPDX-License-Identifier: Apache-2.0 + +import { useState, useEffect } from 'react'; +import { ROUTE_PREFIX } from '../APIConfig'; +import { SiGithub } from '@icons-pack/react-simple-icons'; + +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 ( +
+ {currentVersion &&

Version: {currentVersion.version}

} + + Contribute on GitHub +
+ +
+ +
+ ); +}; diff --git a/frontend/src/components/InstanceView.jsx b/frontend/src/components/InstanceView.jsx index 425a65b..7c291d3 100644 --- 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 }) => { })}
- +
); diff --git a/frontend/src/components/SoftwareVersion.jsx b/frontend/src/components/SoftwareVersion.jsx deleted file mode 100644 index 8b9e0e0..0000000 --- a/frontend/src/components/SoftwareVersion.jsx +++ /dev/null @@ -1,39 +0,0 @@ -// Copyright DB InfraGO AG and contributors -// SPDX-License-Identifier: Apache-2.0 - -import { useState, useEffect } from 'react'; -import { API_BASE_URL, ROUTE_PREFIX } from '../APIConfig'; - -export const SoftwareVersion = () => { - const [frontendVersion, setFrontendVersion] = useState(null); - const [backendVersion, setBackendVersion] = useState(null); - - useEffect(() => { - fetch(`${ROUTE_PREFIX}/static/version.json`) - .then((response) => response.json()) - .then((data) => setFrontendVersion(data.git)) - .catch((error) => { - console.error(error); - setFrontendVersion({ version: 'Fetch failed' }); - }); - }, []); - - useEffect(() => { - fetch(`${API_BASE_URL}/metadata`) - .then((response) => response.json()) - .then((data) => setBackendVersion(data.version)) - .catch((error) => { - console.error(error); - setBackendVersion('Fetch failed'); - }); - }, []); - - return ( -
- {frontendVersion && ( -

Frontend Version: {frontendVersion.version}

- )} - {backendVersion &&

Backend Version: {backendVersion}

} -
- ); -}; diff --git a/frontend/src/views/HomeView.jsx b/frontend/src/views/HomeView.jsx index 31a2977..981d224 100644 --- a/frontend/src/views/HomeView.jsx +++ b/frontend/src/views/HomeView.jsx @@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react'; import { WiredTemplatesList } from '../components/WiredTemplatesList'; import { API_BASE_URL } from '../APIConfig'; -import { SoftwareVersion } from '../components/SoftwareVersion'; +import { AppInfo } from '../components/AppInfo'; import { ModelDiff } from '../components/ModelDiff'; export const HomeView = () => { @@ -127,8 +127,8 @@ export const HomeView = () => {
-
- +
+
); diff --git a/frontend/src/views/TemplateView.jsx b/frontend/src/views/TemplateView.jsx index 2025049..4c6e020 100644 --- a/frontend/src/views/TemplateView.jsx +++ b/frontend/src/views/TemplateView.jsx @@ -15,7 +15,7 @@ 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 { AppInfo } from "../components/AppInfo"; export const TemplateView = ({ endpoint }) => { let { templateName, objectID } = useParams(); @@ -107,9 +107,15 @@ export const TemplateView = ({ endpoint }) => { -
- -
+ {!objectID && !singleObjectID ? ( +
+ +
+ ) : ( +
+ +
+ )} ); };