From 6651a4d1a88397c647f69099f9fb79539c953386 Mon Sep 17 00:00:00 2001
From: Anton <sab94a@yandex.ru>
Date: Fri, 4 Aug 2023 13:10:50 +0300
Subject: [PATCH] chore(ProjectListItemCollapsable): remove Goals button

---
 src/components/CollapsableItem.tsx            |  45 ++++--
 src/components/CommonHeader.tsx               |   3 +-
 src/components/ProjectListItem.tsx            |   1 +
 .../ProjectListItemCollapsable.i18n/en.json   |   4 -
 .../ProjectListItemCollapsable.i18n/index.ts  |  17 --
 .../ProjectListItemCollapsable.i18n/ru.json   |   4 -
 .../ProjectListItemCollapsable.tsx            | 147 +++++++-----------
 src/components/ProjectListItemConnected.tsx   |  16 +-
 .../ProjectPageLayout/ProjectPageLayout.tsx   |   8 +-
 .../ProjectsPage/ProjectsPage.i18n/en.json    |   3 +-
 .../ProjectsPage/ProjectsPage.i18n/ru.json    |   3 +-
 src/components/ProjectsPage/ProjectsPage.tsx  |  18 ++-
 12 files changed, 118 insertions(+), 151 deletions(-)
 delete mode 100644 src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.i18n/en.json
 delete mode 100644 src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.i18n/index.ts
 delete mode 100644 src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.i18n/ru.json

diff --git a/src/components/CollapsableItem.tsx b/src/components/CollapsableItem.tsx
index 356ac91d8..00a62f583 100644
--- a/src/components/CollapsableItem.tsx
+++ b/src/components/CollapsableItem.tsx
@@ -38,6 +38,7 @@ const StyledCollapsableHeader = styled.div`
 
 const StyledCollapsableItem = styled.div`
     position: relative;
+    padding-bottom: 1px;
 
     &:before {
         content: '';
@@ -56,7 +57,7 @@ const StyledHeaderContent = styled.div<{ highlighted?: boolean }>`
     `}
 `;
 
-const StyledCollapsableContainer = styled.div<{ collapsed: boolean; deep: number }>`
+const StyledCollapsableContainer = styled.div<{ collapsed: boolean; deep: number; hasChild: boolean }>`
     position: relative;
 
     border-radius: ${radiusM};
@@ -85,8 +86,9 @@ const StyledCollapsableContainer = styled.div<{ collapsed: boolean; deep: number
         padding-left: ${collapseOffset}px;
     `}
 
