🐛 Fix package attributes readout

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": {

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')}

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>
+    </>
+  );
+};

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 }));
   },

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 => ({
+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 };