coming soon message for empty components

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -1,14 +1,14 @@
 import { Bars2Icon } from "@heroicons/react/24/outline";
 import DisclosureComponent from "../DisclosureComponent";
-import {
-  nodeColors,
-  nodeIcons,
-  nodeNames,
-} from "../../../../utils";
+import { nodeColors, nodeIcons, nodeNames } from "../../../../utils";
 import { useContext, useEffect, useState } from "react";
 import { getAll } from "../../../../controllers/API";
 import { typesContext } from "../../../../contexts/typesContext";
-import { APIClassType, APIKindType, APIObjectType } from "../../../../types/api";
+import {
+	APIClassType,
+	APIKindType,
+	APIObjectType,
+} from "../../../../types/api";
 
 export default function ExtraSidebar() {
 	const [data, setData] = useState({});
@@ -16,7 +16,6 @@ export default function ExtraSidebar() {
 
 	useEffect(() => {
 		async function getTypes(): Promise<void> {
-  
 			// Make an asynchronous API call to retrieve all data.
 			let result = await getAll();
 
@@ -25,8 +24,7 @@ export default function ExtraSidebar() {
 
 			// Set the types by reducing over the keys of the result data and updating the accumulator.
 			setTypes(
-        Object.keys(result.data).reduce(
-          (acc, curr) => {
+				Object.keys(result.data).reduce((acc, curr) => {
 					Object.keys(result.data[curr]).forEach((c: keyof APIKindType) => {
 						acc[c] = curr;
 						// Add the base classes to the accumulator as well.
@@ -35,16 +33,17 @@ export default function ExtraSidebar() {
 						});
 					});
 					return acc;
-          },{}
-        )
+				}, {})
 			);
 		}
 		// Call the getTypes function.
 		getTypes();
 	}, [setTypes]);
 
-
-  function onDragStart(event: React.DragEvent<any>, data:{type:string,node?:APIClassType}) {
+	function onDragStart(
+		event: React.DragEvent<any>,
+		data: { type: string; node?: APIClassType }
+	) {
 		//start drag event
 		event.dataTransfer.effectAllowed = "move";
 		event.dataTransfer.setData("json", JSON.stringify(data));
@@ -55,7 +54,10 @@ export default function ExtraSidebar() {
 			{Object.keys(data).map((d: keyof APIObjectType, i) => (
 				<DisclosureComponent
 					key={i}
-          button={{ title: nodeNames[d]??nodeNames.unknown, Icon: nodeIcons[d]??nodeIcons.unknown }}
+					button={{
+						title: nodeNames[d] ?? nodeNames.unknown,
+						Icon: nodeIcons[d] ?? nodeIcons.unknown,
+					}}
 				>
 					<div className="p-2 flex flex-col gap-2">
 						{Object.keys(data[d]).map((t: string, k) => (
@@ -63,7 +65,9 @@ export default function ExtraSidebar() {
 								<div
 									draggable
 									className={" cursor-grab border-l-8 rounded-l-md"}
-                  style={{ borderLeftColor: nodeColors[d]??nodeColors.unknown }}
+									style={{
+										borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
+									}}
 									onDragStart={(event) =>
 										onDragStart(event, {
 											type: t,
@@ -72,12 +76,15 @@ export default function ExtraSidebar() {
 									}
 								>
 									<div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
-                    <span className="text-black dark:text-white w-36 truncate text-xs">{t}</span>
+										<span className="text-black dark:text-white w-36 truncate text-xs">
+											{t}
+										</span>
 										<Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
 									</div>
 								</div>
 							</div>
 						))}
+						{Object.keys(data[d]).length===0 && <div className="text-gray-400 text-center">Coming soon</div>}
 					</div>
 				</DisclosureComponent>
 			))}