fix(extraSidebarComponent): add validApiKey to the dependency array of ModalMemo to update the disabled state of the Share button based on validApiKey value

fix(extraSidebarComponent): update the disabled state of the Share button to also consider validApiKey value
fix(nodeToolbarComponent): add validApiKey to the dependency array of ModalMemo to update the disabled state of the Share SelectItem based on validApiKey value
fix(nodeToolbarComponent): update the disabled state of the Share SelectItem to also consider validApiKey value
fix(applies.css): remove unnecessary whitespace in the class definition of extra-side-bar-buttons

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

@@ -30,7 +30,7 @@ export default function ExtraSidebar(): JSX.Element {
     useContext(typesContext);
   const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt, version } =
     useContext(FlowsContext);
-  const { hasApiKey } = useContext(StoreContext);
+  const { hasApiKey,validApiKey } = useContext(StoreContext);
   const { setErrorData } = useContext(alertContext);
   const [dataFilter, setFilterData] = useState(data);
   const [search, setSearch] = useState("");
@@ -182,15 +182,15 @@ export default function ExtraSidebar(): JSX.Element {
 
   const ModalMemo = useMemo(
     () => (
-      <ShareModal is_component={false} component={flow!} disabled={!hasApiKey}>
+      <ShareModal is_component={false} component={flow!} disabled={(!hasApiKey||!validApiKey)}>
         <ShadTooltip content="Share" side="top">
-          <div className={classNames("extra-side-bar-buttons")}>
+          <button disabled={!hasApiKey} className={classNames("extra-side-bar-buttons",(!hasApiKey||!validApiKey)?"button-disable cursor-default":"")}>
-            <IconComponent name="Share2" className="side-bar-button-size" />
+            <IconComponent name="Share2" className={classNames("side-bar-button-size",(!hasApiKey||!validApiKey)?"extra-side-bar-save-disable":"")} />
-          </div>
+          </button>
         </ShadTooltip>
       </ShareModal>
     ),
-    [hasApiKey]
+    [hasApiKey,validApiKey]
   );
 
   const ExportMemo = useMemo(
@@ -198,7 +198,6 @@ export default function ExtraSidebar(): JSX.Element {
       <ExportModal>
         <ShadTooltip content="Export" side="top">
           <button
-            disabled={!hasApiKey}
             className={classNames("extra-side-bar-buttons")}
           >
             <IconComponent name="FileDown" className="side-bar-button-size" />

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

@@ -52,7 +52,7 @@ export default function NodeToolbarComponent({
   );
   const updateNodeInternals = useUpdateNodeInternals();
   const { getNodeId } = useContext(FlowsContext);
-  const { hasApiKey } = useContext(StoreContext);
+  const { hasApiKey,validApiKey } = useContext(StoreContext);
 
   function canMinimize() {
     let countHandles: number = 0;
@@ -231,8 +231,8 @@ export default function NodeToolbarComponent({
                   </div>{" "}
                 </SelectItem>
               )}
-              {hasApiKey && (
+
-                <SelectItem value={"Share"}>
+              <SelectItem disabled={(!hasApiKey||!validApiKey)} value={"Share"}>
                 <div className="flex">
                   <IconComponent
                     name="Share2"
@@ -241,7 +241,6 @@ export default function NodeToolbarComponent({
                   Share{" "}
                 </div>{" "}
               </SelectItem>
-              )}
               <SelectItem value={"Download"}>
                 <div className="flex">
                   <IconComponent