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

@@ -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;
     });
   }

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>
                     ))}

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>

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;
 };