feat: project config view

Author: RonenMars

src/assets/image/icons/index.ts

@@ -106,16 +106,8 @@ export { default as HistoryIcon } from "@assets/image/icons/History.svg?react";
 export { default as LaptopIcon } from "@assets/image/icons/Laptop.svg?react";
 export { default as SendIcon } from "@assets/image/icons/Send.svg?react";
 // Project Config Accordion Icons - Taken from: https://fontawesome.com License - https://fontawesome.com/license/free
-// Taken from: https://fontawesome.com/icons/book-open?f=classic&s=solid
-export { default as BookOpenIcon } from "@assets/image/icons/BookOpen.svg?react";
 // Taken from: https://fontawesome.com/icons/book?f=classic&s=solid
 export { default as BookClosedIcon } from "@assets/image/icons/BookClosed.svg?react";
-// Taken from: https://fontawesome.com/icons/folder-open?f=classic&s=solid
-export { default as FilesFolderIcon } from "@assets/image/icons/FilesFolder.svg?react";
-// Taken from: https://fontawesome.com/icons/folder?f=classic&s=solid
-export { default as FilesFolderClosedIcon } from "@assets/image/icons/FilesFolderClosed.svg?react";
-// Taken from: https://fontawesome.com/icons/plug?f=classic&s=solid
-export { default as ConnectionPlugIcon } from "@assets/image/icons/ConnectionPlug.svg?react";
 // Taken from: https://fontawesome.com/icons/link?f=classic&s=solid
 export { default as ConnectionUnplugIcon } from "@assets/image/icons/ConnectionUnplug.svg?react";
 // Taken from: https://tabler.io/icons/icon/variable
@@ -124,5 +116,3 @@ export { default as VariableCodeIcon } from "@assets/image/icons/VariableCode.sv
 export { default as VariableCircleIcon } from "@assets/image/icons/VariableCircle.svg?react";
 // Taken from: https://fontawesome.com/icons/bolt?f=classic&s=solid
 export { default as TriggerBoltIcon } from "@assets/image/icons/TriggerBolt.svg?react";
-// Taken from: https://fontawesome.com/icons/flag?f=classic&s=solid
-export { default as TriggerFlagIcon } from "@assets/image/icons/TriggerFlag.svg?react";

src/components/organisms/chatbotIframe/chatbotIframe.tsx

