GraphQL and MUI license updates

apps/link/app/(main)/tickets/[id]/@detail/_components/TicketDetail.tsx

@@ -3,6 +3,7 @@
 import { FC, useState } from "react";
 import useSWR from "swr";
 import { getTicketQuery } from "app/_graphql/getTicketQuery";
+import { getTicketArticlesQuery } from "app/_graphql/getTicketArticlesQuery";
 import {
   Grid,
   Box,
@@ -34,18 +35,26 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
     },
     { refreshInterval: 100000 }
   );
+  const { data: ticketArticlesData, error: ticketArticlesError }: any = useSWR(
+    {
+      document: getTicketArticlesQuery,
+      variables: { ticketId: `gid://zammad/Ticket/${id}` },
+    },
+    { refreshInterval: 2000 }
+  );
 
-  console.log({ ticketData, ticketError });
   const ticket = ticketData?.ticket;
+  const ticketArticles = ticketArticlesData?.ticketArticles;
   const [dialogOpen, setDialogOpen] = useState(false);
   const [articleKind, setArticleKind] = useState<"reply" | "note">("reply");
   const closeDialog = () => setDialogOpen(false);
 
-  const shouldRender = ticketData && !ticketError;
+  const shouldRender =
+    ticketData && !ticketError && ticketArticlesData && !ticketArticlesError;
 
   return (
     shouldRender && (
-      <>
+      <Box sx={{ height: "100%", width: "100%" }}>
         <MainContainer>
           <ChatContainer>
             <ConversationHeader>
@@ -73,13 +82,13 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
               </ConversationHeader.Content>
             </ConversationHeader>
             <MessageList style={{ marginBottom: 80 }}>
-              {ticket.articles.edges.map(({ node: article }: any) => (
+              {ticketArticles.edges.map(({ node: article }: any) => (
                 <Message
                   key={article.id}
                   className={
                     article.internal
                       ? "internal-note"
-                      : article.sender.name === "Agent"
+                      : article?.sender?.name === "Agent"
                       ? "outgoing-message"
                       : "incoming-message"
                   }
@@ -171,7 +180,7 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
           closeDialog={closeDialog}
           kind={articleKind}
         />
-      </>
+      </Box>
     )
   );
 };

apps/link/app/(main)/tickets/[id]/@edit/_components/TicketEdit.tsx

@@ -1,167 +1,186 @@
 "use client";
 
-import { FC, /* useEffect, */ useState } from "react";
+import { FC, useEffect, useState } from "react";
 import {
   Grid,
   Box,
   // Typography,
   // TextField,
   Stack,
-  Chip,
   Select,
   MenuItem,
 } from "@mui/material";
-import { /* useSWR, */ useSWRConfig } from "swr";
+import { MuiChipsInput } from "mui-chips-input";
+import useSWR, { useSWRConfig } from "swr";
+import { getTicketQuery } from "app/_graphql/getTicketQuery";
 import { updateTicketMutation } from "app/_graphql/updateTicketMutation";
 import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
 
 interface TicketEditProps {
-  ticket: any;
+  id: string;
 }
 
-export const TicketEdit: FC<TicketEditProps> = ({ ticket }) => {
-  const [selectedGroup, setSelectedGroup] = useState(1);
-  const [selectedOwner, setSelectedOwner] = useState(1);
-  const [selectedPriority, setSelectedPriority] = useState(1);
-  const [selectedState, setSelectedState] = useState(1);
-  const [selectedTags] = useState(["tag1", "tag2"]);
+export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
+  const [selectedGroup, setSelectedGroup] = useState("");
+  const [selectedOwner, setSelectedOwner] = useState("");
+  const [selectedPriority, setSelectedPriority] = useState("");
+  const [selectedState, setSelectedState] = useState("");
+  const [selectedTags, setSelectedTags] = useState([]);
   const handleDelete = () => {
     console.info("You clicked the delete icon.");
   };
   const restFetcher = (url: string) => fetch(url).then((r) => r.json());
-  /*
-  const { data: groups } = useSWR("/api/v1/groups", restFetcher);
-  console.log({ groups });
-  const { data: users } = useSWR("/api/v1/users", restFetcher);
-  console.log({ users });
-  const { data: states } = useSWR("/api/v1/ticket_states", restFetcher);
-  console.log({ states });
-  const { data: priorities } = useSWR("/api/v1/ticket_priorities", restFetcher);
-  console.log({ priorities });
 
-  */
-  const groups = [];
-  const users = [];
-  const states = [];
-  const priorities = [];
+  const { data: groups } = useSWR("/api/v1/groups", restFetcher);
+  const { data: users } = useSWR("/api/v1/users", restFetcher);
+  const { data: states } = useSWR("/api/v1/ticket_states", restFetcher);
+  const { data: priorities } = useSWR("/api/v1/ticket_priorities", restFetcher);
+  const { data: tags } = useSWR("/api/v1/tags", restFetcher);
 
   const { fetcher } = useSWRConfig();
+  const { data: ticketData, error: ticketError }: any = useSWR(
+    {
+      document: getTicketQuery,
+      variables: { ticketId: `gid://zammad/Ticket/${id}` },
+    },
+    { refreshInterval: 100000 }
+  );
+  useEffect(() => {
+    const ticket = ticketData?.ticket;
+    if (ticket) {
+      const groupID = ticket.group.id?.split("/").pop();
+      setSelectedGroup(groupID);
+      const ownerID = ticket.owner.id?.split("/").pop();
+      setSelectedOwner(ownerID);
+      const priorityID = ticket.priority.id?.split("/").pop();
+      setSelectedPriority(priorityID);
+      const stateID = ticket.state.id?.split("/").pop();
+      setSelectedState(stateID);
+      setSelectedTags(ticket.tags);
+    }
+  }, [ticketData, ticketError]);
   const updateTicket = async () => {
-    await fetcher({
+    const input = {
+      ownerId: `gid://zammad/User/${selectedOwner}`,
+      priorityId: `gid://zammad/Ticket::Priority/${selectedPriority}`,
+      stateId: `gid://zammad/Ticket::State/${selectedState}`,
+      groupId: `gid://zammad/Group/${selectedGroup}`,
+      // tags: selectedTags,
+    };
+    const res = await fetcher({
       document: updateTicketMutation,
       variables: {
-        ticketId: ticket.id,
-        input: {
-          ownerId: `gid://zammad/User/${selectedOwner}`,
-          tags: ["tag1", "tag2"],
-        },
+        ticketId: `gid://zammad/Ticket/${id}`,
+        input,
       },
     });
+    console.log({ res });
   };
+  const shouldRender = ticketData && !ticketError;
 
   return (
-    <Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
-      <Grid container direction="column" spacing={3}>
-        <Grid item>
-          <Box sx={{ m: 1 }}>Group</Box>
-          <Select
-            defaultValue={selectedGroup}
-            value={selectedGroup}
-            onChange={(e: any) => {
-              setSelectedGroup(e.target.value);
-              updateTicket();
-            }}
-            size="small"
-            sx={{
-              width: "100%",
-              backgroundColor: "white",
-            }}
-          >
-            {groups?.map((group: any) => (
-              <MenuItem key={group.id} value={group.id}>
-                {group.name}
-              </MenuItem>
-            ))}
-          </Select>
-        </Grid>
-        <Grid item>
-          <Box sx={{ m: 1, mt: 0 }}>Owner</Box>
-          <Select
-            value={selectedOwner}
-            onChange={(e: any) => {
-              setSelectedOwner(e.target.value);
-              updateTicket();
-            }}
-            size="small"
-            sx={{
-              width: "100%",
-              backgroundColor: "white",
-            }}
-          >
-            {users?.map((user: any) => (
-              <MenuItem key={user.id} value={user.id}>
-                {user.firstname} {user.lastname}
-              </MenuItem>
-            ))}
-          </Select>
-        </Grid>
-        <Grid item>
-          <Box sx={{ m: 1, mt: 0 }}>State</Box>
-          <Select
-            value={selectedState}
-            onChange={(e: any) => setSelectedState(e.target.value)}
-            size="small"
-            sx={{
-              width: "100%",
-              backgroundColor: "white",
-            }}
-          >
-            {states?.map((state: any) => (
-              <MenuItem key={state.id} value={state.id}>
-                {state.name}
-              </MenuItem>
-            ))}
-          </Select>
-        </Grid>
-        <Grid item>
-          <Box sx={{ m: 1, mt: 0 }}>Priority</Box>
-          <Select
-            value={selectedPriority}
-            onChange={(e: any) => setSelectedPriority(e.target.value)}
-            size="small"
-            sx={{
-              width: "100%",
-              backgroundColor: "white",
-            }}
-          >
-            {priorities?.map((priority: any) => (
-              <MenuItem key={priority.id} value={priority.id}>
-                {priority.name}
-              </MenuItem>
-            ))}
-          </Select>
-        </Grid>
+    shouldRender && (
+      <Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
+        <Grid container direction="column" spacing={3}>
+          <Grid item>
+            <Box sx={{ m: 1 }}>Group</Box>
+            <Select
+              defaultValue={selectedGroup}
+              value={selectedGroup}
+              onChange={(e: any) => {
+                setSelectedGroup(e.target.value);
+                updateTicket();
+              }}
+              size="small"
+              sx={{
+                width: "100%",
+                backgroundColor: "white",
+              }}
+            >
+              {groups?.map((group: any) => (
+                <MenuItem key={group.id} value={`${group.id}`}>
+                  {group.name}
+                </MenuItem>
+              ))}
+            </Select>
+          </Grid>
+          <Grid item>
+            <Box sx={{ m: 1, mt: 0 }}>Owner</Box>
+            <Select
+              value={selectedOwner}
+              onChange={(e: any) => {
+                setSelectedOwner(e.target.value);
+                updateTicket();
+              }}
+              size="small"
+              sx={{
+                width: "100%",
+                backgroundColor: "white",
+              }}
+            >
+              {users?.map((user: any) => (
+                <MenuItem key={user.id} value={user.id}>
+                  {user.firstname} {user.lastname}
+                </MenuItem>
+              ))}
+            </Select>
+          </Grid>
+          <Grid item>
+            <Box sx={{ m: 1, mt: 0 }}>State</Box>
+            <Select
+              value={selectedState}
+              onChange={(e: any) => {
+                setSelectedState(e.target.value);
+                updateTicket();
+              }}
+              size="small"
+              sx={{
+                width: "100%",
+                backgroundColor: "white",
+              }}
+            >
+              {states?.map((state: any) => (
+                <MenuItem key={state.id} value={state.id}>
+                  {state.name}
+                </MenuItem>
+              ))}
+            </Select>
+          </Grid>
+          <Grid item>
+            <Box sx={{ m: 1, mt: 0 }}>Priority</Box>
+            <Select
+              value={selectedPriority}
+              onChange={(e: any) => {
+                setSelectedPriority(e.target.value);
+                updateTicket();
+              }}
+              size="small"
+              sx={{
+                width: "100%",
+                backgroundColor: "white",
+              }}
+            >
+              {priorities?.map((priority: any) => (
+                <MenuItem key={priority.id} value={priority.id}>
+                  {priority.name}
+                </MenuItem>
+              ))}
+            </Select>
+          </Grid>
 
-        <Grid item>
-          <Box sx={{ mb: 1 }}>Tags</Box>
-          <Stack
-            direction="row"
-            spacing={1}
-            sx={{
-              backgroundColor: "white",
-              p: 1,
-              borderRadius: "6px",
-              border: "1px solid #bbb",
-              minHeight: 120,
-            }}
-            flexWrap="wrap"
-          >
-            {selectedTags.map((tag: string) => (
-              <Chip key={tag} label={tag} onDelete={handleDelete} />
-            ))}
-          </Stack>
+          <Grid item>
+            <Box sx={{ mb: 1 }}>Tags</Box>
+            <MuiChipsInput
+              sx={{ backgroundColor: "white", width: "100%" }}
+              value={selectedTags}
+              onChange={(tags: any) => {
+                setSelectedTags(tags);
+                updateTicket();
+              }}
+            />
+          </Grid>
         </Grid>
-      </Grid>
-    </Box>
+      </Box>
+    )
   );
 };

apps/link/app/(main)/tickets/[id]/@edit/page.tsx

@@ -1,5 +1,11 @@
 import { TicketEdit } from "./_components/TicketEdit";
 
-export default function Page() {
-  return <TicketEdit ticket={undefined} />;
+type PageProps = {
+  params: {
+    id: string;
+  };
+};
+
+export default function Page({ params: { id } }: PageProps) {
+  return <TicketEdit id={id} />;
 }

apps/link/app/(main)/tickets/[id]/layout.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { ReactNode } from "react";
 import { Grid } from "@mui/material";
 
 type LayoutProps = {