refactor(ProjectSubscriptionButtons): remove component icon button, a…

…dd new icon variant
taskany-inc · Aug 12, 2024 · a703395 · a703395
1 parent 5be3a0d
commit a703395
Show file tree

Hide file tree

Showing 21 changed files with 177 additions and 266 deletions.
diff --git a/cypress/fixtures/langs.json b/cypress/fixtures/langs.json
@@ -881,6 +881,12 @@
             "en": "Create"
         }
     },
+    "NoGoalsText": {
+        "No goals yet": {
+            "ru": "",
+            "en": ""
+        }
+    },
     "OfflineBanner": {
         "You are currently offline. Check connection.": {
             "ru": "Вы сейчас не в сети. Проверьте подключение.",
@@ -1047,12 +1053,6 @@
             "en": "Create"
         }
     },
-    "ProjectListItem": {
-        "Create Goal": {
-            "ru": "",
-            "en": ""
-        }
-    },
     "ProjectPage": {
         "title": {
             "ru": "Taskany — {project}",
@@ -1209,6 +1209,12 @@
             "en": "Ok, got it"
         }
     },
+    "ProjectSubscriptionButtons": {
+        "Create goal": {
+            "ru": "Создать цель",
+            "en": ""
+        }
+    },
     "ProjectSwitchPublicConfirmModal": {
         "You are going to make project public": {
             "ru": "Вы собираетесь сделать проект публичным",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "@sentry/nextjs": "7.99.0",
     "@tanstack/react-query": "4.29.5",
     "@tanstack/react-query-devtools": "4.29.6",
-    "@taskany/bricks": "5.43.0",
+    "@taskany/bricks": "5.44.0",
     "@taskany/colors": "1.13.0",
     "@taskany/icons": "2.0.7",
     "@tippyjs/react": "4.2.6",

diff --git a/src/components/DashboardPage/DashboardPage.tsx b/src/components/DashboardPage/DashboardPage.tsx
@@ -14,13 +14,13 @@ import { Page } from '../Page/Page';
 import { useGoalPreview } from '../GoalPreview/GoalPreviewProvider';
 import { useFMPMetric } from '../../utils/telemetry';
 import { LoadMoreButton } from '../LoadMoreButton/LoadMoreButton';
-import { InlineCreateGoalControl } from '../InlineCreateGoalControl/InlineCreateGoalControl';
 import { ProjectListItemCollapsable } from '../ProjectListItemCollapsable/ProjectListItemCollapsable';
 import { routes } from '../../hooks/router';
 import { GoalTableList, mapToRenderProps } from '../GoalTableList/GoalTableList';
 import { PresetModals } from '../PresetModals';
 import { FiltersPanel } from '../FiltersPanel/FiltersPanel';
 import { Kanban, buildKanban } from '../Kanban/Kanban';
+import { NoGoalsText } from '../NoGoalsText/NoGoalsText';
 import { safeUserData } from '../../utils/getUserName';
 
 import { tr } from './DashboardPage.i18n';
@@ -151,10 +151,11 @@ export const DashboardPage = ({ user, ssrTime, defaultPresetFallback }: External
                             project={project}
                             href={routes.project(project.id, view ? `view=${view}` : undefined)}
                             goals={children}
-                            canCreateGoal
+                            actionButtonView="icons"
+                            editable
                         >
                             {nullable(!goals?.length, () => (
-                                <InlineCreateGoalControl project={project} />
+                                <NoGoalsText />
                             ))}
                         </ProjectListItemCollapsable>
                     );

diff --git a/src/components/NoGoalsText/NoGoalsText.i18n/en.json b/src/components/NoGoalsText/NoGoalsText.i18n/en.json
@@ -0,0 +1,3 @@
+{
+    "No goals yet": ""
+}
diff --git a/src/components/NoGoalsText/NoGoalsText.i18n/index.ts b/src/components/NoGoalsText/NoGoalsText.i18n/index.ts
@@ -0,0 +1,17 @@
+/* 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/NoGoalsText/NoGoalsText.i18n/ru.json b/src/components/NoGoalsText/NoGoalsText.i18n/ru.json
@@ -0,0 +1,3 @@
+{
+    "No goals yet": "Пока нет целей"
+}
diff --git a/src/components/NoGoalsText/NoGoalsText.tsx b/src/components/NoGoalsText/NoGoalsText.tsx
@@ -0,0 +1,7 @@
+import { Text } from '@taskany/bricks/harmony';
+
+import { tr } from './NoGoalsText.i18n';
+
+export const NoGoalsText = () => {
+    return <Text size="m">{tr('No goals yet')}</Text>;
+};
diff --git a/src/components/ProjectListItem/ProjectListItem.tsx b/src/components/ProjectListItem/ProjectListItem.tsx
@@ -4,9 +4,8 @@ import cn from 'classnames';
 import { IconStarSolid, IconEyeOutline } from '@taskany/icons';
 import { ComponentProps, useMemo } from 'react';
 
-import { ProjectSubscriptionIconButtons } from '../ProjectSubscriptionIconButtons/ProjectSubscriptionIconButtons';
 import { ActivityByIdReturnType } from '../../../trpc/inferredTypes';
-import { ProjectSubscriptionButtons } from '../ProjectSubscriptionButtons';
+import { ProjectSubscriptionButtons } from '../ProjectSubscriptionButtons/ProjectSubscriptionButtons';
 import { safeUserData } from '../../utils/getUserName';
 import { watch, participants as participantsDO } from '../../utils/domObjects';
 
@@ -23,7 +22,7 @@ interface ProjectListItemProps {
     starred?: boolean;
     watching?: boolean;
     averageScore: number | null;
-    canCreateGoal?: boolean;
+    actionButtonView?: 'default' | 'icons';
 }
 
 export const ProjectListItem: React.FC<ProjectListItemProps & ComponentProps<typeof TableRow>> = ({
@@ -38,7 +37,7 @@ export const ProjectListItem: React.FC<ProjectListItemProps & ComponentProps<typ
     averageScore,
     className,
     editable,
-    canCreateGoal,
+    actionButtonView,
     ...attrs
 }) => {
     const ownerUserGroup = useMemo(() => [owner].map(safeUserData).filter(Boolean), [owner]);
@@ -66,10 +65,10 @@ export const ProjectListItem: React.FC<ProjectListItemProps & ComponentProps<typ
             <TableCell
                 width={40}
                 className={cn(s.ProjectListItemIcons, {
-                    [s.ProjectListItemIcons_editable]: editable || canCreateGoal,
+                    [s.ProjectListItemIcons_editable]: editable,
                 })}
             >
-                {nullable(!canCreateGoal && !editable, () => (
+                {nullable(!editable, () => (
                     <>
                         {nullable(starred, () => (
                             <IconStarSolid size="s" />
@@ -81,20 +80,13 @@ export const ProjectListItem: React.FC<ProjectListItemProps & ComponentProps<typ
                 ))}
                 {nullable(editable, () => (
                     <ProjectSubscriptionButtons
-                        id={id}
+                        project={{ flowId, id, title }}
                         starred={starred}
+                        view={actionButtonView}
                         watching={watching}
                         stargizersCounter={stargizers}
                     />
                 ))}
-
-                {nullable(canCreateGoal, () => (
-                    <ProjectSubscriptionIconButtons
-                        starred={starred}
-                        watching={watching}
-                        project={{ flowId, id, title }}
-                    />
-                ))}
             </TableCell>
         </TableRow>
     );

diff --git a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx
@@ -20,7 +20,7 @@ interface ProjectListItemCollapsableProps extends Omit<ComponentProps<typeof Tre
     onClick?: MouseEventHandler<HTMLElement>;
     titleSize?: 'm' | 'l';
     editable?: boolean;
-    canCreateGoal?: boolean;
+    actionButtonView?: 'default' | 'icons';
 }
 
 export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProps> = ({
@@ -33,8 +33,8 @@ export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProp
     className,
     titleSize = 'l',
     interactive = true,
+    actionButtonView,
     onClick,
-    canCreateGoal,
     ...props
 }) => {
     const projectComponent = (
@@ -68,7 +68,7 @@ export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProp
                 watching={project._isWatching}
                 averageScore={project.averageScore}
                 editable={editable}
-                canCreateGoal={canCreateGoal}
+                actionButtonView={actionButtonView}
             />
         </TableRowItem>
     );

diff --git a/src/components/ProjectListItemConnected.tsx b/src/components/ProjectListItemConnected.tsx
@@ -11,9 +11,9 @@ import { safeUserData } from '../utils/getUserName';
 
 import { GoalTableList, mapToRenderProps } from './GoalTableList/GoalTableList';
 import { ProjectListItemCollapsable } from './ProjectListItemCollapsable/ProjectListItemCollapsable';
-import { InlineCreateGoalControl } from './InlineCreateGoalControl/InlineCreateGoalControl';
 import { useGoalPreview } from './GoalPreview/GoalPreviewProvider';
 import { Kanban, buildKanban } from './Kanban/Kanban';
+import { NoGoalsText } from './NoGoalsText/NoGoalsText';
 
 interface ProjectListItemConnectedProps extends ComponentProps<typeof ProjectListItemCollapsable> {
     parent?: ComponentProps<typeof ProjectListItemCollapsable>['project'];
@@ -133,10 +133,7 @@ export const ProjectListItemConnected: FC<ProjectListItemConnectedProps> = ({
                 {...props}
             >
                 <TreeViewElement>
-                    {nullable(
-                        !projectDeepInfo?.goals.length,
-                        () => !isLoading && <InlineCreateGoalControl project={project} />,
-                    )}
+                    {nullable(!projectDeepInfo?.goals.length, () => !isLoading && <NoGoalsText />)}
                 </TreeViewElement>
                 {nullable(view !== 'kanban', () => subNodes)}
             </ProjectListItemCollapsable>