added project variables deletion

featureflags/graph/actions.py

@@ -484,3 +484,18 @@ async def update_value_changelog(
                     }
                 )
             )
+
+
+@auth_required
+@track
+async def delete_variable(
+    variable_id: str, *, conn: SAConnection,
+) -> None:
+    assert variable_id, "Variable id is required"
+
+    variable_uuid = UUID(hex=variable_id)
+    await conn.execute(
+        Variable.__table__.delete().where(
+            Variable.id == variable_uuid
+        )
+    )

featureflags/graph/graph.py

@@ -53,6 +53,7 @@
     ResetValueResult,
     SaveFlagResult,
     SaveValueResult,
+    DeleteVariableResult,
 )
 from featureflags.graph.utils import is_valid_uuid
 from featureflags.metrics import wrap_metric
@@ -840,7 +841,29 @@ def get_field(name: str) -> str | None:
 DeleteValueNode = Node(
     "DeleteValue",
     [
-        Field("error", None, delete_flag_info),
+        Field("error", None, delete_value_info),
+    ],
+)
+
+
+async def delete_variable_info(
+    fields: list[Field], results: list[DeleteVariableResult]
+) -> list[list]:
+    [result] = results
+
+    def get_field(name: str) -> str | None:
+        if name == "error":
+            return result.error
+
+        raise ValueError(f"Unknown field: {name}")
+
+    return [[get_field(f.name)] for f in fields]
+
+
+DeleteVariableNode = Node(
+    "DeleteVariable",
+    [
+        Field("error", None, delete_variable_info),
     ],
 )
 
@@ -1111,6 +1134,33 @@ async def delete_value(ctx: dict, options: dict) -> DeleteValueResult:
     return DeleteValueResult(None)
 
 
+@pass_context
+async def delete_variable(ctx: dict, options: dict) -> DeleteVariableResult:
+    async with ctx[GraphContext.DB_ENGINE].acquire() as conn:
+        is_variable_checks_exists = await exec_scalar(
+            ctx[GraphContext.DB_ENGINE],
+            (
+                select([Check.id])
+                .where(Check.variable == UUID(options["id"]))
+                .limit(1)
+            ),
+        )
+        if is_variable_checks_exists:
+            return DeleteVariableResult(
+                "Cannot delete Variable which uses in Conditions."
+            )
+
+        try:
+            await actions.delete_variable(
+                options["id"],
+                conn=conn,
+            )
+        except Exception as e:
+            return DeleteVariableResult(str(e))
+
+    return DeleteVariableResult(None)
+
+
 mutation_data_types = {
     "SaveFlagOperation": Record[{"type": String, "payload": Any}],
     "SaveValueOperation": Record[{"type": String, "payload": Any}],
@@ -1127,6 +1177,7 @@ async def delete_value(ctx: dict, options: dict) -> DeleteValueResult:
         ResetValueNode,
         DeleteFlagNode,
         DeleteValueNode,
+        DeleteVariableNode,
         Root(
             [
                 Link(
@@ -1191,6 +1242,13 @@ async def delete_value(ctx: dict, options: dict) -> DeleteValueResult:
                     options=[Option("id", String)],
                     requires=None,
                 ),
+                Link(
+                    "deleteVariable",
+                    TypeRef["DeleteVariable"],
+                    delete_variable,
+                    options=[Option("id", String)],
+                    requires=None,
+                ),
             ]
         ),
     ],

featureflags/graph/types.py

@@ -202,3 +202,7 @@ class ResetValueResult(NamedTuple):
 
 class DeleteValueResult(NamedTuple):
     error: str | None = None
+
+
+class DeleteVariableResult(NamedTuple):
+    error: str | None = None

ui/src/Dashboard/Check.jsx

@@ -7,17 +7,15 @@ import {
   Row,
   Space,
   Select,
+  message,
 } from 'antd';
-import {
-  MinusOutlined,
-} from '@ant-design/icons';
+import { CloseOutlined, MinusOutlined } from '@ant-design/icons';
 
 import './Check.less';
 import { Operators, TYPES, Type } from './constants';
-import {
-  useChecks,
-  useProjectsMap,
-} from './context';
+import { useMutation } from '@apollo/client';
+import { useChecks, useProjectsMap } from './context';
+import { DELETE_VARIABLE_MUTATION } from "./queries";
 
 const { Option } = Select;
 
@@ -81,6 +79,39 @@ const CheckInput = ({ conditionId, check, projectName }) => {
   />;
 }
 
+const DeleteVariable = ({ varName, varId }) => {
+  const [removeValue] = useMutation(DELETE_VARIABLE_MUTATION, {
+    variables: { id: varId },
+    onCompleted: (data) => {
+      if (data.deleteVariable && data.deleteVariable.error) {
+        message.error(data.deleteVariable.error);
+      } else {
+        message.success(`Variable "${varName}" removed successfully`);
+        // TODO: drop variable from ProjectsMapContext too
+      }
+    },
+    onError: (error) => {
+      message.error(`Error removing variable "${varName}": ${error.message}`);
+    }
+  });
+
+  const handleRemove = () => {
+    if (confirm(`Are you sure to delete "${varName}" variable from project?`)) {
+      removeValue();
+    }
+  };
+
+  return (
+    <CloseOutlined
+      onClick={(e) => {
+        e.stopPropagation();
+        handleRemove();
+      }}
+      style={{ cursor: 'pointer' }}
+    />
+  );
+};
+
 export const Check = ({ conditionId, check, onDeleteCheck, projectName }) => {
   const projectsMap = useProjectsMap();
   const project = projectsMap[projectName];
@@ -116,8 +147,17 @@ export const Check = ({ conditionId, check, onDeleteCheck, projectName }) => {
             onChange={onVariableOptionChange}
           >
             {project.variables.map((variable) => (
-              <Option key={variable.id}
-                      value={variable.id}>{variable.name}</Option>
+              <Option key={variable.id} value={variable.id}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <span>{variable.name}</span>
+                   {check.variable !== variable.id && (
+                      <DeleteVariable
+                        varId={variable.id}
+                        varName={variable.name}
+                      />
+                    )}
+                </div>
+              </Option>
             ))}
           </Select>
           <Select

ui/src/Dashboard/context.jsx

@@ -7,7 +7,6 @@ export const useProjectsMap = () => {
   return project;
 }
 
-
 export const FlagContext = createContext({});
 export const useFlagState = () => {
   const { state } = useContext(FlagContext);

ui/src/Dashboard/queries.js

@@ -152,6 +152,14 @@ export const DELETE_VALUE_MUTATION = gql`
   }
 `;
 
+export const DELETE_VARIABLE_MUTATION = gql`
+  mutation DeleteVariable($id: String!) {
+    deleteVariable(id: $id) {
+      error
+    }
+  }
+`;
+
 export const VALUE_QUERY = gql`
   ${VALUE_FRAGMENT}
   query Value($id: String!) {