fix(picker-ui): picker UI confusing when credential not set + Microsoft OAuth Fixes (#1016)

* fix(picker-ui): picker UI confusing when credential not set

* remove comments

* remove chevron down

* fix collaboration oauth

* fix jira"

* fix

* fix ms excel selector

* fix selectors for MS blocks

* fix ms selectors

* fix

* fix ms onedrive and sharepoint

* fix to grey out dropdowns

* fix background fetches

* fix planner

* fix confluence

* fix

* fix confluence realtime sharing

* fix outlook folder selector

* check outlook folder

* make shared hook

---------

Co-authored-by: waleedlatif1 <[email protected]>

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/channel-selector/channel-selector-input.tsx

@@ -33,43 +33,37 @@ export function ChannelSelectorInput({
 
   // Use the proper hook to get the current value and setter (same as file-selector)
   const [storeValue, setStoreValue] = useSubBlockValue(blockId, subBlock.id)
+  // Reactive upstream fields
+  const [authMethod] = useSubBlockValue(blockId, 'authMethod')
+  const [botToken] = useSubBlockValue(blockId, 'botToken')
+  const [connectedCredential] = useSubBlockValue(blockId, 'credential')
   const [selectedChannelId, setSelectedChannelId] = useState<string>('')
   const [_channelInfo, setChannelInfo] = useState<SlackChannelInfo | null>(null)
 
   // Get provider-specific values
   const provider = subBlock.provider || 'slack'
   const isSlack = provider === 'slack'
 
-  // Get the credential for the provider - use provided credential or fall back to store
-  const authMethod = getValue(blockId, 'authMethod') as string
-  const botToken = getValue(blockId, 'botToken') as string
-
+  // Get the credential for the provider - use provided credential or fall back to reactive values
   let credential: string
   if (providedCredential) {
     credential = providedCredential
-  } else if (authMethod === 'bot_token' && botToken) {
-    credential = botToken
+  } else if ((authMethod as string) === 'bot_token' && (botToken as string)) {
+    credential = botToken as string
   } else {
-    credential = (getValue(blockId, 'credential') as string) || ''
+    credential = (connectedCredential as string) || ''
   }
 
   // Use preview value when in preview mode, otherwise use store value
   const value = isPreview ? previewValue : storeValue
 
   // Get the current value from the store or prop value if in preview mode (same pattern as file-selector)
   useEffect(() => {
-    if (isPreview && previewValue !== undefined) {
-      const value = previewValue
-      if (value && typeof value === 'string') {
-        setSelectedChannelId(value)
-      }
-    } else {
-      const value = getValue(blockId, subBlock.id)
-      if (value && typeof value === 'string') {
-        setSelectedChannelId(value)
-      }
+    const val = isPreview && previewValue !== undefined ? previewValue : storeValue
+    if (val && typeof val === 'string') {
+      setSelectedChannelId(val)
     }
-  }, [blockId, subBlock.id, getValue, isPreview, previewValue])
+  }, [isPreview, previewValue, storeValue])
 
   // Handle channel selection (same pattern as file-selector)
   const handleChannelChange = (channelId: string, info?: SlackChannelInfo) => {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/credential-selector/credential-selector.tsx

@@ -124,12 +124,10 @@ export function CredentialSelector({
     }
   }, [effectiveProviderId, selectedId, activeWorkflowId])
 
-  // Fetch credentials on initial mount
+  // Fetch credentials on initial mount and whenever the subblock value changes externally
   useEffect(() => {
     fetchCredentials()
-    // This effect should only run once on mount, so empty dependency array
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [fetchCredentials, effectiveValue])
 
   // When the selectedId changes (e.g., collaborator saved a credential), determine if it's foreign
   useEffect(() => {
@@ -180,6 +178,19 @@ export function CredentialSelector({
     }
   }, [fetchCredentials])
 
+  // Also handle BFCache restores (back/forward navigation) where visibility change may not fire reliably
+  useEffect(() => {
+    const handlePageShow = (event: any) => {
+      if (event?.persisted) {
+        fetchCredentials()
+      }
+    }
+    window.addEventListener('pageshow', handlePageShow)
+    return () => {
+      window.removeEventListener('pageshow', handlePageShow)
+    }
+  }, [fetchCredentials])
+
   // Handle popover open to fetch fresh credentials
   const handleOpenChange = (isOpen: boolean) => {
     setOpen(isOpen)
@@ -193,6 +204,13 @@ export function CredentialSelector({
   const selectedCredential = credentials.find((cred) => cred.id === selectedId)
   const isForeign = !!(selectedId && !selectedCredential && hasForeignMeta)
 
+  // If the list doesn’t contain the effective value but meta says it exists, synthesize a non-leaky placeholder to render stable UI
+  const displayName = selectedCredential
+    ? selectedCredential.name
+    : isForeign
+      ? 'Saved by collaborator'
+      : undefined
+
   // Handle selection
   const handleSelect = (credentialId: string) => {
     const previousId = selectedId || (effectiveValue as string) || ''
@@ -263,15 +281,9 @@ export function CredentialSelector({
             <div className='flex max-w-[calc(100%-20px)] items-center gap-2 overflow-hidden'>
               {getProviderIcon(provider)}
               <span
-                className={
-                  selectedCredential ? 'truncate font-normal' : 'truncate text-muted-foreground'
-                }
+                className={displayName ? 'truncate font-normal' : 'truncate text-muted-foreground'}
               >
-                {selectedCredential
-                  ? selectedCredential.name
-                  : isForeign
-                    ? 'Saved by collaborator'
-                    : label}
+                {displayName || label}
               </span>
             </div>
             <ChevronDown className='absolute right-3 h-4 w-4 shrink-0 opacity-50' />