New JourneyBreadcrumbs component, new global SearchBox

src/core/apollo/generated/graphql-schema.ts

@@ -21248,26 +21248,6 @@ export type ChallengeInnovationFlowQuery = {
   };
 };
 
-export type ChallengeNameQueryVariables = Exact<{
-  spaceId: Scalars['UUID_NAMEID'];
-  challengeId: Scalars['UUID_NAMEID'];
-}>;
-
-export type ChallengeNameQuery = {
-  __typename?: 'Query';
-  space: {
-    __typename?: 'Space';
-    id: string;
-    nameID: string;
-    challenge: {
-      __typename?: 'Challenge';
-      id: string;
-      nameID: string;
-      profile: { __typename?: 'Profile'; id: string; displayName: string };
-    };
-  };
-};
-
 export type ChallengeProfileInfoQueryVariables = Exact<{
   spaceId: Scalars['UUID_NAMEID'];
   challengeId: Scalars['UUID_NAMEID'];
@@ -22542,6 +22522,98 @@ export type JourneyPrivilegesQuery = {
   };
 };
 
+export type JourneyBreadcrumbsInnovationHubQueryVariables = Exact<{ [key: string]: never }>;
+
+export type JourneyBreadcrumbsInnovationHubQuery = {
+  __typename?: 'Query';
+  platform: {
+    __typename?: 'Platform';
+    innovationHub?:
+      | {
+          __typename?: 'InnovationHub';
+          id: string;
+          profile: {
+            __typename?: 'Profile';
+            id: string;
+            displayName: string;
+            avatar?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined;
+          };
+        }
+      | undefined;
+  };
+};
+
+export type JourneyBreadcrumbsSpaceQueryVariables = Exact<{
+  spaceNameId: Scalars['UUID_NAMEID'];
+}>;
+
+export type JourneyBreadcrumbsSpaceQuery = {
+  __typename?: 'Query';
+  space: {
+    __typename?: 'Space';
+    id: string;
+    profile: {
+      __typename?: 'Profile';
+      id: string;
+      displayName: string;
+      avatar?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined;
+    };
+  };
+};
+
+export type JourneyBreadcrumbsChallengeQueryVariables = Exact<{
+  spaceNameId: Scalars['UUID_NAMEID'];
+  challengeNameId: Scalars['UUID_NAMEID'];
+}>;
+
+export type JourneyBreadcrumbsChallengeQuery = {
+  __typename?: 'Query';
+  space: {
+    __typename?: 'Space';
+    id: string;
+    challenge: {
+      __typename?: 'Challenge';
+      id: string;
+      profile: {
+        __typename?: 'Profile';
+        id: string;
+        displayName: string;
+        avatar?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined;
+      };
+    };
+  };
+};
+
+export type JourneyBreadcrumbsOpportunityQueryVariables = Exact<{
+  spaceNameId: Scalars['UUID_NAMEID'];
+  opportunityNameId: Scalars['UUID_NAMEID'];
+}>;
+
+export type JourneyBreadcrumbsOpportunityQuery = {
+  __typename?: 'Query';
+  space: {
+    __typename?: 'Space';
+    id: string;
+    opportunity: {
+      __typename?: 'Opportunity';
+      id: string;
+      profile: {
+        __typename?: 'Profile';
+        id: string;
+        displayName: string;
+        avatar?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined;
+      };
+    };
+  };
+};
+
+export type JourneyBreadcrumbsProfileFragment = {
+  __typename?: 'Profile';
+  id: string;
+  displayName: string;
+  avatar?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined;
+};
+
 export type OpportunityPageQueryVariables = Exact<{
   spaceId: Scalars['UUID_NAMEID'];
   opportunityId: Scalars['UUID_NAMEID'];
@@ -23688,24 +23760,6 @@ export type OpportunityInnovationFlowQuery = {
   };
 };
 
-export type OpportunityNameQueryVariables = Exact<{
-  spaceId: Scalars['UUID_NAMEID'];
-  opportunityId: Scalars['UUID_NAMEID'];
-}>;
-
-export type OpportunityNameQuery = {
-  __typename?: 'Query';
-  space: {
-    __typename?: 'Space';
-    id: string;
-    opportunity: {
-      __typename?: 'Opportunity';
-      id: string;
-      profile: { __typename?: 'Profile'; id: string; displayName: string };
-    };
-  };
-};
-
 export type OpportunityProfileInfoQueryVariables = Exact<{
   spaceId: Scalars['UUID_NAMEID'];
   opportunityId: Scalars['UUID_NAMEID'];
@@ -25644,13 +25698,6 @@ export type SpaceDetailsProviderFragment = {
     | undefined;
 };
 
-export type SpaceNameFragment = {
-  __typename?: 'Space';
-  id: string;
-  nameID: string;
-  profile: { __typename?: 'Profile'; id: string; displayName: string };
-};
-
 export type CreateSpaceMutationVariables = Exact<{
   input: CreateSpaceInput;
 }>;
@@ -25978,20 +26025,6 @@ export type SpaceInnovationFlowTemplatesQuery = {
   };
 };
 
-export type SpaceNameQueryVariables = Exact<{
-  spaceId: Scalars['UUID_NAMEID'];
-}>;
-
-export type SpaceNameQuery = {
-  __typename?: 'Query';
-  space: {
-    __typename?: 'Space';
-    id: string;
-    nameID: string;
-    profile: { __typename?: 'Profile'; id: string; displayName: string };
-  };
-};
-
 export type ChallengeCreatedSubscriptionVariables = Exact<{
   spaceID: Scalars['UUID_NAMEID'];
 }>;

