From 87724bb7b88352a2255337d358fc5dfc4f3cf5b3 Mon Sep 17 00:00:00 2001
From: Darren Clarke <darren@redaranj.com>
Date: Wed, 7 Aug 2024 15:25:53 +0200
Subject: [PATCH] Ticket edit updates

---
 apps/link/app/(main)/_components/Sidebar.tsx  |  14 +-
 .../[overview]/_components/ZammadOverview.tsx |   2 +-
 .../[id]/@detail/_components/TicketDetail.tsx | 206 ++++++------
 .../[id]/@edit/_components/TicketEdit.tsx     | 315 +++++++-----------
 apps/link/app/_actions/tickets.ts             | 100 +++---
 apps/link/app/_components/CSRFProvider.tsx    |   1 -
 apps/link/next.config.js                      |   1 +
 packages/ui/components/Button.tsx             |   7 +
 packages/ui/components/TextField.tsx          |   3 +
 9 files changed, 297 insertions(+), 352 deletions(-)

diff --git a/apps/link/app/(main)/_components/Sidebar.tsx b/apps/link/app/(main)/_components/Sidebar.tsx
index f25ca14..c8c546e 100644
--- a/apps/link/app/(main)/_components/Sidebar.tsx
+++ b/apps/link/app/(main)/_components/Sidebar.tsx
@@ -151,7 +151,7 @@ const MenuItem = ({
             }
           />
         )}
