fix(service-portal-core): Conditial org query in tab navigation (#16166)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

libs/service-portal/core/src/components/TabNavigation/TabNavigation.tsx

@@ -16,6 +16,7 @@ import { useWindowSize } from 'react-use'
 import InstitutionPanel from '../InstitutionPanel/InstitutionPanel'
 import * as styles from './TabNavigation.css'
 import { TabBar } from './TabBar'
+import { TabNavigationInstitutionPanel } from './TabNavigationInstitutionPanel'
 
 interface Props {
   pathname?: string
@@ -50,14 +51,10 @@ export const TabNavigation: React.FC<Props> = ({ items, pathname, label }) => {
       navigate(id)
     }
   }
-
-  const { data: organization, loading } = useOrganization(
-    activePath?.activeChild?.serviceProvider ?? activePath.serviceProvider,
-  )
-
+  const serviceProvider =
+    activePath?.activeChild?.serviceProvider ?? activePath.serviceProvider
   const descriptionText =
     activePath.activeChild?.description ?? activePath?.description
-
   const tooltipText =
     activePath.activeChild?.serviceProviderTooltip ??
     activePath.serviceProviderTooltip
@@ -157,23 +154,13 @@ export const TabNavigation: React.FC<Props> = ({ items, pathname, label }) => {
                 </Box>
               </GridColumn>
             )}
-            {(activePath.displayServiceProviderLogo ||
-              activePath?.displayServiceProviderLogo) &&
+            {activePath?.displayServiceProviderLogo &&
+              serviceProvider &&
               !isMobile && (
-                <GridColumn span="1/8" offset="1/8">
-                  {organization?.logo && (
-                    <InstitutionPanel
-                      loading={loading}
-                      linkHref={organization.link ?? ''}
-                      linkLabel={organization.title}
-                      img={organization.logo?.url ?? ''}
-                      tooltipText={
-                        tooltipText ? formatMessage(tooltipText) : ''
-                      }
-                      imgContainerDisplay={isMobile ? 'block' : 'flex'}
-                    />
-                  )}
-                </GridColumn>
+                <TabNavigationInstitutionPanel
+                  serviceProvider={serviceProvider}
+                  tooltipText={tooltipText}
+                />
               )}
           </GridRow>
         </GridContainer>

libs/service-portal/core/src/components/TabNavigation/TabNavigationInstitutionPanel.tsx

@@ -0,0 +1,39 @@
+import { GridColumn } from '@island.is/island-ui/core'
+import { useOrganization } from '@island.is/service-portal/graphql'
+import InstitutionPanel from '../InstitutionPanel/InstitutionPanel'
+import { MessageDescriptor } from 'react-intl'
+import { OrganizationSlugType } from '@island.is/shared/constants'
+import { useLocale } from '@island.is/localization'
+import { useWindowSize } from 'react-use'
+import { theme } from '@island.is/island-ui/theme'
+
+interface Props {
+  serviceProvider: OrganizationSlugType
+  tooltipText?: MessageDescriptor
+}
+
+export const TabNavigationInstitutionPanel = ({
+  tooltipText,
+  serviceProvider,
+}: Props) => {
+  const { formatMessage } = useLocale()
+  const { data: organization, loading } = useOrganization(serviceProvider)
+  const { width } = useWindowSize()
+
+  const isMobile = width < theme.breakpoints.md
+
+  return (
+    <GridColumn span="1/8" offset="1/8">
+      {organization?.logo && (
+        <InstitutionPanel
+          loading={loading}
+          linkHref={organization.link ?? ''}
+          linkLabel={organization.title}
+          img={organization.logo?.url ?? ''}
+          tooltipText={tooltipText ? formatMessage(tooltipText) : ''}
+          imgContainerDisplay={isMobile ? 'block' : 'flex'}
+        />
+      )}
+    </GridColumn>
+  )
+}