feat: add in the files iframe

Author: jaypyles

api/backend/configs/commands.py

@@ -41,6 +41,11 @@ def create_config_file(filename: str, config: Schema):
         yaml.dump(filtered_config, f, default_flow_style=False, sort_keys=False)
 
 
+def read_yaml_file(filename: str):
+    with open(filename, "r") as f:
+        return yaml.load(f, Loader=yaml.FullLoader)
+
+
 def get_config_file_for_read(host: str):
     config = utils.read(f"./configs/{host}.yml")
     config.host.username = "user"

api/backend/configs/models.py

@@ -0,0 +1,5 @@
+from pydantic import BaseModel
+
+
+class AppConfig(BaseModel):
+    files_url: str

api/backend/routers/config.py

@@ -9,9 +9,19 @@
 from api.backend.host_manager import HOST_MAP
 from api.backend.logging import LOG
 
+from api.backend.configs.models import AppConfig
+
 config_router = APIRouter()
 
 
+@config_router.get("/api/app-config")
+async def get_app_config():
+    config = yaml_utils.read_yaml_file("./configs/app-config/app-config.yml")
+    app_config = AppConfig(files_url=config["files_url"])
+
+    return JSONResponse(app_config.model_dump())
+
+
 @config_router.post("/api/config")
 async def create_config(build_config: BuildConfigFile):
     try:

src/app/store.ts

@@ -1,9 +1,11 @@
 import { configureStore } from "@reduxjs/toolkit";
 import integrationsReducer from "@/lib/slices/integrations";
 import settingsReducer from "@/lib/slices/settings";
+import appConfigReducer from "@/lib/slices/app-config";
 
 export const store = configureStore({
   reducer: {
+    appConfig: appConfigReducer,
     integrations: integrationsReducer,
     settings: settingsReducer,
   },

src/components/dashboard/controls/files/files.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { IconButton } from "@mui/material";
+import React, { useState, useEffect } from "react";
+import FindInPageIcon from "@mui/icons-material/FindInPage";
+import { useRouter } from "next/navigation";
+import { useAppConfig } from "@/lib/hooks/use-app-config";
+
+export type FilesProps = {
+  className?: string;
+};
+
+export const Files = ({ className }: FilesProps) => {
+  const router = useRouter();
+  const { appConfig } = useAppConfig();
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) return null;
+
+  return appConfig.filesUrl ? (
+    <div className={className}>
+      <IconButton component="span" onClick={() => router.push("/files")}>
+        <FindInPageIcon />
+      </IconButton>
+    </div>
+  ) : null;
+};

src/components/dashboard/controls/files/index.ts

@@ -0,0 +1 @@
+export * from "./files";

src/components/dashboard/dashboard.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { fetchAndSet } from "@/lib/utils";
-import { Container, Grid } from "@mui/material";
+import { Container } from "@mui/material";
 import classes from "./dashboard.module.css";
 import HostOverview from "@/components/shared/host-overview/host-overview";
 import { useRouter } from "next/router";

src/lib/hooks/use-app-config.ts

@@ -0,0 +1,16 @@
+import { RootState } from "@/app";
+import { useSelector } from "react-redux";
+import { AppConfig } from "../services/app-config/app-config.types";
+import { setAppConfig } from "../slices/app-config";
+import { useDispatch } from "react-redux";
+
+export const useAppConfig = () => {
+  const dispatch = useDispatch();
+  const appConfig = useSelector((state: RootState) => state.appConfig);
+
+  return {
+    appConfig,
+    setNewAppConfig: (appConfig: AppConfig) =>
+      dispatch(setAppConfig(appConfig)),
+  };
+};

src/lib/services/app-config/app-config.types.ts

@@ -0,0 +1,7 @@
+export type ServerAppConfig = {
+  files_url: string;
+};
+
+export type AppConfig = {
+  filesUrl: string;
+};

src/lib/services/app-config/functions/index.ts

@@ -0,0 +1 @@
+export * from "./read-config";