-        {badge && badge > 0 ? (
+        {open && badge && badge > 0 ? (
           <ListItemSecondaryAction>
             <Typography
               color="textSecondary"
@@ -197,7 +197,6 @@ export const Sidebar: FC<SidebarProps> = ({
   useEffect(() => {
     const fetchCounts = async () => {
       const counts = await getOverviewTicketCountsAction();
-      console.log({ counts });
       setOverviewCounts(counts);
     };
 
@@ -422,8 +421,9 @@ export const Sidebar: FC<SidebarProps> = ({
             />
             <Collapse
               in={
-                pathname.startsWith("/overview") ||
-                pathname.startsWith("/tickets")
+                open &&
+                (pathname.startsWith("/overview") ||
+                  pathname.startsWith("/tickets"))
               }
               timeout="auto"
               unmountOnExit
@@ -512,7 +512,7 @@ export const Sidebar: FC<SidebarProps> = ({
               />
             )}
             <Collapse
-              in={pathname.startsWith("/leafcutter")}
+              in={open && pathname.startsWith("/leafcutter")}
               timeout="auto"
               unmountOnExit
               onClick={undefined}
@@ -575,7 +575,7 @@ export const Sidebar: FC<SidebarProps> = ({
                   open={open}
                 />
                 <Collapse
-                  in={pathname.startsWith("/admin/")}
+                  in={open && pathname.startsWith("/admin/")}
                   timeout="auto"
                   unmountOnExit
                   onClick={undefined}
@@ -588,7 +588,7 @@ export const Sidebar: FC<SidebarProps> = ({
                       open={open}
                     />
                     <Collapse
-                      in={pathname.startsWith("/admin/bridge")}
+                      in={open && pathname.startsWith("/admin/bridge")}
                       timeout="auto"
                       unmountOnExit
                       onClick={undefined}
diff --git a/apps/link/app/(main)/overview/[overview]/_components/ZammadOverview.tsx b/apps/link/app/(main)/overview/[overview]/_components/ZammadOverview.tsx
index bc380b0..da0c1cb 100644
--- a/apps/link/app/(main)/overview/[overview]/_components/ZammadOverview.tsx
+++ b/apps/link/app/(main)/overview/[overview]/_components/ZammadOverview.tsx
@@ -20,7 +20,7 @@ export const ZammadOverview: FC<ZammadOverviewProps> = ({ name }) => {
 
     fetchTickets();
 
-    const interval = setInterval(fetchTickets, 20000);
+    const interval = setInterval(fetchTickets, 10000);
 
     return () => clearInterval(interval);
   }, [name]);
diff --git a/apps/link/app/(main)/tickets/[id]/@detail/_components/TicketDetail.tsx b/apps/link/app/(main)/tickets/[id]/@detail/_components/TicketDetail.tsx
index cb42fa3..bc6f6b7 100644
--- a/apps/link/app/(main)/tickets/[id]/@detail/_components/TicketDetail.tsx
+++ b/apps/link/app/(main)/tickets/[id]/@detail/_components/TicketDetail.tsx
@@ -61,113 +61,115 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
   const shouldRender = !!ticket && !!ticketArticles;
 
   return (
-    shouldRender && (
-      <Box sx={{ height: "100%", width: "100%" }}>
-        <MainContainer>
-          <ChatContainer>
-            <ConversationHeader>
-              <ConversationHeader.Content>
-                <Box
-                  sx={{
-                    width: "100%",
-                    textAlign: "center",
-                    fontWeight: "bold",
-                  }}
-                >
-                  <Typography
-                    variant="h5"
+    <Box sx={{ height: "100%", width: "100%", background: veryLightGray }}>
+      {shouldRender && (
+        <>
+          <MainContainer>
+            <ChatContainer>
+              <ConversationHeader>
+                <ConversationHeader.Content>
+                  <Box
                     sx={{
-                      fontFamily: poppins.style.fontFamily,
-                      fontWeight: 700,
+                      width: "100%",
+                      textAlign: "center",
+                      fontWeight: "bold",
                     }}
                   >
-                    {ticket.title}
-                  </Typography>
-                  <Typography
-                    variant="h6"
-                    sx={{
-                      fontFamily: roboto.style.fontFamily,
-                      fontWeight: 400,
+                    <Typography
+                      variant="h5"
+                      sx={{
+                        fontFamily: poppins.style.fontFamily,
+                        fontWeight: 700,
+                      }}
+                    >
+                      {ticket.title}
+                    </Typography>
+                    <Typography
+                      variant="h6"
+                      sx={{
+                        fontFamily: roboto.style.fontFamily,
+                        fontWeight: 400,
+                      }}
+                    >{`Ticket #${ticket.number} (created ${new Date(
+                      ticket.createdAt,
+                    ).toLocaleDateString()})`}</Typography>
+                  </Box>
+                </ConversationHeader.Content>
+              </ConversationHeader>
+              <MessageList style={{ marginBottom: 80 }}>
+                {ticketArticles.edges.map(({ node: article }: any) => (
+                  <Message
+                    key={article.id}
+                    className={
+                      article.internal
+                        ? "internal-note"
+                        : article?.sender?.name === "Agent"
+                          ? "outgoing-message"
+                          : "incoming-message"
+                    }
+                    model={{
+                      message: article.bodyWithUrls,
+                      sentTime: article.updated_at,
+                      sender: article.from,
+                      direction:
+                        article.sender === "Agent" ? "outgoing" : "incoming",
+                      position: "single",
                     }}
-                  >{`Ticket #${ticket.number} (created ${new Date(
-                    ticket.createdAt,
-                  ).toLocaleDateString()})`}</Typography>
-                </Box>
-              </ConversationHeader.Content>
-            </ConversationHeader>
-            <MessageList style={{ marginBottom: 80 }}>
-              {ticketArticles.edges.map(({ node: article }: any) => (
-                <Message
-                  key={article.id}
-                  className={
-                    article.internal
-                      ? "internal-note"
-                      : article?.sender?.name === "Agent"
-                        ? "outgoing-message"
-                        : "incoming-message"
-                  }
-                  model={{
-                    message: article.bodyWithUrls,
-                    sentTime: article.updated_at,
-                    sender: article.from,
-                    direction:
-                      article.sender === "Agent" ? "outgoing" : "incoming",
-                    position: "single",
-                  }}
-                />
-              ))}
-            </MessageList>
-          </ChatContainer>
-          <Box
-            sx={{
-              height: 80,
-              background: veryLightGray,
-              borderTop: `1px solid ${lightGray}`,
-              position: "absolute",
-              bottom: 0,
-              width: "100%",
-              zIndex: 1000,
-            }}
-          >
-            <Grid
-              container
-              spacing={6}
-              justifyContent="center"
-              alignItems="center"
-              alignContent="center"
-              sx={{ height: "100%", pt: 6 }}
+                  />
+                ))}
+              </MessageList>
+            </ChatContainer>
+            <Box
+              sx={{
+                height: 80,
+                background: veryLightGray,
+                borderTop: `1px solid ${lightGray}`,
+                position: "absolute",
+                bottom: 0,
+                width: "100%",
+                zIndex: 1000,
+              }}
             >
-              <Grid item>
-                <Button
-                  text="Write note to agent"
-                  color="#FFB620"
-                  onClick={() => {
-                    setArticleKind("note");
-                    setDialogOpen(true);
-                  }}
-                />
+              <Grid
+                container
+                spacing={6}
+                justifyContent="center"
+                alignItems="center"
+                alignContent="center"
+                sx={{ height: "100%", pt: 6 }}
+              >
+                <Grid item>
+                  <Button
+                    text="Write note to agent"
+                    color="#FFB620"
+                    onClick={() => {
+                      setArticleKind("note");
+                      setDialogOpen(true);
+                    }}
+                  />
+                </Grid>
+                <Grid item>
+                  <Button
+                    text="Reply to ticket"
+                    kind="primary"
+                    onClick={() => {
+                      setArticleKind(firstArticleKind);
+                      setDialogOpen(true);
+                    }}
+                  />
+                </Grid>
               </Grid>
-              <Grid item>
-                <Button
-                  text="Reply to ticket"
-                  kind="primary"
-                  onClick={() => {
-                    setArticleKind(firstArticleKind);
-                    setDialogOpen(true);
-                  }}
-                />
-              </Grid>
-            </Grid>
-          </Box>
-        </MainContainer>
-        <ArticleCreateDialog
-          ticketID={ticket.internalId}
-          open={dialogOpen}
-          closeDialog={closeDialog}
-          kind={articleKind}
-          recipient={recipient}
-        />
-      </Box>
-    )
+            </Box>
+          </MainContainer>
+          <ArticleCreateDialog
+            ticketID={ticket.internalId}
+            open={dialogOpen}
+            closeDialog={closeDialog}
+            kind={articleKind}
+            recipient={recipient}
+          />
+        </>
+      )}
+    </Box>
   );
 };
diff --git a/apps/link/app/(main)/tickets/[id]/@edit/_components/TicketEdit.tsx b/apps/link/app/(main)/tickets/[id]/@edit/_components/TicketEdit.tsx
index 7c4816a..7b7337c 100644
--- a/apps/link/app/(main)/tickets/[id]/@edit/_components/TicketEdit.tsx
+++ b/apps/link/app/(main)/tickets/[id]/@edit/_components/TicketEdit.tsx
@@ -1,18 +1,15 @@
 "use client";
 
 import { FC, useEffect, useState } from "react";
-import { Grid, Box, MenuItem } from "@mui/material";
-import { useFormState } from "react-dom";
+import { Grid, Box } from "@mui/material";
 import { Select, Button } from "@link-stack/ui";
 import { MuiChipsInput } from "mui-chips-input";
-import { getTicketQuery } from "app/_graphql/getTicketQuery";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import {
   updateTicketAction,
   getTicketAction,
   getTicketStatesAction,
   getTicketPrioritiesAction,
-  getTicketTagsAction,
 } from "app/_actions/tickets";
 import { getAgentsAction } from "app/_actions/users";
 import { getGroupsAction } from "app/_actions/groups";
@@ -23,56 +20,51 @@ interface TicketEditProps {
 
 export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
   const [ticket, setTicket] = useState<any>();
+  const [hasChanges, setHasChanges] = useState(false);
+  const [formState, setFormState] = useState({
+    values: {
+      group: null,
+      owner: null,
+      priority: null,
+      pendingTime: null,
+      state: null,
+      tags: [],
+    },
+  });
   const [ticketStates, setTicketStates] = useState<any>();
   const [ticketPriorities, setTicketPriorities] = useState<any>();
   const [groups, setGroups] = useState<any>();
-  const [tags, setTags] = useState<any>();
   const [agents, setAgents] = useState<any>();
-  const selectedTags = [];
-  const pendingVisible = false;
-  const pendingDate = new Date();
-  const handleDelete = () => {
-    console.info("You clicked the delete icon.");
-  };
+  const [pendingVisible, setPendingVisible] = useState(false);
 
-  const filteredStates = ticketStates?.filter(
-    (state: any) => !["new", "merged", "removed"].includes(state.name),
-  );
+  const filteredStates =
+    ticketStates?.filter(
+      (state: any) => !["new", "merged", "removed"].includes(state.label),
+    ) ?? [];
 
   useEffect(() => {
     const fetchAgents = async () => {
       const result = await getAgentsAction();
-      console.log({ agents: result });
       setAgents(result);
     };
 
     const fetchGroups = async () => {
       const result = await getGroupsAction();
-      console.log({ groups: result });
       setGroups(result);
     };
 
     const fetchTicketStates = async () => {
       const result = await getTicketStatesAction();
-      console.log({ ticketStates: result });
       setTicketStates(result);
     };
 
     const fetchTicketPriorities = async () => {
       const result = await getTicketPrioritiesAction();
-      console.log({ ticketPriorities: result });
       setTicketPriorities(result);
     };
 
-    const fetchTicketTags = async () => {
-      const result = await getTicketTagsAction();
-      console.log({ tags: result });
-      setTags(result);
-    };
-
     fetchTicketStates();
     fetchTicketPriorities();
-    fetchTicketTags();
     fetchAgents();
     fetchGroups();
   }, []);
@@ -80,185 +72,134 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
   useEffect(() => {
     const fetchTicket = async () => {
       const result = await getTicketAction(id);
-      console.log({ result });
       setTicket(result);
+      setFormState({
+        values: {
+          ...formState.values,
+          group: result?.group?.id,
+          owner: result?.owner?.id,
+          priority: result?.priority?.id,
+          state: result?.state?.id,
+          tags: result?.tags,
+        },
+      });
     };
 
     fetchTicket();
   }, []);
 
-  /*
-  useEffect(() => {
-
+  const updateFormState = (name: string, value: any) => {
+    setFormState({
+      values: {
+        ...formState.values,
+        [name]: value,
+      },
+    });
     const stateName = filteredStates?.find(
-      (state: any) => state.id === selectedState,
+      (state: any) => state.id === formState.values.state,
     )?.name;
     setPendingVisible(stateName?.includes("pending") ?? false);
-  }, [selectedState]);
-   */
-  const updateTicket = async (input: any) => {
-    /*
-    console.log({ input });
-    const res = await fetcher({
-      document: updateTicketMutation,
-      variables: {
-        ticketId: `gid://zammad/Ticket/${id}`,
-        input,
-      },
-    });
-    console.log({ res });
-     */
+    setHasChanges(true);
   };
-  const updateTags = async (tags: string[]) => {
-    /*
-    console.log({ tags });
-    const res = await fetcher({
-      document: updateTagsMutation,
-      variables: {
-        objectId: `gid://zammad/Ticket/${id}`,
-        tags,
-      },
-    });
-    console.log({ res });
-     */
+
+  const updateTicket = async () => {
+    await updateTicketAction(id, formState.values);
+    setHasChanges(false);
   };
-  const initialState = {
-    messages: [],
-    errors: [],
-    values: {
-      customer: "",
-      group: ticket?.group?.id?.split("/").pop(),
-      owner: ticket?.owner?.id?.split("/").pop(),
-      priority: ticket?.priority?.id?.split("/").pop(),
-      state: ticket?.state?.id?.split("/").pop(),
-      tags: [],
-      title: "",
-      article: {
-        body: "",
-        type: "note",
-        internal: true,
-      },
-    },
-  };
-  const [formState, formAction] = useFormState(
-    updateTicketAction,
-    initialState,
-  );
+
   const shouldRender = !!ticket;
 
   return (
-    shouldRender && (
-      <Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
-        <form action={formAction}>
-          <Grid container direction="column" spacing={3}>
+    <Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
+      {shouldRender && (
+        <Grid container direction="column" spacing={3}>
+          <Grid item>
+            <Box sx={{ m: 1 }}>Group</Box>
+            <Select
+              name="group"
+              label="Group"
+              formState={formState}
+              updateFormState={updateFormState}
+              getOptions={() => groups}
+            />
+          </Grid>
+          <Grid item>
+            <Box sx={{ m: 1, mt: 0 }}>Owner</Box>
+            <Select
+              name="owner"
+              label="Owner"
+              formState={formState}
+              updateFormState={updateFormState}
+              getOptions={() => agents}
+            />
+          </Grid>
+          <Grid item xs={12}>
+            <Box sx={{ m: 1, mt: 0 }}>State</Box>
+            <Select
+              name="state"
+              label="State"
+              formState={formState}
+              updateFormState={updateFormState}
+              getOptions={() => filteredStates}
+            />
+          </Grid>
+          <Grid
+            item
+            xs={12}
+            sx={{ display: pendingVisible ? "inherit" : "none" }}
+          >
+            <DatePicker
+              label="Pending Date"
+              value={new Date(formState.values.pendingTime)}
+              onChange={(newValue: any) => {
+                updateFormState("pendingDate", newValue.toISOString());
+              }}
+              slotProps={{ textField: { size: "small" } }}
+              sx={{
+                width: "100%",
+                backgroundColor: "white",
+              }}
+            />
+          </Grid>
+          <Grid item>
+            <Box sx={{ m: 1, mt: 0 }}>Priority</Box>
+            <Select
+              name="priority"
+              label="Priority"
+              formState={formState}
+              updateFormState={updateFormState}
+              getOptions={() => ticketPriorities}
+            />
+          </Grid>
+          <Grid item>
+            <Box sx={{ mb: 1 }}>Tags</Box>
+            <MuiChipsInput
+              sx={{ backgroundColor: "white", width: "100%" }}
+              value={formState.values.tags}
+              hideClearAll
+              onChange={(tags: any) => {
+                updateFormState("tags", tags);
+              }}
+              onDeleteChip={(tag: any) => {
+                const tags = formState.values.tags.filter(
+                  (t: any) => t !== tag,
+                );
+                updateFormState("tags", tags);
+              }}
+            />
+          </Grid>
+          <Grid item container direction="row-reverse">
             <Grid item>
-              <Box sx={{ m: 1 }}>Group</Box>
-              <Select
-                name="group"
-                label="Group"
-                formState={formState}
-                getOptions={() => groups}
+              <Button
+                text="Save"
+                kind="primary"
+                onClick={updateTicket}
+                disabled={!hasChanges}
               />
             </Grid>
-            <Grid item>
-              <Box sx={{ m: 1, mt: 0 }}>Owner</Box>
-              <Select
-                name="owner"
-                label="Owner"
-                formState={formState}
-                getOptions={() => agents}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <Box sx={{ m: 1, mt: 0 }}>State</Box>
-              <Select
-                name="state"
-                label="State"
-                formState={formState}
-                getOptions={() =>
-                  filteredStates?.map((state: any) => ({
-                    value: state.id,
-                    label: state.name,
-                  })) ?? []
-                }
-                /*
-                onChange={(e: any) => {
-                  const newState = e.target.value;
-                  setSelectedState(newState);
-                  updateTicket({
-                    stateId: `gid://zammad/Ticket::State/${newState}`,
-                    pendingTime: pendingDate.toISOString(),
-                  });
-                }}
-                 */
-              />
-            </Grid>
-            <Grid
-              item
-              xs={12}
-              sx={{ display: pendingVisible ? "inherit" : "none" }}
-            >
-              {/*  <DatePicker
-                label="Pending Date"
-                value={pendingDate}
-                onChange={(newValue: any) => {
-
-                  console.log(newValue);
-                  setPendingDate(newValue);
-                  updateTicket({
-                    pendingTime: newValue.toISOString(),
-                  })
-
-                }}
-                slotProps={{ textField: { size: "small" } }}
-                sx={{
-                  width: "100%",
-                  backgroundColor: "white",
-                }}
-              /> */}
-            </Grid>
-            <Grid item>
-              <Box sx={{ m: 1, mt: 0 }}>Priority</Box>
-              <Select
-                name="priority"
-                label="Priority"
-                formState={formState}
-                getOptions={() => ticketPriorities}
-                /*
-                onChange={(e: any) => {
-
-                  const newPriority = e.target.value;
-                  setSelectedPriority(newPriority);
-                  updateTicket({
-                    priorityId: `gid://zammad/Ticket::Priority/${newPriority}`,
-                  });
-
-                }}
-                                   */
-              />
-            </Grid>
-
-            <Grid item>
-              <Box sx={{ mb: 1 }}>Tags</Box>
-              <MuiChipsInput
-                sx={{ backgroundColor: "white", width: "100%" }}
-                value={selectedTags}
-                onChange={(tags: any) => {
-                  /*
-                  setSelectedTags(tags);
-                  updateTags(tags);
-                   */
-                }}
-              />
-            </Grid>
-            <Grid item container direction="row-reverse">
-              <Grid item>
-                <Button text="Save" kind="primary" type="submit" />
-              </Grid>
-            </Grid>
           </Grid>
-        </form>
-      </Box>
-    )
+        </Grid>
+      )}
+    </Box>
   );
 };
diff --git a/apps/link/app/_actions/tickets.ts b/apps/link/app/_actions/tickets.ts
index eb6a008..cdecf9e 100644
--- a/apps/link/app/_actions/tickets.ts
+++ b/apps/link/app/_actions/tickets.ts
@@ -76,35 +76,59 @@ export const createTicketArticleAction = async (
 };
 
 export const updateTicketAction = async (
-  currentState: any,
-  formData: FormData,
+  ticketID: string,
+  ticketInfo: Record<string, any>,
 ) => {
-  /*
+  console.log({ ticketID, ticketInfo });
   try {
-    const { id, project } = currentState.values;
-    const updatedTicket = {
-      title: formData.get("title"),
-    };
-    await executeMutation({
-      project,
-      mutation: UpdateAssetMutation,
+    const input = {};
+    if (ticketInfo.state) {
+      input["stateId"] = ticketInfo.state;
+    }
+    if (ticketInfo.pendingTime) {
+      input["pendingTime"] = ticketInfo.pendingTime;
+    }
+    if (ticketInfo.priority) {
+      input["priorityId"] = ticketInfo.priority;
+    }
+    if (ticketInfo.group) {
+      input["groupId"] = ticketInfo.group;
+    }
+    if (ticketInfo.owner) {
+      input["ownerId"] = ticketInfo.owner;
+    }
+
+    const result = await executeGraphQL({
+      query: updateTicketMutation,
       variables: {
-        id,
-        input: updatedAsset,
+        ticketId: `gid://zammad/Ticket/${ticketID}`,
+        input,
       },
     });
 
-    revalidatePath(`/${project}/assets/${id}`);
+    if (ticketInfo.tags?.length > 0) {
+      const tagsResult = await executeGraphQL({
+        query: updateTagsMutation,
+        variables: {
+          objectId: `gid://zammad/Ticket/${ticketID}`,
+          tags: ticketInfo.tags,
+        },
+      });
+      console.log({ tagsResult });
+    }
 
+    console.log({ result });
     return {
-      ...currentState,
-      values: { ...currentState.values, ...updatedAsset, id, project },
+      result,
       success: true,
     };
   } catch (e: any) {
-    return { success: false, message: e?.message ?? "Unknown error" };
+    console.log({ e });
+    return {
+      success: false,
+      message: e?.message ?? "Unknown error",
+    };
   }
-   */
 };
 
 export const getTicketAction = async (id: string) => {
@@ -112,7 +136,7 @@ export const getTicketAction = async (id: string) => {
     query: getTicketQuery,
     variables: { ticketId: `gid://zammad/Ticket/${id}` },
   });
-
+  console.log({ td: ticketData.ticket });
   return ticketData?.ticket;
 };
 
@@ -125,38 +149,6 @@ export const getTicketArticlesAction = async (id: string) => {
   return ticketData?.ticketArticles;
 };
 
-export const updateTicketTagsAction = async (
-  currentState: any,
-  formData: FormData,
-) => {
-  /*
-  try {
-    const { id, project } = currentState.values;
-    const updatedTicket = {
-      title: formData.get("title"),
-    };
-    await executeMutation({
-      project,
-      mutation: UpdateAssetMutation,
-      variables: {
-        id,
-        input: updatedAsset,
-      },
-    });
-
-    revalidatePath(`/${project}/assets/${id}`);
-
-    return {
-      ...currentState,
-      values: { ...currentState.values, ...updatedAsset, id, project },
-      success: true,
-    };
-  } catch (e: any) {
-    return { success: false, message: e?.message ?? "Unknown error" };
-  }
-   */
-};
-
 export const getTicketStatesAction = async () => {
   const states = await executeREST({
     path: "/api/v1/ticket_states",
@@ -164,15 +156,15 @@ export const getTicketStatesAction = async () => {
 
   const formattedStates =
     states?.map((state: any) => ({
-      value: state.id,
+      value: `gid://zammad/Ticket::State/${state.id}`,
       label: state.name,
     })) ?? [];
 
   return formattedStates;
 };
 
-export const getTicketTagsAction = async () => {
-  const tags = await executeREST({
+export const getTagsAction = async () => {
+  const { tags } = await executeREST({
     path: "/api/v1/tags",
   });
 
@@ -186,7 +178,7 @@ export const getTicketPrioritiesAction = async () => {
 
   const formattedPriorities =
     priorities?.map((priority: any) => ({
-      value: priority.id,
+      value: `gid://zammad/Ticket::Priority/${priority.id}`,
       label: priority.name,
     })) ?? [];
 
diff --git a/apps/link/app/_components/CSRFProvider.tsx b/apps/link/app/_components/CSRFProvider.tsx
index 3e86dc1..70edce6 100644
--- a/apps/link/app/_components/CSRFProvider.tsx
+++ b/apps/link/app/_components/CSRFProvider.tsx
@@ -12,7 +12,6 @@ export const CSRFProvider: FC<PropsWithChildren> = ({ children }) => {
         const response = await fetch("/api/v1/users/me");
         const token = response.headers.get("CSRF-Token");
         update({ csrfToken: token });
-        console.log({ token });
       }
     }, 30000);
 
diff --git a/apps/link/next.config.js b/apps/link/next.config.js
index 6bb553e..77f6b6f 100644
--- a/apps/link/next.config.js
+++ b/apps/link/next.config.js
@@ -6,6 +6,7 @@ const nextConfig = {
     "@link-stack/ui",
     "@link-stack/bridge-common",
     "@link-stack/bridge-ui",
+    "mui-chips-input"
   ],
   publicRuntimeConfig: {
     linkURL: process.env.LINK_URL ?? "http://localhost:3000",
diff --git a/packages/ui/components/Button.tsx b/packages/ui/components/Button.tsx
index 926dd0d..ab767d0 100644
--- a/packages/ui/components/Button.tsx
+++ b/packages/ui/components/Button.tsx
@@ -5,6 +5,7 @@ import { colors } from "../styles/theme";
 
 interface InternalButtonProps {
   text: string;
+  disabled: boolean;
   color?: string;
   kind?: "primary" | "secondary" | "destructive";
   type?: string;
@@ -27,12 +28,14 @@ export const InternalButton: FC<InternalButtonProps> = ({
   text,
   color,
   kind,
+  disabled,
   type = "button",
   onClick,
 }) => (
   <MUIButton
     variant="contained"
     disableElevation
+    disabled={disabled}
     onClick={onClick}
     type={type}
     href=""
@@ -56,6 +59,7 @@ export const InternalButton: FC<InternalButtonProps> = ({
 
 interface ButtonProps {
   text: string;
+  disabled?: boolean;
   color?: string;
   kind?: "primary" | "secondary" | "destructive";
   type?: string;
@@ -65,6 +69,7 @@ interface ButtonProps {
 
 export const Button: FC<ButtonProps> = ({
   text,
+  disabled = false,
   color,
   type,
   kind,
@@ -75,6 +80,7 @@ export const Button: FC<ButtonProps> = ({
     <Link href={href} passHref>
       <InternalButton
         text={text}
+        disabled={disabled}
         color={color}
         kind={kind}
         type={type}
@@ -84,6 +90,7 @@ export const Button: FC<ButtonProps> = ({
   ) : (
     <InternalButton
       text={text}
+      disabled={disabled}
       color={color}
       kind={kind}
       type={type}
diff --git a/packages/ui/components/TextField.tsx b/packages/ui/components/TextField.tsx
index 6683d36..d831297 100644
--- a/packages/ui/components/TextField.tsx
+++ b/packages/ui/components/TextField.tsx
@@ -16,6 +16,7 @@ type TextFieldProps = {
   required?: boolean;
   lines?: number;
   helperText?: string;
+  updateFormState?: (field: string, value: any) => void;
 };
 
 export const TextField: FC<TextFieldProps> = ({
@@ -27,6 +28,7 @@ export const TextField: FC<TextFieldProps> = ({
   required = false,
   lines = 1,
   helperText,
+  updateFormState,
 }) => {
   const { darkMediumGray, white } = colors;
   const { roboto } = fonts;
@@ -42,6 +44,7 @@ export const TextField: FC<TextFieldProps> = ({
       rows={lines}
       required={required}
       defaultValue={formState.values[name]}
+      onChange={(e: any) => updateFormState?.(name, e.target.value)}
       error={Boolean(formState.errors[name])}
       helperText={formState.errors[name] ?? helperText}
       InputProps={{