src/core/i18n/en/translation.en.json

@@ -791,6 +791,12 @@
     }
   },
   "components": {
+    "search": {
+      "scope": {
+        "platform": "Entire platform",
+        "space": "{{displayName}}"
+      }
+    },
     "journeyUnauthorizedDialog": {
       "message": "This is a private Community and most of it’s content is restricted to members only. If you want to join, click here to apply."
     },
@@ -1823,6 +1829,7 @@
       "innovation-flow-info": "Click to display the Innovation Flow"
     },
     "home": {
+      "title": "My Dashboard",
       "sections": {
         "welcome": {
           "welcome-back": "Welcome back {{username}}!",

src/core/ui/navigation/Breadcrumbs.tsx

@@ -0,0 +1,79 @@
+import React, { cloneElement, PropsWithChildren, ReactElement, ReactNode, useState } from 'react';
+import { Box } from '@mui/material';
+import { DoubleArrow } from '@mui/icons-material';
+import { gutters } from '../grid/utils';
+import { BreadcrumbsItemProps } from './BreadcrumbsItemProps';
+
+interface BreadcrumbsProps<ItemProps extends BreadcrumbsItemProps> {
+  children: ReactElement<ItemProps>[];
+}
+
+const BreadcrumbsSeparator = () => {
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      height={gutters(0.5)}
+      width={gutters(0.5)}
+      fontSize={8}
+      borderRadius={0.5}
+      sx={{ backgroundColor: theme => theme.palette.divider }}
+    >
+      <DoubleArrow fontSize="inherit" color="primary" />
+    </Box>
+  );
+};
+
+type JourneyBreadcrumbsExpandedState = Record<string | number, boolean>;
+
+const Breadcrumbs = <ItemProps extends BreadcrumbsItemProps>({
+  children,
+}: PropsWithChildren<BreadcrumbsProps<ItemProps>>) => {
+  const [expandedState, setExpandedState] = useState<JourneyBreadcrumbsExpandedState>({});
+
+  const [firstChild, ...restChildren] = children.map(child => {
+    const expanded = (child.key && expandedState[child.key]) || false;
+
+    const onExpand = child.key ? () => onHoverItem(child.key!) : undefined;
+
+    return cloneElement(child, { expanded, onExpand } as Partial<ItemProps>);
+  });
+
+  const childrenWithSeparator =
+    firstChild &&
+    restChildren.reduce<ReactNode[]>(
+      (acc, child, index) => {
+        acc.push(<BreadcrumbsSeparator key={`_separator_${index}`} />, child);
+
+        return acc;
+      },
+      [firstChild]
+    );
+
+  const onLeave = () => {
+    setExpandedState({});
+  };
+
+  const onHoverItem = (childKey: string | number) => {
+    setExpandedState(prevExpandedState => ({
+      ...prevExpandedState,
+      [childKey]: true,
+    }));
+  };
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="row"
+      gap={gutters(0.5)}
+      alignItems="center"
+      padding={gutters(0.5)}
+      onMouseLeave={onLeave}
+    >
+      {childrenWithSeparator}
+    </Box>
+  );
+};
+
+export default Breadcrumbs;

src/core/ui/navigation/BreadcrumbsItemProps.ts

@@ -0,0 +1,4 @@
+export interface BreadcrumbsItemProps {
+  expanded?: boolean;
+  onExpand?: () => void;
+}

src/core/ui/navigation/NavigationBar.tsx

@@ -23,7 +23,13 @@ const NavigationBarContent = ({ transparent, children }: PropsWithChildren<Navig
         transition: 'background-color .25s',
       }}
     >
-      <GridContainer maxWidth={MAX_CONTENT_WIDTH_WITH_GUTTER_PX} marginX="auto" display="flex" flexDirection="row">
+      <GridContainer
+        maxWidth={MAX_CONTENT_WIDTH_WITH_GUTTER_PX}
+        marginX="auto"
+        display="flex"
+        flexDirection="row"
+        paddingY={gutters(0.5)}
+      >
         <GridProvider columns={globalGridColumns}>{children}</GridProvider>
       </GridContainer>
     </Box>
@@ -35,12 +41,14 @@ interface NavigationBarProps {
   childrenRight?: ReactNode;
 }
 
+export const NAVIGATION_HEIGHT_GUTTERS = 4;
+
 const NavigationBar = ({ childrenLeft, childrenRight }: NavigationBarProps) => {
   const scrollTop = useScrollTop();
 
   const hasScrolledUp = useScrolledUp();
 
-  const navigationHeight = GUTTER_PX * 4;
+  const navigationHeight = GUTTER_PX * NAVIGATION_HEIGHT_GUTTERS;
 
   const hasScrolledPast = scrollTop > navigationHeight;
 
@@ -55,11 +63,11 @@ const NavigationBar = ({ childrenLeft, childrenRight }: NavigationBarProps) => {
         }}
       >
         <NavigationBarContent transparent={!hasScrolledPast}>
-          <Box display="flex" flexDirection="row" gap={gutters(0.5)} paddingX={gutters()}>
+          <Box display="flex" flexDirection="row" gap={gutters(0.5)} paddingX={gutters(0.5)}>
             {childrenLeft}
           </Box>
           <FlexSpacer />
-          <Box display="flex" flexDirection="row" gap={gutters(0.5)} paddingX={gutters()}>
+          <Box display="flex" flexDirection="row" gap={gutters(0.5)} paddingX={gutters(0.5)}>
             {childrenRight}
           </Box>
         </NavigationBarContent>