-    ${({ collapsed, deep }) =>
+    ${({ collapsed, deep, hasChild }) =>
         !collapsed &&
+        hasChild &&
         css`
             padding-left: ${collapseOffset}px;
             margin-left: ${deep === 0 ? -collapseOffset : 0}px;
@@ -143,12 +145,20 @@ const StyledCollapsableContainer = styled.div<{ collapsed: boolean; deep: number
                 margin-left: -${collapseOffset}px;
             }
 
-            > ${StyledCollapsableItem}:before {
+            /** show grey line for additional content section (for example goals list) if it's not last item. See design :) */
+            // TODO: Remove this here https://github.com/taskany-inc/issues/issues/1448
+
+            > ${StyledCollapsableItem}:not(:last-child):before {
                 display: block;
             }
         `}
 `;
 
+export const CollapsableContentItem: FC<{
+    children?: ReactNode;
+    className?: string;
+}> = ({ children, className }) => <StyledCollapsableItem className={className}>{children}</StyledCollapsableItem>;
+
 export const CollapsableItem: FC<{
     children?: ReactNode;
     onClick?: () => void;
@@ -156,16 +166,19 @@ export const CollapsableItem: FC<{
     content: ReactNode;
     deep?: number;
     collapsed: boolean;
-}> = ({ onClick, children, header, collapsed, deep = 0, content }) => (
-    <StyledCollapsableContainer collapsed={collapsed} deep={deep}>
-        <StyledCollapsableHeader onClick={onClick}>
-            <StyledParentDot />
-            <StyledDot />
-            <StyledHeaderContent highlighted={!!onClick && collapsed}>{header}</StyledHeaderContent>
-        </StyledCollapsableHeader>
-        {nullable(children, (ch) => (
-            <StyledCollapsableItem>{ch}</StyledCollapsableItem>
-        ))}
-        {!collapsed ? content : null}
-    </StyledCollapsableContainer>
-);
+    hasChild: boolean;
+}> = ({ onClick, children, header, collapsed, deep = 0, hasChild, content }) => {
+    return (
+        <StyledCollapsableContainer collapsed={collapsed} deep={deep} hasChild={hasChild}>
+            <StyledCollapsableHeader onClick={onClick}>
+                <StyledParentDot />
+                <StyledDot />
+                <StyledHeaderContent highlighted={!!onClick && collapsed}>{header}</StyledHeaderContent>
+            </StyledCollapsableHeader>
+            {nullable(children, (ch) => (
+                <StyledCollapsableItem>{ch}</StyledCollapsableItem>
+            ))}
+            {!collapsed ? content : null}
+        </StyledCollapsableContainer>
+    );
+};
diff --git a/src/components/CommonHeader.tsx b/src/components/CommonHeader.tsx
index b351b750f..ff32e0a75 100644
--- a/src/components/CommonHeader.tsx
+++ b/src/components/CommonHeader.tsx
@@ -12,8 +12,7 @@ interface CommonHeaderProps {
 }
 
 const StyledCommonHeader = styled(PageContent)`
-    display: grid;
-    grid-template-columns: 8fr 4fr;
+    width: calc(2 / 3 * 100%);
 `;
 
 const StyledCommonHeaderInfo = styled.div<{ align: 'left' | 'right' }>`
diff --git a/src/components/ProjectListItem.tsx b/src/components/ProjectListItem.tsx
index 79dbbb8eb..1e1111033 100644
--- a/src/components/ProjectListItem.tsx
+++ b/src/components/ProjectListItem.tsx
@@ -19,6 +19,7 @@ interface ProjectListItemProps {
     className?: string;
     disabled?: boolean;
     averageScore: number | null;
+    onClick?: (e: React.MouseEvent) => void;
 }
 
 const StyledTitleCell = styled(TableCell)`
diff --git a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.i18n/en.json b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.i18n/en.json
deleted file mode 100644
index c44c8f6e9..000000000
--- a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.i18n/en.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-    "Goals": "Goals",
-    "No goals": "No goals"
-}
diff --git a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.i18n/index.ts b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.i18n/index.ts
deleted file mode 100644
index 5c148475b..000000000
--- a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.i18n/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/* eslint-disable */
-// Do not edit, use generator to update
-import { i18n, fmt, I18nLangSet } from 'easy-typed-intl';
-import getLang from '../../../utils/getLang';
-
-import ru from './ru.json';
-import en from './en.json';
-
-export type I18nKey = keyof typeof ru & keyof typeof en;
-type I18nLang = 'ru' | 'en';
-
-const keyset: I18nLangSet<I18nKey> = {};
-
-keyset['ru'] = ru;
-keyset['en'] = en;
-
-export const tr = i18n<I18nLang, I18nKey>(keyset, fmt, getLang);
diff --git a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.i18n/ru.json b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.i18n/ru.json
deleted file mode 100644
index d68d41206..000000000
--- a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.i18n/ru.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-    "Goals": "Цели",
-    "No goals": "Нет целей"
-}
diff --git a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx
index 4145cc54b..d90ec3881 100644
--- a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx
+++ b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx
@@ -1,68 +1,51 @@
-import React, { MouseEvent, ReactNode, useCallback, useMemo } from 'react';
-import NextLink from 'next/link';
+import React, { MouseEvent, ReactNode, useMemo } from 'react';
 import styled from 'styled-components';
-import { Badge, Button, ExternalLinkIcon, Link, Text, nullable } from '@taskany/bricks';
-import { gapS, gray7, gray4, radiusM } from '@taskany/colors';
+import NextLink from 'next/link';
+import { gapXs, gray4, radiusM } from '@taskany/colors';
+import { Text, nullable } from '@taskany/bricks';
+import { IconServersOutline } from '@taskany/icons';
 
 import { ProjectByIdReturnType } from '../../../trpc/inferredTypes';
 import { GoalsListContainer } from '../GoalListItem';
-import { CollapsableItem, collapseOffset } from '../CollapsableItem';
+import { CollapsableItem, CollapsableContentItem, collapseOffset } from '../CollapsableItem';
 import { ProjectListContainer, ProjectListItem } from '../ProjectListItem';
 
-import { tr } from './ProjectListItemCollapsable.i18n';
-
-const StyledNoGoals = styled(Text)`
-    white-space: nowrap;
-`;
-
-const StyledProjectListItemActionsContainer = styled.div`
-    display: flex;
-    align-items: center;
-`;
-
-const StyledProjectListItemAction = styled.div<{ forceVisibility?: boolean }>`
-    visibility: ${({ forceVisibility }) => (forceVisibility ? 'visible' : 'hidden')};
-
-    margin-left: ${gapS};
-
-    &:first-child {
-        margin-left: 0;
-    }
-`;
-
-const StyledProjectListItem = styled(ProjectListItem)`
-    &:hover {
-        ${StyledProjectListItemAction} {
-            visibility: visible;
-        }
-    }
-`;
-
 const StyledGoalsListContainer = styled(GoalsListContainer)`
     background-color: ${gray4};
     border-radius: ${radiusM};
     margin: 0px;
     padding: 0px;
 `;
+
+const StyledProjectIcons = styled.div`
+    display: flex;
+    align-items: center;
+    gap: ${gapXs};
+`;
+
 interface ProjectListItemCollapsableProps {
     href?: string;
     project: NonNullable<ProjectByIdReturnType>;
     goals?: ReactNode;
     children?: ReactNode;
     collapsed: boolean;
-    collapsedGoals: boolean;
     onClick?: () => void;
-    onGoalsClick?: () => void;
     loading?: boolean;
     deep?: number;
 }
 
+const onProjectClickHandler = (e: MouseEvent) => {
+    if (!e.metaKey && !e.ctrlKey) {
+        e.preventDefault();
+    } else {
+        e.stopPropagation();
+    }
+};
+
 export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProps> = ({
     project,
     collapsed = true,
-    collapsedGoals = true,
     onClick,
-    onGoalsClick,
     children,
     goals,
     loading = false,
@@ -71,69 +54,55 @@ export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProp
 }) => {
     const childs = useMemo(() => project.children.map(({ id }) => id), [project]);
 
-    const onClickEnabled = childs.length;
-    const contentHidden = !childs.length || collapsed || loading;
+    const contentHidden = collapsed || loading;
 
     const offset = collapseOffset * (deep > 0 && contentHidden ? deep - 1 : deep);
 
-    const onGoalsButtonClick = useCallback(
-        (e: MouseEvent) => {
-            e.stopPropagation();
-
-            onGoalsClick?.();
-        },
-        [onGoalsClick],
+    const projectComponent = (
+        <ProjectListItem
+            as="a"
+            title={project.title}
+            owner={project.activity}
+            participants={project.participants}
+            starred={project._isStarred}
+            watching={project._isWatching}
+            averageScore={project.averageScore}
+            onClick={onProjectClickHandler}
+        >
+            {nullable(childs.length, (c) => (
+                <StyledProjectIcons>
+                    <IconServersOutline size="xs" />
+                    <Text size="xs">{c}</Text>
+                </StyledProjectIcons>
+            ))}
+        </ProjectListItem>
     );
 
-    const onExternalLinkClick = useCallback((e: MouseEvent) => {
-        e.stopPropagation();
-    }, []);
-
     return (
         <CollapsableItem
             collapsed={contentHidden}
-            onClick={onClickEnabled ? onClick : undefined}
+            onClick={onClick}
+            hasChild={!!childs.length}
             header={
                 <ProjectListContainer offset={offset}>
-                    <StyledProjectListItem
-                        title={project.title}
-                        owner={project.activity}
-                        participants={project.participants}
-                        starred={project._isStarred}
-                        watching={project._isWatching}
-                        disabled={!onClickEnabled}
-                        averageScore={project.averageScore}
-                    >
-                        <StyledProjectListItemActionsContainer>
-                            <StyledProjectListItemAction forceVisibility={!collapsedGoals}>
-                                {project._count.goals ? (
-                                    <Button
-                                        ghost={collapsedGoals}
-                                        onClick={onGoalsButtonClick}
-                                        text={tr('Goals')}
-                                        iconRight={<Badge size="s">{project._count.goals}</Badge>}
-                                    />
-                                ) : (
-                                    <StyledNoGoals color={gray7}>{tr('No goals')}</StyledNoGoals>
-                                )}
-                            </StyledProjectListItemAction>
-                            <StyledProjectListItemAction>
-                                {nullable(href, (h) => (
-                                    <NextLink href={h} passHref legacyBehavior>
-                                        <Link inline target="_blank" onClick={onExternalLinkClick}>
-                                            <ExternalLinkIcon size="s" />
-                                        </Link>
-                                    </NextLink>
-                                ))}
-                            </StyledProjectListItemAction>
-                        </StyledProjectListItemActionsContainer>
-                    </StyledProjectListItem>
+                    {href ? (
+                        <NextLink href={href} passHref legacyBehavior>
+                            {projectComponent}
+                        </NextLink>
+                    ) : (
+                        projectComponent
+                    )}
                 </ProjectListContainer>
             }
-            content={children}
+            content={
+                <>
+                    <CollapsableContentItem>
+                        <StyledGoalsListContainer offset={offset}>{goals}</StyledGoalsListContainer>
+                    </CollapsableContentItem>
+                    {children}
+                </>
+            }
             deep={deep}
-        >
-            {!collapsedGoals && <StyledGoalsListContainer offset={offset}>{goals}</StyledGoalsListContainer>}
-        </CollapsableItem>
+        ></CollapsableItem>
     );
 };
diff --git a/src/components/ProjectListItemConnected.tsx b/src/components/ProjectListItemConnected.tsx
index d1573d56a..772e6122d 100644
--- a/src/components/ProjectListItemConnected.tsx
+++ b/src/components/ProjectListItemConnected.tsx
@@ -17,7 +17,6 @@ export const ProjectListItemConnected: FC<{
     selectedResolver?: (id: string) => boolean;
     deep?: number;
     collapsed?: boolean;
-    collapsedGoals?: boolean;
     hasLink?: boolean;
 }> = ({
     hasLink = false,
@@ -28,10 +27,8 @@ export const ProjectListItemConnected: FC<{
     selectedResolver,
     deep = 0,
     collapsed: defaultCollapsed = false,
-    collapsedGoals: defaultCollapsedGoals = false,
 }) => {
     const [collapsed, setIsCollapsed] = useState(defaultCollapsed);
-    const [collapsedGoals, setIsCollapsedGoals] = useState(defaultCollapsedGoals);
 
     const { data: projectDeepInfo } = trpc.project.getDeepInfo.useQuery(
         {
@@ -39,7 +36,7 @@ export const ProjectListItemConnected: FC<{
             goalsQuery: queryState,
         },
         {
-            enabled: !collapsedGoals,
+            enabled: !collapsed,
             keepPreviousData: true,
             staleTime: refreshInterval,
         },
@@ -57,9 +54,11 @@ export const ProjectListItemConnected: FC<{
         setIsCollapsed((value) => !value);
     }, []);
 
-    const onGoalsClick = useCallback(() => {
-        setIsCollapsedGoals((value) => !value);
-    }, []);
+    // hide projects without goals
+
+    if (!project._count.goals) {
+        return null;
+    }
 
     return (
         <ProjectListItemCollapsable
@@ -91,9 +90,7 @@ export const ProjectListItemConnected: FC<{
             ))}
             project={project}
             collapsed={collapsed}
-            collapsedGoals={collapsedGoals}
             onClick={onClick}
-            onGoalsClick={onGoalsClick}
             loading={status === 'loading'}
             deep={deep}
         >
@@ -107,7 +104,6 @@ export const ProjectListItemConnected: FC<{
                     onTagClick={onTagClick}
                     onClickProvider={onClickProvider}
                     selectedResolver={selectedResolver}
-                    collapsedGoals
                     collapsed
                 />
             ))}
diff --git a/src/components/ProjectPageLayout/ProjectPageLayout.tsx b/src/components/ProjectPageLayout/ProjectPageLayout.tsx
index cf7c5c5db..e56790d41 100644
--- a/src/components/ProjectPageLayout/ProjectPageLayout.tsx
+++ b/src/components/ProjectPageLayout/ProjectPageLayout.tsx
@@ -29,7 +29,7 @@ interface ProjectPageLayoutProps {
 
 const ProjectHeader = styled(PageContent)`
     display: grid;
-    grid-template-columns: 8fr 4fr;
+    grid-template-columns: 8fr;
 `;
 
 const StyledProjectHeaderTitle = styled(Text)`
@@ -58,7 +58,7 @@ export const ProjectPageLayout: React.FC<ProjectPageLayoutProps> = ({
     const { toggleProjectWatching, toggleProjectStar } = useProjectResource(id);
 
     const tabsMenuOptions: Array<[string, string, boolean]> = [
-        [tr('Goals'), routes.project(id), true],
+        [tr('Goals'), routes.project(id), false],
         [tr('Settings'), routes.projectSettings(id), true],
     ];
 
@@ -93,7 +93,7 @@ export const ProjectPageLayout: React.FC<ProjectPageLayoutProps> = ({
                     ))}
                 </PageActions>
 
-                {owned && (
+                {
                     <TabsMenu>
                         {tabsMenuOptions.map(([title, href, ownerOnly]) =>
                             nullable(ownerOnly ? owned : true, () => (
@@ -103,7 +103,7 @@ export const ProjectPageLayout: React.FC<ProjectPageLayoutProps> = ({
                             )),
                         )}
                     </TabsMenu>
-                )}
+                }
             </ProjectHeader>
 
             {children}
diff --git a/src/components/ProjectsPage/ProjectsPage.i18n/en.json b/src/components/ProjectsPage/ProjectsPage.i18n/en.json
index b70854d6b..5565930dd 100644
--- a/src/components/ProjectsPage/ProjectsPage.i18n/en.json
+++ b/src/components/ProjectsPage/ProjectsPage.i18n/en.json
@@ -3,5 +3,6 @@
     "Reset": "Reset",
     "created by": "created by",
     "Projects": "Projects",
-    "description": "This is page with all projects hierarchy. You can open goals and issues for any project right here. "
+    "description": "This is page with all projects hierarchy. You can open goals and issues for any project right here. ",
+    "Goals": "Goals"
 }
diff --git a/src/components/ProjectsPage/ProjectsPage.i18n/ru.json b/src/components/ProjectsPage/ProjectsPage.i18n/ru.json
index fd9691b8c..52566ea98 100644
--- a/src/components/ProjectsPage/ProjectsPage.i18n/ru.json
+++ b/src/components/ProjectsPage/ProjectsPage.i18n/ru.json
@@ -3,5 +3,6 @@
     "Reset": "Сбросить",
     "created by": "автор",
     "Projects": "Проекты",
-    "description": "Это страница со всей иерархией проектов. Вы можете открывать цели и задачи прямо здесь."
+    "description": "Это страница со всей иерархией проектов. Вы можете открывать цели и задачи прямо здесь.",
+    "Goals": "Цели"
 }
diff --git a/src/components/ProjectsPage/ProjectsPage.tsx b/src/components/ProjectsPage/ProjectsPage.tsx
index 861b1d034..f66787bf4 100644
--- a/src/components/ProjectsPage/ProjectsPage.tsx
+++ b/src/components/ProjectsPage/ProjectsPage.tsx
@@ -2,7 +2,8 @@
 import { MouseEventHandler, useCallback } from 'react';
 import { useRouter as useNextRouter } from 'next/router';
 import dynamic from 'next/dynamic';
-import { Button, nullable } from '@taskany/bricks';
+import NextLink from 'next/link';
+import { Button, TabsMenu, TabsMenuItem, nullable } from '@taskany/bricks';
 
 import { ExternalPageProps } from '../../utils/declareSsrProps';
 import { FiltersPanel } from '../FiltersPanel/FiltersPanel';
@@ -18,6 +19,7 @@ import { FilterById, GoalByIdReturnType } from '../../../trpc/inferredTypes';
 import { CommonHeader } from '../CommonHeader';
 import { ProjectListItemConnected } from '../ProjectListItemConnected';
 import { useGoalPreview } from '../GoalPreview/GoalPreviewProvider';
+import { routes } from '../../hooks/router';
 
 import { tr } from './ProjectsPage.i18n';
 
@@ -25,6 +27,8 @@ const ModalOnEvent = dynamic(() => import('../ModalOnEvent'));
 const FilterCreateForm = dynamic(() => import('../FilterCreateForm/FilterCreateForm'));
 const FilterDeleteForm = dynamic(() => import('../FilterDeleteForm/FilterDeleteForm'));
 
+const tabsMenuOptions: Array<[string, string]> = [[tr('Goals'), routes.projects()]];
+
 export const ProjectsPage = ({ user, ssrTime }: ExternalPageProps) => {
     const nextRouter = useNextRouter();
     const { toggleFilterStar } = useFilterResource();
@@ -145,7 +149,16 @@ export const ProjectsPage = ({ user, ssrTime }: ExternalPageProps) => {
 
     return (
         <Page user={user} ssrTime={ssrTime} title={tr('title')}>
-            <CommonHeader title={title} description={description} />
+            <CommonHeader title={title} description={description}>
+                <TabsMenu>
+                    {tabsMenuOptions.map(([title, href]) => (
+                        <NextLink key={title} href={href} passHref legacyBehavior>
+                            <TabsMenuItem active={nextRouter.asPath.split('?')[0] === href}>{title}</TabsMenuItem>
+                        </NextLink>
+                    ))}
+                </TabsMenu>
+            </CommonHeader>
+
             <FiltersPanel
                 queryState={queryState}
                 queryString={queryString}
@@ -178,7 +191,6 @@ export const ProjectsPage = ({ user, ssrTime }: ExternalPageProps) => {
                         onClickProvider={onGoalPrewiewShow}
                         selectedResolver={selectedGoalResolver}
                         queryState={queryState}
-                        collapsedGoals
                         collapsed
                         hasLink
                     />