From 82e1131ed2cec26e6cd6733a50037f173720ac4c Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 10 Oct 2023 15:11:04 -0300
Subject: [PATCH] fix(typesContext.tsx): set official property of
 component.node to false to mark it as unofficial
 fix(extraSidebarComponent/index.tsx): set official property of component to
 false if it is explicitly set to false
 fix(sideBarDraggableComponent/index.tsx): add official property to
 SidebarDraggableComponent props and use it to conditionally render delete
 option in SelectItem fix(api/index.ts): add official property to APIClassType
 to indicate if it is an official API

---
 src/frontend/src/contexts/typesContext.tsx    |  6 ++++-
 .../extraSidebarComponent/index.tsx           |  6 +++++
 .../sideBarDraggableComponent/index.tsx       | 22 +++++++++++--------
 src/frontend/src/types/api/index.ts           |  1 +
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx
index 33093692b..9e9de299b 100644
--- a/src/frontend/src/contexts/typesContext.tsx
+++ b/src/frontend/src/contexts/typesContext.tsx
@@ -144,13 +144,17 @@ export function TypesProvider({ children }: { children: ReactNode }) {
         removeCountFromString(component.node?.display_name!) +
         ` (${increment})`;
     }
+    component.node!.official = false;
     components[key] = component;
     savedComponentsJSON.components = components;
     localStorage.setItem(id, JSON.stringify(savedComponentsJSON));
     setData((prev) => {
       let newData = { ...prev };
       //clone to prevent reference erro
-      newData["custom_components"][key] = _.cloneDeep(component.node);
+      newData["custom_components"][key] = _.cloneDeep({
+        ...component.node,
+        official: false,
+      });
       return newData;
     });
   }
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 50f5f9645..012a27e86 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -266,6 +266,12 @@ export default function ExtraSidebar(): JSX.Element {
                           display_name={
                             dataFilter[SBSectionName][SBItemName].display_name
                           }
+                          official={
+                            dataFilter[SBSectionName][SBItemName].official ===
+                            false
+                              ? false
+                              : true
+                          }
                         />
                       </ShadTooltip>
                     ))}
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
index a4c726480..133d04f56 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
@@ -22,6 +22,7 @@ export default function SidebarDraggableComponent({
   color,
   onDragStart,
   apiClass,
+  official,
 }: {
   apiClass: APIClassType;
   display_name: string;
@@ -29,6 +30,7 @@ export default function SidebarDraggableComponent({
   error: boolean;
   color: string;
   onDragStart: DragEventHandler<HTMLDivElement>;
+  official: boolean;
 }) {
   const open = useRef(false);
   const { deleteComponent } = useContext(typesContext);
@@ -108,15 +110,17 @@ export default function SidebarDraggableComponent({
                     Download{" "}
                   </div>{" "}
                 </SelectItem>
-                <SelectItem value={"delete"}>
-                  <div className="flex">
-                    <IconComponent
-                      name="Trash2"
-                      className="relative top-0.5 mr-2 h-4 w-4"
-                    />{" "}
-                    Delete{" "}
-                  </div>{" "}
-                </SelectItem>
+                {!official && (
+                  <SelectItem value={"delete"}>
+                    <div className="flex">
+                      <IconComponent
+                        name="Trash2"
+                        className="relative top-0.5 mr-2 h-4 w-4"
+                      />{" "}
+                      Delete{" "}
+                    </div>{" "}
+                  </SelectItem>
+                )}
               </SelectContent>
             </div>
           </div>
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index a062274ef..9f1fa04f5 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -17,6 +17,7 @@ export type APIClassType = {
   beta?: boolean;
   documentation: string;
   error?: string;
+  official?: boolean;
   [key: string]: Array<string> | string | APITemplateType | boolean | undefined;
 };