From 9663fcb1728e5d00d1eeddfed96ff3775bbfc11c Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <70131915+Saurabhkmr98@users.noreply.github.com>
Date: Fri, 25 Jul 2025 18:23:17 +0530
Subject: [PATCH] [SILO-417] Allow to uncheck states in PR mapping #3748

---
 .../form/state-form/root.tsx                  |  3 ++-
 .../form/state-form/selection.tsx             | 24 ++++++++++++++-----
 .../form/state-form/root.tsx                  |  3 ++-
 .../form/state-form/selection.tsx             | 20 ++++++++++++----
 packages/etl/src/core/helpers/constants.ts    | 14 +++++++++++
 5 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/apps/web/ee/components/integrations/github/sections/repository-mapping/form/state-form/root.tsx b/apps/web/ee/components/integrations/github/sections/repository-mapping/form/state-form/root.tsx
index 88b65c4eed..c585eac48f 100644
--- a/apps/web/ee/components/integrations/github/sections/repository-mapping/form/state-form/root.tsx
+++ b/apps/web/ee/components/integrations/github/sections/repository-mapping/form/state-form/root.tsx
@@ -2,6 +2,7 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
+import { EMPTY_PLANE_STATE } from "@plane/etl/core";
 import { useTranslation } from "@plane/i18n";
 import { IState } from "@plane/types";
 // plane web components
@@ -68,7 +69,7 @@ export const StateForm: FC<TStateForm> = observer((props) => {
             key={gitState.key}
             value={value?.[gitState.key]?.id || undefined}
             handleValue={(value: IState | undefined) => handleChange(gitState.key, value)}
-            planeStates={planeProjectStates}
+            planeStates={[EMPTY_PLANE_STATE, ...planeProjectStates]}
           />
         ))}
     </div>
diff --git a/apps/web/ee/components/integrations/github/sections/repository-mapping/form/state-form/selection.tsx b/apps/web/ee/components/integrations/github/sections/repository-mapping/form/state-form/selection.tsx
index 5119d763b0..91436a03e2 100644
--- a/apps/web/ee/components/integrations/github/sections/repository-mapping/form/state-form/selection.tsx
+++ b/apps/web/ee/components/integrations/github/sections/repository-mapping/form/state-form/selection.tsx
@@ -2,10 +2,12 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
 import { IState } from "@plane/types";
 import { StateGroupIcon } from "@plane/ui";
 // plane web components
 import { Dropdown } from "@/plane-web/components/importers/ui";
