[WEB-5282] chore: triage state in intake (#8135)

* chore: traige state in intake * chore: triage state changes * feat: implement intake state dropdown component and integrate into issue properties * chore: added the triage state validation * chore: added triage state filter * chore: added workspace filter * fix: migration file * chore: added triage group state check * chore: updated the filters * chore: updated the filters * chore: added variables for intake state * fix: import error * refactor: improve project intake state retrieval logic and update TriageGroupIcon component * chore: changed the intake validation logic * refactor: update intake state types and clean up unused interfaces * chore: changed the state color * chore: changed the update serializer * chore: updated with current instance * chore: update TriageGroupIcon color to match new intake state group color * chore: stringified value * chore: added validation in serializer * chore: added logger instead of print * fix: correct component closing syntax in ActiveProjectItem * chore: updated the migration file * chore: added noop in migation --------- Co-authored-by: b-saikrishnakanth <bsaikrishnakanth97@gmail.com>
2025-11-28 16:16:48 +05:30 · 2025-11-28 16:16:48 +05:30 · 78fbdde165
commit 78fbdde165
parent dbc5a6348d
36 changed files with 952 additions and 181 deletions
--- a/packages/propel/src/icons/state/helper.tsx
+++ b/packages/propel/src/icons/state/helper.tsx
@ -1,4 +1,5 @@
 import { EIconSize } from "@plane/constants";
+import type { TIntakeStateGroups } from "@plane/types";

 export interface IStateGroupIcon {
  className?: string;
@ -8,6 +9,14 @@ export interface IStateGroupIcon {
  percentage?: number;
 }

+export interface IIntakeStateGroupIcon {
+  className?: string;
+  color?: string;
+  stateGroup: TIntakeStateGroups;
+  size?: EIconSize;
+  percentage?: number;
+}
+
 export type TStateGroups = "backlog" | "unstarted" | "started" | "completed" | "cancelled";

 export const STATE_GROUP_COLORS: {
@ -20,6 +29,8 @@ export const STATE_GROUP_COLORS: {
  cancelled: "#9AA4BC",
 };

+export const INTAKE_STATE_GROUP_COLORS: { [key in TIntakeStateGroups]: string } = { triage: "#4E5355" };
+
 export const STATE_GROUP_SIZES: {
  [key in EIconSize]: string;
 } = {
--- a/packages/propel/src/icons/state/index.ts
+++ b/packages/propel/src/icons/state/index.ts
@ -4,3 +4,4 @@ export * from "./completed-group-icon";
 export * from "./started-group-icon";
 export * from "./state-group-icon";
 export * from "./unstarted-group-icon";
+export * from "./intake-state-group-icon";
--- a/packages/propel/src/icons/state/intake-state-group-icon.tsx
+++ b/packages/propel/src/icons/state/intake-state-group-icon.tsx
@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { EIconSize } from "@plane/constants";
+import type { IIntakeStateGroupIcon } from "./helper";
+import { INTAKE_STATE_GROUP_COLORS, STATE_GROUP_SIZES } from "./helper";
+import { TriageGroupIcon } from "./triage-group-icon";
+
+const iconComponents = { triage: TriageGroupIcon };
+
+export const IntakeStateGroupIcon: React.FC<IIntakeStateGroupIcon> = ({
+  className = "",
+  color,
+  stateGroup,
+  size = EIconSize.SM,
+}) => {
+  const IntakeStateIconComponent = iconComponents[stateGroup] || TriageGroupIcon;
+
+  return (
+    <IntakeStateIconComponent
+      height={STATE_GROUP_SIZES[size]}
+      width={STATE_GROUP_SIZES[size]}
+      color={color ?? INTAKE_STATE_GROUP_COLORS[stateGroup]}
+      className={`flex-shrink-0 ${className}`}
+    />
+  );
+};
--- a/packages/propel/src/icons/state/triage-group-icon.tsx
+++ b/packages/propel/src/icons/state/triage-group-icon.tsx
@ -0,0 +1,42 @@
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export const TriageGroupIcon: React.FC<ISvgIcons> = ({ width = "20", height = "20", className, color = "#4E5355" }) => {
+  // SVG parameters
+  const viewBoxSize = 16;
+  return (
+    <svg
+      height={height}
+      width={width}
+      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+    >
+      <g clip-path="url(#clip0_3870_37)">
+        <path
+          d="M0.75 8C0.75 3.99594 3.99594 0.75 8 0.75C8.32217 0.75 8.58333 1.01117 8.58333 1.33333C8.58333 1.6555 8.32217 1.91667 8 1.91667C4.64027 1.91667 1.91667 4.64027 1.91667 8C1.91667 11.3597 4.64027 14.0833 8 14.0833C8.32217 14.0833 8.58333 14.3445 8.58333 14.6667C8.58333 14.9888 8.32217 15.25 8 15.25C3.99594 15.25 0.75 12.0041 0.75 8Z"
+          fill={color}
+        />
+        <path
+          d="M10.9855 13.9615L11.078 14.1465C11.1916 14.3737 11.1001 14.6515 10.8663 14.7508C10.6324 14.8501 10.3689 14.7229 10.2845 14.4831L10.1195 14.0143C10.0505 13.8183 10.154 13.6046 10.3453 13.5234C10.5366 13.4423 10.7621 13.5162 10.8553 13.7019L10.9855 13.9615ZM12.6866 13.0286C12.8599 13.2144 12.8506 13.5069 12.6541 13.6681C12.4576 13.8292 12.1691 13.7815 12.0205 13.5754L11.7298 13.1724C11.6082 13.0038 11.6472 12.7694 11.8079 12.6375C11.9685 12.5057 12.2058 12.5131 12.3476 12.665L12.6866 13.0286ZM13.9148 11.5026C14.1333 11.632 14.2067 11.9149 14.0638 12.1249C13.921 12.3348 13.6308 12.3704 13.4302 12.2147L13.0373 11.9097C12.8731 11.7823 12.8444 11.5465 12.9614 11.3748C13.0783 11.203 13.3082 11.1431 13.487 11.2491L13.9148 11.5026ZM14.6627 9.69141C14.9089 9.75393 15.0592 10.0048 14.9813 10.2466C14.9034 10.4883 14.635 10.6044 14.3985 10.5116L13.9362 10.3302C13.7427 10.2542 13.6486 10.036 13.7122 9.83814C13.7759 9.64027 13.9795 9.51796 14.181 9.56911L14.6627 9.69141ZM14.8689 7.74357C15.1228 7.73414 15.3378 7.93242 15.3313 8.18638C15.3248 8.44044 15.0999 8.62755 14.8468 8.60509L14.3518 8.56118C14.1448 8.54281 13.9931 8.36009 13.9986 8.15234C14.004 7.94452 14.165 7.76971 14.3728 7.762L14.8689 7.74357ZM14.5173 5.8165C14.7582 5.73553 15.0206 5.86505 15.0861 6.11063C15.1515 6.35609 14.9886 6.59895 14.7395 6.64882L14.252 6.74642C14.0484 6.78719 13.8514 6.65476 13.798 6.45402C13.7446 6.2532 13.8497 6.0402 14.0467 5.97425L14.3221 5.88209L14.5173 5.8165ZM13.6369 4.06668C13.8452 3.92123 14.1334 3.97157 14.2654 4.1887C14.3974 4.40584 14.3096 4.68491 14.0846 4.80306L13.6448 5.03401C13.4608 5.13061 13.2344 5.0591 13.1264 4.88152C13.0185 4.70392 13.0592 4.46992 13.2296 4.35097L13.6369 4.06668ZM12.2981 2.63637C12.457 2.43806 12.7476 2.40502 12.9357 2.57589C13.1237 2.74673 13.1182 3.03909 12.9358 3.21591L12.5786 3.56218C12.4294 3.70686 12.1919 3.70215 12.0383 3.56213C11.8847 3.42214 11.8577 3.18617 11.9876 3.02398L12.2981 2.63637ZM10.6103 1.64162C10.7068 1.4066 10.9763 1.29298 11.2048 1.404C11.4332 1.51499 11.5105 1.79695 11.3855 2.01805L11.1409 2.45067C11.0386 2.63174 10.8092 2.69437 10.6221 2.60353C10.435 2.51273 10.3425 2.29386 10.4215 2.10151L10.6103 1.64162Z"
+          fill={color}
+        />
+        <path
+          d="M10.5833 8C10.5832 8.32217 10.3215 8.58345 9.99935 8.58333C9.67737 8.58307 9.41664 8.32199 9.41667 8V7.4082L6.41276 10.4121C6.18495 10.6399 5.81504 10.6406 5.58724 10.4128C5.35943 10.185 5.35943 9.81505 5.58724 9.58724L7.00195 8.17318C7.49071 7.68442 8.05115 7.12332 8.59115 6.58333H8C7.67783 6.58333 7.41667 6.32217 7.41667 6C7.41667 5.67783 7.67783 5.41667 8 5.41667H10C10.3222 5.41667 10.5833 5.67783 10.5833 6V8Z"
+          fill={color}
+        />
+        <path
+          d="M5.41667 8C5.41679 7.67783 5.67848 7.41655 6.00065 7.41667C6.32263 7.41693 6.58336 7.67801 6.58333 8V8.5918L9.58724 5.58789C9.81504 5.36009 10.185 5.35943 10.4128 5.58724C10.6406 5.81505 10.6406 6.18495 10.4128 6.41276L8.99805 7.82682C8.50929 8.31558 7.94884 8.87668 7.40885 9.41667H8C8.32217 9.41667 8.58333 9.67783 8.58333 10C8.58333 10.3222 8.32217 10.5833 8 10.5833H6C5.67783 10.5833 5.41667 10.3222 5.41667 10V8Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3870_37">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};