Set home page for dev personas

README.md

@@ -89,4 +89,4 @@ autoconf -V
 
 (this was more of an issue with asdf but possibly an issue with mise installs of erlang/elixir as well, keeping around for posterity)
 
-You can read more here: https://github.com/asdf-vm/asdf-erlang?tab=readme-ov-file#osx# Registry cache test - run 1
+You can read more here: https://github.com/asdf-vm/asdf-erlang?tab=readme-ov-file#osx# Registry cache test - run 2

assets/src/components/contexts.tsx

@@ -22,6 +22,7 @@ import {
 import {
   MeQuery,
   PersonaConfigurationFragment,
+  PersonaRole,
   useLogoutMutation,
   useRefreshLazyQuery,
 } from '../generated/graphql'
@@ -56,6 +57,15 @@ export const useIsManager = () => {
   )
 }
 
+export const useIsDeveloperPersona = () => {
+  const { me } = useLogin()
+
+  return (
+    me?.personas?.some((persona) => persona?.role === PersonaRole.Developer) ??
+    false
+  )
+}
+
 export function useCloudSetupUnfinished() {
   const { configuration } = useLogin()
   return !!configuration?.cloud && !configuration?.installed

assets/src/components/flows/FlowCard.tsx

@@ -13,7 +13,9 @@ import {
   PermissionsIdType,
   PermissionsModal,
 } from 'components/cd/utils/PermissionsModal'
+import { useLogin } from 'components/contexts'
 import { Body1BoldP, Body2P } from 'components/utils/typography/Text'
+import { hasAccess } from 'components/utils/persona'
 import { FlowBasicWithBindingsFragment } from 'generated/graphql'
 import pluralize from 'pluralize'
 import { useState } from 'react'
@@ -29,6 +31,12 @@ export function FlowCard({
   refetch: () => void
 }) {
   const navigate = useNavigate()
+  const { personaConfiguration } = useLogin()
+  const showPermissionsBtn = hasAccess(
+    personaConfiguration,
+    'flows.permissions'
+  )
+  const showPipelines = hasAccess(personaConfiguration, 'flows.pipelines')
   const [hovered, setHovered] = useState(false)
   const [showPermissions, setShowPermissions] = useState(false)
   const numAlerts = flow.alerts?.edges?.length ?? 0
@@ -67,40 +75,46 @@ export function FlowCard({
         </ContentSC>
         <FooterSC $parentHover={hovered}>
           <Flex gap="xsmall">
-            <IconFrame
-              clickable
-              tooltip="Permissions"
-              onClick={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                setShowPermissions(!showPermissions)
-              }}
-              icon={<PeopleIcon color="icon-light" />}
-            />
-            <IconFrame
-              clickable
-              tooltip="View pipelines for this flow"
-              onClick={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                navigate(`${flowPath}/pipelines`)
-              }}
-              icon={<GitPullIcon color="icon-light" />}
-            />
+            {showPermissionsBtn && (
+              <IconFrame
+                clickable
+                tooltip="Permissions"
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  setShowPermissions(!showPermissions)
+                }}
+                icon={<PeopleIcon color="icon-light" />}
+              />
+            )}
+            {showPipelines && (
+              <IconFrame
+                clickable
+                tooltip="View pipelines for this flow"
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  navigate(`${flowPath}/pipelines`)
+                }}
+                icon={<GitPullIcon color="icon-light" />}
+              />
+            )}
           </Flex>
 
           <ArrowRightIcon color="icon-light" />
         </FooterSC>
       </CardSC>
-      <PermissionsModal
-        id={flow.id}
-        type={PermissionsIdType.Flow}
-        bindings={flow}
-        header="Flow permissions"
-        refetch={refetch}
-        open={showPermissions}
-        onClose={() => setShowPermissions(false)}
-      />
+      {showPermissionsBtn && (
+        <PermissionsModal
+          id={flow.id}
+          type={PermissionsIdType.Flow}
+          bindings={flow}
+          header="Flow permissions"
+          refetch={refetch}
+          open={showPermissions}
+          onClose={() => setShowPermissions(false)}
+        />
+      )}
     </>
   )
 }

assets/src/components/home/Home.tsx

@@ -1,5 +1,9 @@
 import { Breadcrumb, Flex, useSetBreadcrumbs } from '@pluralsh/design-system'
-import { useCloudSetupUnfinished, useLogin } from 'components/contexts'
+import {
+  useCloudSetupUnfinished,
+  useIsDeveloperPersona,
+  useLogin,
+} from 'components/contexts'
 import { useOnboarded } from '../contexts/DeploymentSettingsContext.tsx'
 import { HomeWorkbenches } from './HomeWorkbenches.tsx'
 
@@ -19,6 +23,8 @@ import {
   VersionCompliance,
 } from 'generated/graphql.ts'
 import { useMemo, useState } from 'react'
+import { Navigate } from 'react-router-dom'
+import { FLOWS_ABS_PATH } from 'routes/flowRoutesConsts'
 import styled, { useTheme } from 'styled-components'
 import { mapExistingNodes } from 'utils/graphql.ts'
 import { isNonNullable } from 'utils/isNonNullable.ts'
@@ -47,7 +53,20 @@ const breadcrumbs: Breadcrumb[] = [{ label: 'home', url: '/' }]
 
 export function Home() {
   const { me } = useLogin()
-  if (me?.homepage === Homepage.Workbenches) return <HomeWorkbenches />
+  const isDeveloperPersona = useIsDeveloperPersona()
+  const homepage =
+    isDeveloperPersona || me?.homepage === Homepage.Flows
+      ? Homepage.Flows
+      : me?.homepage
+
+  if (homepage === Homepage.Flows)
+    return (
+      <Navigate
+        replace
+        to={FLOWS_ABS_PATH}
+      />
+    )
+  if (homepage === Homepage.Workbenches) return <HomeWorkbenches />
   return <HomeClusters />
 }
 

assets/src/components/settings/global/GlobalSettingsGeneral.tsx

@@ -4,6 +4,7 @@ import {
   ClusterIcon,
   Divider,
   Flex,
+  FlowIcon,
   IconFrame,
   ListBoxItem,
   MoonIcon,
@@ -128,6 +129,10 @@ const homepageOptions: Record<Homepage, { label: string; icon: ReactElement }> =
       label: 'Clusters overview',
       icon: <ClusterIcon size={16} />,
     },
+    [Homepage.Flows]: {
+      label: 'Flows',
+      icon: <FlowIcon size={16} />,
+    },
   }
 
 const themeOptions: Record<ColorMode, { label: string; icon: ReactElement }> = {