fix: failing build caused by remark-mdx

packages/dashboard/package.json

@@ -97,6 +97,7 @@
     "msw": "^1.0.0",
     "next-router-mock": "^0.8.0",
     "nodemon": "^2.0.15",
+    "prettier": "^2.8.4",
     "prisma": "^4.8.0",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",

packages/dashboard/src/client/components/Markdown/Markdown.tsx

@@ -1,8 +1,8 @@
+import clsx from 'clsx';
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
-import remarkMdx from 'remark-mdx';
 
 const MarkdownImg = (props: Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'key' | keyof React.ImgHTMLAttributes<HTMLImageElement>>) => (
   <div className="d-flex justify-content-center">
@@ -13,9 +13,8 @@ const MarkdownImg = (props: Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes
 
 const Markdown: React.FC<{ children: string; className: string }> = ({ children, className }) => (
   <ReactMarkdown
-    className={className}
+    className={clsx('markdown', className)}
     components={{
-      // h1: (props) => <h1 {...props} className="text-2xl font-bold mb-4 text-center md:text-left" />,
       // h2: (props) => <h2 {...props} className="text-xl font-bold mb-4 text-center md:text-left" />,
       // h3: (props) => <h3 {...props} className="text-lg font-bold mb-4 text-center md:text-left" />,
       // ul: (props) => <ul {...props} className="list-disc pl-4 mb-4" />,
@@ -24,7 +23,7 @@ const Markdown: React.FC<{ children: string; className: string }> = ({ children,
       // a: (props) => <a target="_blank" rel="noreferrer" {...props} className="text-blue-500" href={props.href} />,
       // div: (props) => <div {...props} className="mb-4" />,
     }}
-    remarkPlugins={[remarkBreaks, remarkGfm, remarkMdx]}
+    remarkPlugins={[remarkBreaks, remarkGfm]}
   >
     {children}
   </ReactMarkdown>

packages/dashboard/src/client/modules/Apps/components/AppDetailsTabs.tsx

@@ -38,7 +38,7 @@ export const AppDetailsTabs: React.FC<IProps> = ({ info }) => (
               </a>
             </DataGridItem>
             <DataGridItem title="Author">{info.author}</DataGridItem>
-            <DataGridItem title="Port">{info.port}</DataGridItem>
+            <DataGridItem title="Port"><b>{info.port}</b></DataGridItem>
             <DataGridItem title="Categories">
               {info.categories.map((c) => (
                 <div key={c} className="badge bg-green me-1">
@@ -47,7 +47,13 @@ export const AppDetailsTabs: React.FC<IProps> = ({ info }) => (
               ))}
             </DataGridItem>
             <DataGridItem title="Version">{info.version}</DataGridItem>
-            {info.supported_architectures && <DataGridItem title="Supported architectures">{info.supported_architectures}</DataGridItem>}
+            {info.supported_architectures && <DataGridItem title="Supported architectures">{info.supported_architectures.map(
+              (a) => (
+                <div key={a} className="badge bg-red me-1">
+                  {a.toLowerCase()}
+                </div>
+              ),
+            )}</DataGridItem>}
           </DataGrid>
         </div>
       </div>

packages/dashboard/src/server/services/system/system.service.test.ts

@@ -6,7 +6,6 @@ import { setConfig } from '../../core/TipiConfig';
 import TipiCache from '../../core/TipiCache';
 import { SystemServiceClass } from '.';
 
-jest.mock('axios');
 jest.mock('redis');
 
 const SystemService = new SystemServiceClass();

packages/dashboard/tests/TRPCTestClientProvider.tsx

@@ -40,6 +40,8 @@ export function TRPCTestClientProvider(props: { children: React.ReactNode }) {
         httpLink({
           url: 'http://localhost:3000/api/trpc',
           fetch: async (input, init?) =>
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore - isomorphic-fetch is missing the `signal` option
             fetch(input, {
               ...init,
             }),

packages/dashboard/tests/client/jest.setup.tsx

@@ -12,7 +12,6 @@ jest.mock('react-markdown', () => ({
 }));
 jest.mock('remark-breaks', () => () => ({}));
 jest.mock('remark-gfm', () => () => ({}));
-jest.mock('remark-mdx', () => () => ({}));
 
 console.error = jest.fn();