feat(NewGoalCriteria): use harmony components for similar view in pop…

…up and goal preview

package.json

@@ -49,9 +49,9 @@
     "@sentry/nextjs": "7.99.0",
     "@tanstack/react-query": "4.29.5",
     "@tanstack/react-query-devtools": "4.29.6",
-    "@taskany/bricks": "5.23.0",
+    "@taskany/bricks": "5.23.1",
     "@taskany/colors": "1.12.1",
-    "@taskany/icons": "2.0.1",
+    "@taskany/icons": "2.0.7",
     "@tippyjs/react": "4.2.6",
     "@trpc/client": "10.35.0",
     "@trpc/next": "10.35.0",

src/components/CriteriaForm/CriteriaForm.tsx

@@ -19,6 +19,7 @@ interface SuggestItem {
     id: string;
     title: string;
     stateColor?: number;
+    _shortId: string;
 }
 
 interface ValidityData {
@@ -434,6 +435,7 @@ export const CriteriaForm = ({
 
             <input type="hidden" {...register('id')} />
             <input type="hidden" {...register('selected.id')} />
+            <input type="hidden" {...register('selected._shortId')} />
             <input type="hidden" {...register('selected.title')} />
         </Form>
     );

src/components/GoalActivityFeed/GoalActivityFeed.i18n/en.json

@@ -0,0 +1,3 @@
+{
+    "Add achievement criteria": "Add achievement criteria"
+}

src/components/GoalActivityFeed/GoalActivityFeed.i18n/ru.json

@@ -0,0 +1,3 @@
+{
+    "Add achievement criteria": "Добавить критерий"
+}

src/components/GoalActivityFeed.tsx → src/components/GoalActivityFeed/GoalActivityFeed.tsx

@@ -2,32 +2,35 @@ import { nullable } from '@taskany/bricks';
 import { forwardRef, useCallback } from 'react';
 import dynamic from 'next/dynamic';
 
-import { ModalEvent, dispatchModalEvent } from '../utils/dispatchModal';
-import { editGoalKeys } from '../utils/hotkeys';
-import { GoalByIdReturnType } from '../../trpc/inferredTypes';
-import { useGoalResource } from '../hooks/useGoalResource';
-import { usePageContext } from '../hooks/usePageContext';
-
-import { GoalDeleteModal } from './GoalDeleteModal/GoalDeleteModal';
-import { CommentView } from './CommentView/CommentView';
-import { GoalCriteria } from './GoalCriteria/GoalCriteria';
-import { GoalActivity } from './GoalActivity';
-
-const ModalOnEvent = dynamic(() => import('./ModalOnEvent'));
-const GoalEditForm = dynamic(() => import('./GoalEditForm/GoalEditForm'));
-const GoalCommentCreateForm = dynamic(() => import('./GoalCommentCreateForm'));
+import { ModalEvent, dispatchModalEvent } from '../../utils/dispatchModal';
+import { editGoalKeys } from '../../utils/hotkeys';
+import { GoalByIdReturnType } from '../../../trpc/inferredTypes';
+import { useGoalResource } from '../../hooks/useGoalResource';
+import { usePageContext } from '../../hooks/usePageContext';
+import { GoalDeleteModal } from '../GoalDeleteModal/GoalDeleteModal';
+import { CommentView } from '../CommentView/CommentView';
+import { GoalActivity } from '../GoalActivity';
+import { GoalCriteriaView, mapCriteria } from '../GoalCriteria/GoalCriteria';
+import { AddInlineTrigger } from '../AddInlineTrigger';
+import { GoalCriteriaSuggest } from '../GoalCriteriaSuggest';
+import { GoalFormPopupTrigger } from '../GoalFormPopupTrigger';
+
+import { tr } from './GoalActivityFeed.i18n';
+
+const ModalOnEvent = dynamic(() => import('../ModalOnEvent'));
+const GoalEditForm = dynamic(() => import('../GoalEditForm/GoalEditForm'));
+const GoalCommentCreateForm = dynamic(() => import('../GoalCommentCreateForm'));
 
 interface GoalActivityFeedProps {
     goal: NonNullable<GoalByIdReturnType>;
     shortId?: string;
 
-    onGoalClick?: (goal: { _shortId: string }) => void;
     onGoalDeleteConfirm?: () => void;
     onInvalidate?: () => void;
 }
 
 export const GoalActivityFeed = forwardRef<HTMLDivElement, GoalActivityFeedProps>(
-    ({ goal, shortId, onGoalClick, onGoalDeleteConfirm, onInvalidate }, ref) => {
+    ({ goal, shortId, onGoalDeleteConfirm, onInvalidate }, ref) => {
         const { user } = usePageContext();
         const {
             onGoalCommentUpdate,
@@ -86,7 +89,7 @@ export const GoalActivityFeed = forwardRef<HTMLDivElement, GoalActivityFeedProps
         );
 
         const handleUpdateCriteria = useCallback(
-            async (data: { id?: string; title: string; weight: string; selected?: { id?: string } }) => {
+            async (data: { id?: string; title: string; weight?: number; selected?: { id?: string } }) => {
                 if (!data.id) return;
 
                 await onGoalCriteriaUpdate({
@@ -142,18 +145,42 @@ export const GoalActivityFeed = forwardRef<HTMLDivElement, GoalActivityFeedProps
                     header={
                         <>
                             {nullable(goal._criteria?.length || goal._isEditable, () => (
-                                <GoalCriteria
+                                <GoalCriteriaView
                                     goalId={goal.id}
                                     canEdit={goal._isEditable}
-                                    onCreate={handleCreateCriteria}
                                     onUpdate={handleUpdateCriteria}
-                                    onUpdateState={handleUpdateCriteriaState}
-                                    onConvertToGoal={handleConvertCriteriaToGoal}
+                                    onCheck={handleUpdateCriteriaState}
+                                    onConvert={handleConvertCriteriaToGoal}
                                     onRemove={handleRemoveCriteria}
-                                    onGoalClick={onGoalClick}
-                                    validateGoalCriteriaBindings={validateGoalCriteriaBindings}
-                                    list={goal._criteria}
-                                />
+                                    list={goal._criteria?.map((criteria) =>
+                                        mapCriteria(criteria, criteria.criteriaGoal),
+                                    )}
+                                >
+                                    {nullable(goal._isEditable, () => (
+                                        <GoalFormPopupTrigger
+                                            renderTrigger={(props) => (
+                                                <AddInlineTrigger
+                                                    text={tr('Add achievement criteria')}
+                                                    ref={props.ref}
+                                                    onClick={props.onClick}
+                                                    centered={false}
+                                                />
+                                            )}
+                                        >
+                                            <GoalCriteriaSuggest
+                                                id={goal.id}
+                                                withModeSwitch
+                                                defaultMode="simple"
+                                                items={goal._criteria.map((criteria) => ({
+                                                    ...criteria,
+                                                    goal: criteria.criteriaGoal,
+                                                }))}
+                                                onSubmit={handleCreateCriteria}
+                                                validateGoalCriteriaBindings={validateGoalCriteriaBindings}
+                                            />
+                                        </GoalFormPopupTrigger>
+                                    ))}
+                                </GoalCriteriaView>
                             ))}
                             {nullable(lastStateComment, (value) => (
                                 <CommentView

src/components/GoalCriteria/GoalCriteria.i18n/en.json

@@ -1,7 +1,7 @@
 {
-    "Achievement criteria": "",
-    "Create as goal": "",
-    "Delete": "",
-    "Add achievement criteria": "",
-    "Edit": ""
+    "Achievement criteria": "Achievement criteria",
+    "Loading ...": "Loading ...",
+    "Edit": "Edit",
+    "Create as goal": "Create as goal",
+    "Delete": "Delete"
 }

src/components/GoalCriteria/GoalCriteria.i18n/ru.json

@@ -1,7 +1,7 @@
 {
     "Achievement criteria": "Критерии достижимости",
+    "Loading ...": "Загрузка ...",
+    "Edit": "Изменить",
     "Create as goal": "Создать, как цель",
-    "Delete": "Удалить",
-    "Add achievement criteria": "Добавить критерий",
-    "Edit": "Изменить"
+    "Delete": "Удалить"
 }

src/components/GoalCriteria/GoalCriteria.module.css

@@ -1,33 +1,75 @@
+.GoalCriteria {
+    /* for non-interactive popups allow inner events */
+    pointer-events: all;
+    width: 400px;
+}
+
+.GoalCriteriaTitle {
+    color: var(--text-secondary);
+    padding-bottom: var(--gap-xs);
+    border-bottom: 1px solid var(--gray-900);
+}
+
+.GoalCriteriaTable {
+    margin-top: var(--gap-sm);
+}
+
 .GoalCriteriaItemTitle {
-    flex: 1;
+    line-height: 24px;
+}
+
+.GoalCriteriaItemTitleStrike,
+.GoalCriteriaItemWeight {
+    color: var(--text-secondary);
+}
+
+.GoalCriteriaWeightColumn {
+    text-align: right;
 }
 
-.GoalCriteriaIssueMeta {
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: minmax(32px, 100%);
-    align-items: center;
-    gap: var(--gap-s);
-    max-width: 520px;
+.GoalCriteriaTableRow {
+    align-items: baseline;
 }
 
-.GoalCriteriaCheckBox {
-    display: inline-flex;
+.GoalCriteriaGoalBadge {
+    align-items: baseline;
     cursor: pointer;
-    color: var(--gray-800)
 }
 
-.GoalCriteriaCheckBox:hover {
-    color: var(--gray-500)
+.GoalCriteriaItemCheckbox,
+.GoalCriteriaGoalBadge {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.GoalCriteriaTrigger {
+    cursor: pointer;
+}
+.GoalCriteriaLoader {
+    display: flex;
+    justify-content: center;
+}
+
+.GoalCriteriaActions {
+    display: flex;
+    flex-direction: column;
+    width: max-content;
+}
+
+.GoalCriteriaActionsItem {
+    padding: var(--gap-xs);
+}
+
+.GoalCriteriaActionsItem:hover {
+    background-color: var(--gray-900);
 }
 
-.GoalCriteriaCheckBox_disabled {
-    pointer-events: none;
-    cursor: default;
+.GoalCriteriaIssueMeta.GoalCriteriaIssueMeta {
+    max-width: max-content;
 }
 
-.GoalCriteriaCheckBox_checked, 
-.GoalCriteriaCheckBox_checked:hover {
-    color: var(--brand-color);
-    fill: var(--background-color);
+/* increasing selector specificity for override SC priority */
+.GoalCriteriaIssueMetaReset.GoalCriteriaIssueMetaReset {
+    padding: 0;
+
 }