feat(Goal): show team info on goal page

graphql/resolvers/Goal.ts

@@ -206,6 +206,15 @@ export const query = (t: ObjectDefinitionBlock<'Query'>) => {
                     },
                     tags: true,
                     state: true,
+                    team: {
+                        include: {
+                            flow: {
+                                include: {
+                                    states: true,
+                                },
+                            },
+                        },
+                    },
                     project: {
                         include: {
                             flow: {

graphql/schema.graphql

@@ -373,6 +373,7 @@ type Team {
   flowId: String
   goals: [Goal]
   id: Int!
+  key: String
   parent: Team
   participants: [Activity]
   projects: [Project]

graphql/types.ts

@@ -126,6 +126,7 @@ export const Team = objectType({
     definition(t) {
         t.field(TeamModel.id);
         t.field(TeamModel.slug);
+        t.field(TeamModel.key);
         t.field(TeamModel.title);
         t.field(TeamModel.description);
         t.field(TeamModel.activityId);

i18n/en.json

@@ -279,7 +279,8 @@
         "Change color and create": "to change color. Click on it to create."
     },
     "IssueTitle": {
-        "Project": "Project"
+        "Project": "Project",
+        "Team": "Team"
     },
     "IssueStats": {
         "comments": {

i18n/ru.json

@@ -276,7 +276,8 @@
         "Change color and create": "чтобы сменить цвет. Нажми на тэк чтобы создать."
     },
     "IssueTitle": {
-        "Project": "Проект"
+        "Project": "Проект",
+        "Team": "Команда"
     },
     "IssueStats": {
         "comments": {

src/components/GoalPreview.tsx

@@ -19,7 +19,7 @@ import { ModalHeader, ModalContent } from './Modal';
 import { ModalPreview } from './ModalPreview';
 import { IssueKey } from './IssueKey';
 import { IssueTitle } from './IssueTitle';
-import { IssueProject } from './IssueProject';
+import { IssueParent } from './IssueParent';
 import { IssueTags } from './IssueTags';
 import { Button } from './Button';
 import { StateDot } from './StateDot';
@@ -126,8 +126,12 @@ const GoalPreview: React.FC<GoalPreviewProps> = ({ goal: partialGoal, visible, o
                     </IssueKey>
                 ))}
 
+                {nullable(goal.team, (team) => (
+                    <IssueParent kind="team" as="span" mode="compact" parent={team} size="m" />
+                ))}
+
                 {nullable(goal.project, (project) => (
-                    <IssueProject as="span" mode="compact" project={project} size="m" />
+                    <IssueParent kind="project" as="span" mode="compact" parent={project} size="m" />
                 ))}
 
                 <IssueStats mode="compact" comments={goal.comments?.length || 0} updatedAt={goal.updatedAt} />

src/components/IssueParent.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useTranslations } from 'next-intl';
+import NextLink from 'next/link';
+
+import { gapM, gapS, gray9 } from '../design/@generated/themes';
+import { routes } from '../hooks/router';
+import { nullable } from '../utils/nullable';
+
+import { Text } from './Text';
+import { Link } from './Link';
+
+interface IssueParentProps {
+    kind: 'project' | 'team';
+    parent: {
+        key?: string;
+        slug?: string;
+        title: string;
+    };
+    mode?: 'compact' | 'default';
+    as?: React.ComponentProps<typeof Text>['as'];
+    size?: React.ComponentProps<typeof Text>['size'];
+}
+
+const sizeGapMap = {
+    xxs: gapS,
+    xs: gapS,
+    s: gapS,
+    m: gapS,
+    l: gapM,
+    xl: gapM,
+    xxl: gapM,
+};
+
+const StyledIssueParentTitle = styled(Text)`
+    display: inline-block;
+    padding-top: ${({ size = 'l' }) => sizeGapMap[size]};
+`;
+
+export const IssueParent: React.FC<IssueParentProps> = ({ parent, kind, as, mode, size = 'l' }) => {
+    const t = useTranslations('IssueTitle');
+
+    const kindTitleMap = {
+        project: t('Project'),
+        team: t('Team'),
+    };
+
+    const kindContentMap = {
+        project: nullable(parent.key, (key) => (
+            <NextLink passHref href={routes.project(key)}>
+                <Link inline>{parent.title}</Link>
+            </NextLink>
+        )),
+        team: nullable(parent.slug, (slug) => (
+            <NextLink passHref href={routes.team(slug)}>
+                <Link inline>{parent.title}</Link>
+            </NextLink>
+        )),
+    };
+
+    const pre = mode === 'compact' ? '' : `${kindTitleMap[kind]} — `;
+
+    return (
+        <StyledIssueParentTitle as={as} size={size} weight="bold" color={gray9}>
+            {pre}
+            {kindContentMap[kind]}
+        </StyledIssueParentTitle>
+    );
+};

src/pages/goals/[id].tsx

@@ -28,7 +28,7 @@ import { Button } from '../../components/Button';
 import { Reactions } from '../../components/Reactions';
 import { CommentView } from '../../components/CommentView';
 import { StateDot } from '../../components/StateDot';
-import { IssueProject } from '../../components/IssueProject';
+import { IssueParent } from '../../components/IssueParent';
 import { IssueTags } from '../../components/IssueTags';
 import { useHighlightedComment } from '../../hooks/useHighlightedComment';
 import { useGoalUpdate } from '../../hooks/useGoalUpdate';
@@ -243,8 +243,12 @@ const GoalPage = ({
                         ))}
                     </IssueKey>
 
+                    {nullable(goal.team, (team) => (
+                        <IssueParent kind="team" parent={team} />
+                    ))}
+
                     {nullable(goal.project, (project) => (
-                        <IssueProject project={project} />
+                        <IssueParent kind="project" parent={project} />
                     ))}
 
                     <IssueTitle title={goal.title} />

src/utils/entityFetcher.ts

@@ -28,6 +28,23 @@ export const goalFetcher = createFetcher((_, id: string) => ({
             },
             createdAt: true,
             updatedAt: true,
+            team: {
+                id: true,
+                key: true,
+                slug: true,
+                title: true,
+                description: true,
+                flowId: true,
+                flow: {
+                    id: true,
+                    states: {
+                        id: true,
+                        title: true,
+                        default: true,
+                        hue: true,
+                    },
+                },
+            },
             project: {
                 id: true,
                 key: true,