feat(Goal): show teams of goal project

taskany-inc · Jan 29, 2023 · a70850b · a70850b
1 parent fff83cc
commit a70850b
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 24 deletions.
diff --git a/graphql/resolvers/Goal.ts b/graphql/resolvers/Goal.ts
@@ -413,6 +413,7 @@ export const query = (t: ObjectDefinitionBlock<'Query'>) => {
                                     states: true,
                                 },
                             },
+                            teams: true,
                         },
                     },
                     reactions: {

diff --git a/i18n/en.json b/i18n/en.json
@@ -291,7 +291,7 @@
     },
     "IssueTitle": {
         "Project": "Project",
-        "Team": "Team"
+        "Team": "Teams"
     },
     "IssueStats": {
         "comments": {

diff --git a/i18n/ru.json b/i18n/ru.json
@@ -288,7 +288,7 @@
     },
     "IssueTitle": {
         "Project": "Проект",
-        "Team": "Команда"
+        "Team": "Команды"
     },
     "IssueStats": {
         "comments": {

diff --git a/src/components/GoalPreview.tsx b/src/components/GoalPreview.tsx
@@ -33,6 +33,7 @@ import { CommentView } from './CommentView';
 import { ActivityFeed } from './ActivityFeed';
 import { Reactions } from './Reactions';
 import ReactionsDropdown from './ReactionsDropdown';
+import { Dot } from './Dot';
 
 const StateSwitch = dynamic(() => import('./StateSwitch'));
 const CommentCreateForm = dynamic(() => import('./CommentCreateForm'));
@@ -130,6 +131,13 @@ const GoalPreview: React.FC<GoalPreviewProps> = ({ goal: partialGoal, visible, o
                     <IssueParent kind="team" as="span" mode="compact" parent={team} size="m" />
                 ))}
 
+                {nullable(goal.project?.teams, (teams) => (
+                    <>
+                        <IssueParent kind="team" as="span" mode="compact" parent={teams} size="m" />
+                        <Dot />
+                    </>
+                ))}
+
                 {nullable(goal.project, (project) => (
                     <IssueParent kind="project" as="span" mode="compact" parent={project} size="m" />
                 ))}

diff --git a/src/components/IssueParent.tsx b/src/components/IssueParent.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { useTranslations } from 'next-intl';
 import NextLink from 'next/link';
 
@@ -10,13 +10,15 @@ import { nullable } from '../utils/nullable';
 import { Text } from './Text';
 import { Link } from './Link';
 
+interface Parent {
+    key?: string;
+    slug?: string;
+    title: string;
+}
+
 interface IssueParentProps {
     kind: 'project' | 'team';
-    parent: {
-        key?: string;
-        slug?: string;
-        title: string;
-    };
+    parent: Array<Parent | undefined> | Parent;
     mode?: 'compact' | 'default';
     as?: React.ComponentProps<typeof Text>['as'];
     size?: React.ComponentProps<typeof Text>['size'];
@@ -27,41 +29,57 @@ const sizeGapMap = {
     xs: gapS,
     s: gapS,
     m: gapS,
-    l: gapM,
+    l: gapS,
     xl: gapM,
     xxl: gapM,
 };
 
-const StyledIssueParentTitle = styled(Text)`
-    display: inline-block;
-    padding-top: ${({ size = 'l' }) => sizeGapMap[size]};
+const StyledIssueParentTitle = styled(Text)<{ mode: IssueParentProps['mode'] }>`
+    ${({ mode }) =>
+        mode === 'compact' &&
+        css`
+            display: inline-block;
+        `}
+
+    padding-top: ${({ size = 'm' }) => sizeGapMap[size]};
 `;
 
-export const IssueParent: React.FC<IssueParentProps> = ({ parent, kind, as, mode, size = 'l' }) => {
+export const IssueParent: React.FC<IssueParentProps> = ({ parent, kind, as, mode = 'default', size = 'l' }) => {
     const t = useTranslations('IssueTitle');
+    const normalizedParent = ([] as Array<Parent | undefined>).concat(parent).filter(Boolean) as Array<Parent>;
 
     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>
-        )),
+        project: normalizedParent.map((p, i) =>
+            nullable(p.key, (key) => (
+                <span key={key}>
+                    <NextLink passHref href={routes.project(key)}>
+                        <Link inline>{p.title}</Link>
+                    </NextLink>
+                    {i < normalizedParent.length - 1 ? ', ' : ''}
+                </span>
+            )),
+        ),
+        team: normalizedParent.map((t, i) =>
+            nullable(t.slug, (slug) => (
+                <span key={slug}>
+                    <NextLink passHref href={routes.team(slug)}>
+                        <Link inline>{t.title}</Link>
+                    </NextLink>
+                    {i < normalizedParent.length - 1 ? ', ' : ''}
+                </span>
+            )),
+        ),
     };
 
     const pre = mode === 'compact' ? '' : `${kindTitleMap[kind]} — `;
 
     return (
-        <StyledIssueParentTitle as={as} size={size} weight="bold" color={gray9}>
+        <StyledIssueParentTitle as={as} size={size} weight="bold" color={gray9} mode={mode}>
             {pre}
             {kindContentMap[kind]}
         </StyledIssueParentTitle>

diff --git a/src/pages/goals/[id].tsx b/src/pages/goals/[id].tsx
@@ -261,6 +261,10 @@ const GoalPage = ({
                         <IssueParent kind="team" parent={team} />
                     ))}
 
+                    {nullable(goal.project?.teams, (teams) => (
+                        <IssueParent kind="team" parent={teams} />
+                    ))}
+
                     {nullable(goal.project, (project) => (
                         <IssueParent kind="project" parent={project} />
                     ))}

diff --git a/src/utils/entityFetcher.ts b/src/utils/entityFetcher.ts
@@ -61,6 +61,12 @@ export const goalFetcher = createFetcher((_, id: string) => ({
                         hue: true,
                     },
                 },
+                teams: {
+                    id: true,
+                    key: true,
+                    slug: true,
+                    title: true,
+                },
             },
             activity: {
                 id: true,
-Original file line number
+Diff line change
@@ Expand Up @@
                                         states: true,
                                     },
                                 },
+                                teams: true,
                             },
                         },
                         reactions: {
@@ Expand Down @@