+import { Ban } from "lucide-react";
 
 type TStateFormSelection = {
   title: string;
@@ -16,6 +18,7 @@ type TStateFormSelection = {
 
 export const StateFormSelection: FC<TStateFormSelection> = observer((props) => {
   const { title, value, handleValue, planeStates } = props;
+  const { t } = useTranslation();
 
   return (
     <div className="relative grid grid-cols-2 items-center space-y-1.5 text-sm">
@@ -29,18 +32,27 @@ export const StateFormSelection: FC<TStateFormSelection> = observer((props) => {
             data: state,
           }))}
           value={value}
-          placeHolder="Select state"
+          placeHolder={t("integrations.select_state")}
           onChange={(value: string | undefined) => {
             if (value) {
               const state = planeStates.find((state) => state.id === value);
               handleValue(state || undefined);
             } else handleValue(undefined);
           }}
-          iconExtractor={(option) => (
-            <div className="w-4.5 h-4.5 flex-shrink-0 overflow-hidden relative flex justify-center items-center">
-              <StateGroupIcon stateGroup={option?.group || "backlog"} />
-            </div>
-          )}
+          iconExtractor={(option) => {
+            if (!option.id) {
+              return (
+                <div className="w-2.5 h-2.5 flex-shrink-0 overflow-hidden relative flex justify-center items-center">
+                  <Ban />
+                </div>
+              );
+            }
+            return (
+              <div className="w-4.5 h-4.5 flex-shrink-0 overflow-hidden relative flex justify-center items-center">
+                <StateGroupIcon stateGroup={option?.group || "backlog"} />
+              </div>
+            );
+          }}
           queryExtractor={(option) => option.name}
         />
       </div>
diff --git a/apps/web/ee/components/integrations/gitlab/sections/repository-mapping/form/state-form/root.tsx b/apps/web/ee/components/integrations/gitlab/sections/repository-mapping/form/state-form/root.tsx
index 1d0b491f72..0d6d0ebee9 100644
--- a/apps/web/ee/components/integrations/gitlab/sections/repository-mapping/form/state-form/root.tsx
+++ b/apps/web/ee/components/integrations/gitlab/sections/repository-mapping/form/state-form/root.tsx
@@ -2,6 +2,7 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
+import { EMPTY_PLANE_STATE } from "@plane/etl/core";
 import { useTranslation } from "@plane/i18n";
 import { IState } from "@plane/types";
 // plane web components
@@ -67,7 +68,7 @@ export const StateForm: FC<TStateForm> = observer((props) => {
             key={gitState.key}
             value={value?.[gitState.key]?.id || undefined}
             handleValue={(value: IState | undefined) => handleChange(gitState.key, value)}
-            planeStates={planeProjectStates}
+            planeStates={[EMPTY_PLANE_STATE, ...planeProjectStates]}
           />
         ))}
     </div>
diff --git a/apps/web/ee/components/integrations/gitlab/sections/repository-mapping/form/state-form/selection.tsx b/apps/web/ee/components/integrations/gitlab/sections/repository-mapping/form/state-form/selection.tsx
index 912e5b271a..f47ffac57b 100644
--- a/apps/web/ee/components/integrations/gitlab/sections/repository-mapping/form/state-form/selection.tsx
+++ b/apps/web/ee/components/integrations/gitlab/sections/repository-mapping/form/state-form/selection.tsx
@@ -2,6 +2,7 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
+import { Ban } from "lucide-react";
 import { IState } from "@plane/types";
 import { StateGroupIcon } from "@plane/ui";
 // plane web components
@@ -38,11 +39,20 @@ export const StateFormSelection: FC<TStateFormSelection> = observer((props) => {
               handleValue(state || undefined);
             } else handleValue(undefined);
           }}
-          iconExtractor={(option) => (
-            <div className="w-4.5 h-4.5 flex-shrink-0 overflow-hidden relative flex justify-center items-center">
-              <StateGroupIcon stateGroup={option?.group || "backlog"} />
-            </div>
-          )}
+          iconExtractor={(option) => {
+            if (!option.id) {
+              return (
+                <div className="w-2.5 h-2.5 flex-shrink-0 overflow-hidden relative flex justify-center items-center">
+                  <Ban />
+                </div>
+              );
+            }
+            return (
+              <div className="w-4.5 h-4.5 flex-shrink-0 overflow-hidden relative flex justify-center items-center">
+                <StateGroupIcon stateGroup={option?.group || "backlog"} />
+              </div>
+            );
+          }}
           queryExtractor={(option) => option.name}
         />
       </div>
diff --git a/packages/etl/src/core/helpers/constants.ts b/packages/etl/src/core/helpers/constants.ts
index 3b678e0b6b..ce7899ecfb 100644
--- a/packages/etl/src/core/helpers/constants.ts
+++ b/packages/etl/src/core/helpers/constants.ts
@@ -1,3 +1,4 @@
+import { IState } from "@plane/types";
 import { E_SILO_ERROR_CODES } from "../types/error";
 
 const entries = Object.entries(E_SILO_ERROR_CODES);
@@ -8,3 +9,16 @@ export const SILO_ERROR_CODES = (
   code: key[1],
   description: key[0].toLowerCase(),
 }));
+
+export const EMPTY_PLANE_STATE: IState = {
+  id: "",
+  name: "No transition",
+  group: "backlog",
+  color: "#000000",
+  default: false,
+  description: "",
+  project_id: "",
+  sequence: 0,
+  workspace_id: "",
+  order: 0,
+};