@@ -13,13 +13,7 @@ import { aiChatbotUrl, defaultOpenedProjectFile, descopeProjectId, isDevelopment
 import { EventListenerName } from "@src/enums";
 import { triggerEvent, useChatbotIframeConnection, useEventListener } from "@src/hooks";
 import { ChatbotIframeProps } from "@src/interfaces/components";
-import {
-	useDrawerStore,
-	useOrganizationStore,
-	useProjectStore,
-	useSharedBetweenProjectsStore,
-	useToastStore,
-} from "@src/store";
+import { useOrganizationStore, useProjectStore, useSharedBetweenProjectsStore, useToastStore } from "@src/store";
 import { MessageTypes } from "@src/types/iframeCommunication.type";
 import {
 	cn,
@@ -77,14 +71,9 @@ export const ChatbotIframe = ({
 	const currentOrganization = useOrganizationStore((state) => state.currentOrganization);
 	const setExpandedProjectNavigation = useSharedBetweenProjectsStore((state) => state.setExpandedProjectNavigation);
 	const selectionPerProject = useSharedBetweenProjectsStore((state) => state.selectionPerProject);
-	const { isDrawerOpen } = useDrawerStore();
 	const [retryToastDisplayed, setRetryToastDisplayed] = useState(false);
 	const [chatbotUrlWithOrgId, setChatbotUrlWithOrgId] = useState("");
 
-	const currentProjectConfigMode = useMemo(() => {
-		return isDrawerOpen("projectConfig");
-	}, [isDrawerOpen]);
-
 	const [cacheBuster] = useState(() => Date.now().toString());
 
 	const computedChatbotUrl = useMemo(() => {
@@ -98,15 +87,14 @@ export const ChatbotIframe = ({
 			params.append("bg-color", "1b1b1b");
 		}
 		if (projectId) {
-			params.append("config-mode", currentProjectConfigMode ? "true" : "false");
 			params.append("project-id", projectId);
 		}
 		if (displayDeployButton) {
 			params.append("display-deploy-button", displayDeployButton ? "true" : "false");
 		}
 		params.append("_cb", cacheBuster);
 		return `${aiChatbotUrl}?${params.toString()}`;
-	}, [currentOrganization?.id, currentProjectConfigMode, projectId, displayDeployButton, isTransparent, cacheBuster]);
+	}, [currentOrganization?.id, projectId, displayDeployButton, isTransparent, cacheBuster]);
 
 	useEffect(() => {
 		if (!computedChatbotUrl || computedChatbotUrl === chatbotUrlWithOrgId) return;
@@ -242,9 +230,7 @@ export const ChatbotIframe = ({
 	}, [location.pathname, location.search, location.hash]);
 
 	// Memoized computed values for performance
-	const frameTitle = useMemo(() => {
-		return currentProjectConfigMode ? t("titles.projectStatus") : t("titles.aiAssistant");
-	}, [currentProjectConfigMode, t]);
+	const frameTitle = t("titles.aiAssistant");
 
 	const frameClass = useMemo(() => {
 		return cn("flex size-full flex-col items-center justify-center rounded-xl bg-gray-1100", {

src/components/organisms/code/table.tsx

@@ -288,9 +288,9 @@ export const CodeTable = () => {
 				</div>
 			</div>
 
-			{/* <DeleteFileModal isDeleting={isDeleting} onDelete={handleRemoveFile} /> */}
+			<DeleteFileModal isDeleting={isDeleting} onDelete={handleRemoveFile} />
 
-			{/* <AddFileModal /> */}
+			<AddFileModal />
 		</div>
 	);
 };

src/components/organisms/editorTabs.tsx

@@ -27,13 +27,13 @@ import {
 import { MessageTypes } from "@src/types";
 import { Project } from "@src/types/models";
 import { OperationType } from "@type/global";
-import { cn, getPreference } from "@utilities";
+import { getPreference } from "@utilities";
 
-import { Button, IconButton, IconSvg, Loader, MermaidDiagram, Spinner, Tab, Typography } from "@components/atoms";
+import { Button, IconSvg, Loader, MermaidDiagram, Spinner, Tab, Typography } from "@components/atoms";
 import { CodeFixDiffEditorModal } from "@components/organisms";
 
 import { AKRoundLogo } from "@assets/image";
-import { Close, SaveIcon } from "@assets/image/icons";
+import { SaveIcon } from "@assets/image/icons";
 
 export const EditorTabs = () => {
 	const { projectId } = useParams() as { projectId: string };
@@ -68,10 +68,9 @@ export const EditorTabs = () => {
 	}, [projectId]);
 
 	const addToast = useToastStore((state) => state.addToast);
-	const { openFiles, openFileAsActive, closeOpenedFile } = useFileStore();
+	const { openFiles, openFileAsActive } = useFileStore();
 	const { openModal, closeModal } = useModalStore();
-	const { cursorPositionPerProject, setCursorPosition, selectionPerProject, fullScreenEditor, setFullScreenEditor } =
-		useSharedBetweenProjectsStore();
+	const { cursorPositionPerProject, setCursorPosition, selectionPerProject } = useSharedBetweenProjectsStore();
 
 	let activeFile = openFiles[projectId]?.find((f: { isActive: boolean }) => f.isActive);
 	let activeEditorFileName = activeFile?.name || "";
@@ -138,7 +137,7 @@ export const EditorTabs = () => {
 	useEffect(() => {
 		if (location.state?.revealStatusSidebar) {
 			setTimeout(() => {
-				triggerEvent(EventListenerName.displayProjectConfigSidebar);
+				triggerEvent(EventListenerName.displayProjectSettingsSidebar);
 			}, 100);
 
 			// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -604,33 +603,6 @@ export const EditorTabs = () => {
 		};
 	}, [debouncedManualSave]);
 
-	const activeCloseIcon = (fileName: string) => {
-		const isActiveFile = openFiles[projectId]?.find(({ isActive, name }) => name === fileName && isActive);
-
-		return cn("size-4 p-0.5 opacity-0 hover:bg-gray-1100 group-hover:opacity-100", {
-			"opacity-100": isActiveFile,
-		});
-	};
-
-	const toggleFullScreenEditor = () => {
-		setFullScreenEditor(projectId, !fullScreenEditor[projectId]);
-	};
-
-	const handleCloseButtonClick = (
-		event: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>,
-		name: string
-	): void => {
-		event.stopPropagation();
-
-		if (name === activeEditorFileName) {
-			debouncedAutosave.cancel();
-		}
-
-		closeOpenedFile(name);
-		if (!fullScreenEditor[projectId] || openFiles[projectId]?.length !== 1) return;
-		toggleFullScreenEditor();
-	};
-
 	const isMarkdownFile = useMemo(() => activeEditorFileName.endsWith(".md"), [activeEditorFileName]);
 	const readmeContent = useMemo(() => content.replace(/---[\s\S]*?---\n/, ""), [content]);
 

src/components/organisms/index.ts

@@ -11,11 +11,11 @@ export { NewProjectModal, ImportProjectModal } from "@components/organisms/modal
 export { Sidebar } from "@components/organisms/sidebar/sidebar";
 export { SplitFrame } from "@components/organisms/splitFrame";
 export { SystemLog } from "@components/organisms/systemLog";
-export { ProjectConfigTopbar, DashboardTopbar } from "@components/organisms/topbar";
+export { ProjectSettingsTopbar, DashboardTopbar } from "@components/organisms/topbar";
 export { TitleTopbar } from "@components/organisms/topbar";
 export { UserFeedbackForm } from "@components/organisms/userFeedbackForm";
 export { ProtectedRoute } from "@components/organisms/protectedRoute";
-export { ProjectConfigViewDrawer } from "@components/organisms/projectConfigView";
+export { ProjectSettingsViewDrawer } from "@components/organisms/projectSettingsView";
 export { TemplateStart } from "@components/organisms/templateStart";
 export { TourManager, TourPopover } from "@components/organisms/tour";
 export { CreateNewProject } from "@components/organisms/createNewProject";

src/components/organisms/projectConfigView/index.ts

@@ -0,0 +1,7 @@
+export { ProjectSettingsConnections } from "./projectSettingsConnections";
+export { ProjectSettingsDocumentation } from "./projectSettingsDocumentation";
+export { ProjectSettingsFiles } from "./projectSettingsFiles";
+export { ProjectSettingsVariables } from "./projectSettingsVariables";
+export { ProjectSettingsTriggers } from "./projectSettingsTriggers";
+export { ProjectSettingsView } from "./projectSettingsView";
+export { ProjectSettingsViewDrawer } from "./projectSettingsViewDrawer";

src/components/organisms/projectConfigView/projectConfigView.tsx

@@ -12,7 +12,7 @@ import { Accordion, DropdownButton } from "@components/molecules";
 import { MoreIcon } from "@assets/image";
 import { CirclePlusIcon, ConnectionUnplugIcon, EditIcon, TrashIcon } from "@assets/image/icons";
 
-export const ProjectConfigConnections = () => {
+export const ProjectSettingsConnections = () => {
 	const { t } = useTranslation("project-configuration-view", { keyPrefix: "connections" });
 	const { t: tConnections } = useTranslation("tabs", { keyPrefix: "connections" });
 	const connections = useCacheStore((state) => state.connections);