From e27aa51b4d981ace847b960c28d09470c11f0a6b Mon Sep 17 00:00:00 2001
From: Manuel <30572287+manuel-rw@users.noreply.github.com>
Date: Sat, 4 Feb 2023 20:48:55 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20package=20attributes=20rea?=
 =?UTF-8?q?dout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/locales/en/settings/common.json        |  7 ++-
 .../Modals/AboutModal/AboutModal.tsx          |  1 +
 src/components/Settings/Common/Credits.tsx    | 51 +++++++++++++++++--
 .../zustands/usePackageAttributesStore.ts     |  2 +-
 src/tools/server/getPackageVersion.ts         | 24 ++++++---
 5 files changed, 73 insertions(+), 12 deletions(-)

diff --git a/public/locales/en/settings/common.json b/public/locales/en/settings/common.json
index 193f5195b..7908b2be8 100644
--- a/public/locales/en/settings/common.json
+++ b/public/locales/en/settings/common.json
@@ -9,7 +9,12 @@
     "configTip": "Upload your config file by drag and dropping it onto the page!"
   },
   "credits": {
-    "madeWithLove": "Made with ❤️ by @"
+    "madeWithLove": "Made with ❤️ by @",
+    "thirdPartyContent": "See third party content",
+    "thirdPartyContentTable": {
+      "dependencyName": "Dependency",
+      "dependencyVersion": "Version"
+    }
   },
   "grow": "Grow grid (take all space)",
   "layout": {
diff --git a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx
index 0ea10387c..b703f82a6 100644
--- a/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx
+++ b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx
@@ -90,6 +90,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
           ))}
         </tbody>
       </Table>
+
       <Divider variant="dashed" mb="md" />
       <Title order={6} mb="xs" align="center">
         {t('layout/modals/about:contact')}
diff --git a/src/components/Settings/Common/Credits.tsx b/src/components/Settings/Common/Credits.tsx
index e3867d710..e1fc8bd15 100644
--- a/src/components/Settings/Common/Credits.tsx
+++ b/src/components/Settings/Common/Credits.tsx
@@ -1,11 +1,13 @@
-import { Group, Anchor, Text } from '@mantine/core';
+import { Anchor, Box, Collapse, Flex, Table, Text } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
+import { usePackageAttributesStore } from '../../../tools/client/zustands/usePackageAttributesStore';
 
 export default function Credits() {
   const { t } = useTranslation('settings/common');
 
   return (
-    <Group position="center" mt="xs">
+    <Flex justify="center" direction="column" mt="xs">
       <Text
         style={{
           fontSize: '0.90rem',
@@ -22,6 +24,49 @@ export default function Credits() {
         </Anchor>{' '}
         and you!
       </Text>
-    </Group>
+      <DependencyTable />
+    </Flex>
   );
 }
+
+const DependencyTable = () => {
+  const { t } = useTranslation('settings/common');
+  const [opened, { toggle }] = useDisclosure(false);
+  const { attributes } = usePackageAttributesStore();
+  return (
+    <>
+      <Text variant="link" mx="auto" size="xs" opacity={0.3} onClick={toggle}>
+        {t('credits.thirdPartyContent')}
+      </Text>
+
+      <Collapse in={opened}>
+        <Box
+          sx={(theme) => ({
+            backgroundColor:
+              theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+            padding: theme.spacing.xl,
+            borderRadius: theme.radius.md,
+          })}
+          mt="md"
+        >
+          <Table>
+            <thead>
+              <tr>
+                <th>{t('credits.thirdPartyContentTable.dependencyName')}</th>
+                <th>{t('credits.thirdPartyContentTable.dependencyVersion')}</th>
+              </tr>
+            </thead>
+            {Object.keys(attributes.dependencies).map((key, index) => (
+              <tbody key={`dependency-${index}`}>
+                <tr>
+                  <td>{key}</td>
+                  <td>{attributes.dependencies[key]}</td>
+                </tr>
+              </tbody>
+            ))}
+          </Table>
+        </Box>
+      </Collapse>
+    </>
+  );
+};
diff --git a/src/tools/client/zustands/usePackageAttributesStore.ts b/src/tools/client/zustands/usePackageAttributesStore.ts
index 6d710997d..1949cacfd 100644
--- a/src/tools/client/zustands/usePackageAttributesStore.ts
+++ b/src/tools/client/zustands/usePackageAttributesStore.ts
@@ -8,7 +8,7 @@ interface PackageAttributesState {
 }
 
 export const usePackageAttributesStore = create<PackageAttributesState>((set) => ({
-  attributes: { packageVersion: undefined, environment: 'test' },
+  attributes: { packageVersion: undefined, environment: 'test', dependencies: {} },
   setInitialPackageAttributes(attributes) {
     set((state) => ({ ...state, attributes }));
   },
diff --git a/src/tools/server/getPackageVersion.ts b/src/tools/server/getPackageVersion.ts
index 0c74d56a7..dfbed1606 100644
--- a/src/tools/server/getPackageVersion.ts
+++ b/src/tools/server/getPackageVersion.ts
@@ -1,14 +1,24 @@
-const getServerPackageVersion = (): string | undefined => process.env.npm_package_version;
+import packageJson from '../../../package.json';
 
-const getServerNodeEnvironment = (): 'development' | 'production' | 'test' =>
-  process.env.NODE_ENV;
+const getServerPackageVersion = (): string | undefined => packageJson.version;
 
-export const getServiceSidePackageAttributes = (): ServerSidePackageAttributesType => ({
-  packageVersion: getServerPackageVersion(),
-  environment: getServerNodeEnvironment(),
-});
+const getServerNodeEnvironment = (): 'development' | 'production' | 'test' => process.env.NODE_ENV;
+
+const getDependencies = (): PackageJsonDependencies => packageJson.dependencies;
+
+export const getServiceSidePackageAttributes = (): ServerSidePackageAttributesType => {
+  const result = {
+    packageVersion: getServerPackageVersion(),
+    environment: getServerNodeEnvironment(),
+    dependencies: getDependencies(),
+  } as ServerSidePackageAttributesType;
+  return result;
+};
 
 export type ServerSidePackageAttributesType = {
   packageVersion: string | undefined;
   environment: 'development' | 'production' | 'test';
+  dependencies: PackageJsonDependencies;
 };
+
+type PackageJsonDependencies = { [key in string]: string };