🚧 WIP on adding docker containers to boards

src/components/layout/Templates/BoardLayout.tsx

@@ -16,7 +16,7 @@ import { Trans, useTranslation } from 'next-i18next';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { env } from 'process';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
 import { useNamedWrapperColumnCount } from '~/components/Dashboard/Wrappers/gridstack/store';
 import ContainerActionBar from '~/components/Manage/Tools/Docker/ContainerActionBar';
@@ -30,14 +30,15 @@ import { MainLayout } from './MainLayout';
 
 type BoardLayoutProps = {
   children: React.ReactNode;
+  isDockerEnabled?: boolean;
 };
 
-export const BoardLayout = ({ children }: BoardLayoutProps) => {
+export const BoardLayout = ({ children, isDockerEnabled = false }: BoardLayoutProps) => {
   const { config } = useConfigContext();
   const { data: session } = useSession();
 
   return (
-    <MainLayout autoFocusSearch={session?.user.autoFocusSearch} headerActions={<HeaderActions />}>
+    <MainLayout autoFocusSearch={session?.user.autoFocusSearch} headerActions={<HeaderActions isDockerEnabled={isDockerEnabled} />}>
       <BoardHeadOverride />
       <BackgroundImage />
       {children}
@@ -46,7 +47,7 @@ export const BoardLayout = ({ children }: BoardLayoutProps) => {
   );
 };
 
-export const HeaderActions = () => {
+export const HeaderActions = ({isDockerEnabled = false} : { isDockerEnabled: boolean}) => {
   const { data: sessionData } = useSession();
 
   if (!sessionData?.user?.isAdmin) return null;
@@ -54,7 +55,7 @@ export const HeaderActions = () => {
   return (
     <>
       <ToggleEditModeButton />
-      <DockerButton />
+      {isDockerEnabled && <DockerButton />}
       <CustomizeBoardButton />
     </>
   );

src/pages/board/index.tsx

@@ -1,4 +1,3 @@
-import Consola from 'consola';
 import { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next';
 import { SSRConfig } from 'next-i18next';
 import { Dashboard } from '~/components/Dashboard/Dashboard';
@@ -16,19 +15,19 @@ import { api } from '~/utils/api';
 
 export default function BoardPage({
   config: initialConfig,
-  dockerIsConfigured,
+  isDockerEnabled,
   initialContainers,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   useInitConfig(initialConfig);
   const { data } = api.docker.containers.useQuery(undefined, {
-    initialData: initialContainers,
+    initialData: initialContainers ?? undefined,
-    enabled: dockerIsConfigured,
+    enabled: isDockerEnabled,
     cacheTime: 60 * 1000 * 5,
     staleTime: 60 * 1000 * 1,
   });
 
   return (
-    <BoardLayout>
+    <BoardLayout isDockerEnabled={isDockerEnabled}>
       <Dashboard />
     </BoardLayout>
   );
@@ -68,7 +67,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   try {
     if (session?.user.isAdmin == true) containers = await caller.containers();
   } catch (error) {
-    Consola.error(`The docker integration failed with the following error: ${error}`);
+    
   }
   return {
     props: {
@@ -76,8 +75,8 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       primaryColor: config.settings.customization.colors.primary,
       secondaryColor: config.settings.customization.colors.secondary,
       primaryShade: config.settings.customization.colors.shade,
-      dockerIsConfigured: containers != undefined,
+      isDockerEnabled: containers != undefined,
-      initialContainers: containers,
+      initialContainers: containers ?? null,
       ...translations,
     },
   };