sr2/link-stack
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Overview & recent fixes, auth updates, SWR fixes

Browse source
This commit is contained in:
Darren Clarke 2023-11-10 14:17:09 +01:00
parent 7df947f35a
commit 8d86db882d
29 changed files with 1252 additions and 1221 deletions
Download patch file Download diff file Expand all files Collapse all files

26
apps/leafcutter/package.json
View file

@ -21,18 +21,18 @@
"@fontsource/poppins": "^5.0.8",
"@fontsource/roboto": "^5.0.8",
"@mui/icons-material": "^5",
"@mui/lab": "^5.0.0-alpha.149",
"@mui/lab": "^5.0.0-alpha.152",
"@mui/material": "^5",
"@mui/x-data-grid-pro": "^6.16.3",
"@mui/x-date-pickers-pro": "^6.16.3",
"@mui/x-data-grid-pro": "^6.18.1",
"@mui/x-date-pickers-pro": "^6.18.1",
"@opensearch-project/opensearch": "^2.4.0",
"cryptr": "^6.3.0",
"date-fns": "^2.30.0",
"http-proxy-middleware": "^2.0.6",
"leafcutter-common": "*",
"material-ui-popup-state": "^5.0.9",
"next": "13.5.6",
"next-auth": "^4.24.3",
"material-ui-popup-state": "^5.0.10",
"next": "14.0.2",
"next-auth": "^4.24.4",
"next-http-proxy-middleware": "^1.2.6",
"nodemailer": "^6.9.7",
"react": "18.2.0",
@ -48,17 +48,17 @@
"uuid": "^9.0.1"
},
"devDependencies": {
"@babel/core": "^7.23.2",
"@types/node": "^20.8.7",
"@types/react": "18.2.31",
"@types/uuid": "^9.0.6",
"@babel/core": "^7.23.3",
"@types/node": "^20.9.0",
"@types/react": "18.2.37",
"@types/uuid": "^9.0.7",
"babel-loader": "^9.1.3",
"eslint": "^8.52.0",
"eslint": "^8.53.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-next": "^13.5.6",
"eslint-config-next": "^14.0.2",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-import": "^2.29.0",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-prettier": "^5.0.1",
"eslint-plugin-react": "^7.33.2",
"typescript": "5.2.2"

2
apps/link/app/(main)/_components/SearchBox.tsx
View file

@ -96,7 +96,7 @@ const SearchResult: FC<SearchResultProps> = ({ props, option }) => {
export const SearchBox: FC = () => {
const [open, setOpen] = useState(false);
const [selectedValue, setSelectedValue] = useState(null);
const [searchTerms, setSearchTerms] = useState(null);
const [searchTerms, setSearchTerms] = useState("");
const pathname = usePathname();
const router = useRouter();
const { data, error }: any = useSWR({

6
apps/link/app/(main)/_components/StyledDataGrid.tsx
View file

@ -45,6 +45,10 @@ export const StyledDataGrid: FC<StyledDataGridProps> = ({
height,
".MuiDataGrid-row": {
cursor: "pointer",
"&:hover": {
backgroundColor: "#1982fc33 !important",
fontWeight: "bold",
},
},
".MuiDataGrid-row:nth-of-type(1n)": {
backgroundColor: "#f3f3f3",
@ -71,7 +75,7 @@ export const StyledDataGrid: FC<StyledDataGridProps> = ({
density="compact"
pagination
initialState={{
pagination: { paginationModel: { pageSize: 20 } },
pagination: { paginationModel: { pageSize: 25 } },
}}
pageSizeOptions={[5, 10, 25]}
paginationMode="client"

14
apps/link/app/(main)/_components/ZammadWrapper.tsx
View file

@ -18,12 +18,24 @@ export const ZammadWrapper: FC<ZammadWrapperProps> = ({
const router = useRouter();
const { data: session } = useSession({ required: true });
const timeoutRef = useRef(null);
const [hashCheckComplete, setHashCheckComplete] = useState(false);
const [authenticated, setAuthenticated] = useState(false);
const [display, setDisplay] = useState("none");
const url = `/zammad${path}`;
const id = url.replace(/[^a-zA-Z0-9]/g, "");
useEffect(() => {
const hash = window?.location?.hash;
if (hash && hash.startsWith("#ticket/zoom/")) {
const ticketID = hash.split("/").pop();
router.push(`/tickets/${ticketID}`);
}
setHashCheckComplete(true);
});
useEffect(() => {
if (!hashCheckComplete) return;
const checkAuthenticated = async () => {
const res = await fetch("/zammad/auth/sso", {
method: "GET",
@ -38,7 +50,7 @@ export const ZammadWrapper: FC<ZammadWrapperProps> = ({
};
checkAuthenticated();
}, [path]);
}, [path, hashCheckComplete]);
useEffect(() => {
if (session === null) {

35
apps/link/app/(main)/overview/[overview]/_components/TicketCreateDialog.tsx
View file

@ -8,9 +8,9 @@ import {
DialogActions,
DialogContent,
TextField,
Autocomplete
Autocomplete,
} from "@mui/material";
import { useSWRConfig } from "swr";
import useSWR, { useSWRConfig } from "swr";
import { createTicketMutation } from "app/_graphql/createTicketMutation";
interface TicketCreateDialogProps {
@ -31,8 +31,8 @@ export const TicketCreateDialog: FC<TicketCreateDialogProps> = ({
const [tags, setTags] = useState([]);
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
const backgroundColor = kind === "note" ? "#FFB620" : "#1982FC";
const color = kind === "note" ? "black" : "white";
const backgroundColor = "#1982FC";
const color = "white";
const { fetcher } = useSWRConfig();
const ticket = {
customerId: customerID,
@ -46,16 +46,28 @@ export const TicketCreateDialog: FC<TicketCreateDialogProps> = ({
body,
type: kind,
internal: kind === "note",
}
},
};
const { data: users, error: usersError }: any = useSWR({
url: "/api/v1/users",
method: "GET",
});
console.log({ users, usersError });
const customers =
users?.filter((user: any) => user.role_ids.includes(3)) ?? [];
const formattedCustomers = customers.map((customer: any) => ({
label: customer.login,
id: `${customer.id}`,
}));
const createTicket = async () => {
await fetcher({
document: createTicketMutation,
variables: {
input: {
ticket
ticket,
},
},
});
@ -78,10 +90,13 @@ export const TicketCreateDialog: FC<TicketCreateDialogProps> = ({
<Grid item>
<Autocomplete
disablePortal
options={[{ label: "Test One", id: 1 }, { label: "Test Two", id: 2 }]}
options={formattedCustomers}
value={customerID}
sx={{ width: 300 }}
onChange={(e: any) => setCustomerID(e.target.value)}
renderInput={(params) => <TextField {...params} label="Customer" />}
onChange={(e: any) => setCustomerID(e.target.value.id)}
renderInput={(params) => (
<TextField {...params} label="Customer" />
)}
/>
</Grid>
<Grid item>
@ -129,7 +144,7 @@ export const TicketCreateDialog: FC<TicketCreateDialogProps> = ({
}}
onClick={createTicket}
>
{kind === "note" ? "Save Note" : "Send Reply"}
Create Ticket
</Button>
</Grid>
</Grid>

48
apps/link/app/(main)/overview/[overview]/_components/ZammadOverview.tsx
View file

@ -3,23 +3,57 @@
import { FC, useEffect, useState } from "react";
import useSWR from "swr";
import { TicketList } from "./TicketList";
import { getTicketOverviewCountsQuery } from "app/_graphql/getTicketOverviewCountsQuery";
import { getTicketsByOverviewQuery } from "app/_graphql/getTicketsByOverviewQuery";
type ZammadOverviewProps = {
name: string;
id: string;
};
export const ZammadOverview: FC<ZammadOverviewProps> = ({ name, id }) => {
export const ZammadOverview: FC<ZammadOverviewProps> = ({ name }) => {
const [overviewID, setOverviewID] = useState(null);
const [tickets, setTickets] = useState([]);
const [error, setError] = useState(null);
const { data: ticketData, error: ticketError }: any = useSWR(
const { data: overviewData, error: overviewError }: any = useSWR(
{
document: getTicketsByOverviewQuery,
variables: { overviewId: `gid://zammad/Overview/${id}`, pageSize: 250 },
document: getTicketOverviewCountsQuery,
},
{ refreshInterval: 10000 },
);
const { data: ticketData, error: ticketError }: any = useSWR(
{
document: getTicketsByOverviewQuery,
variables: { overviewId: overviewID, pageSize: 250 },
},
{ refreshInterval: 10000 },
);
const overviewLookup = {
Assigned: "My Assigned Tickets",
Open: "Open Tickets",
Urgent: "Escalated Tickets",
Unassigned: "Unassigned & Open Tickets",
};
const findOverviewByName = (name: string) => {
const fullName = overviewLookup[name];
return overviewData?.ticketOverviews?.edges?.find(
(overview: any) => overview.node.name === fullName,
)?.node?.id;
};
useEffect(() => {
if (overviewData) {
setOverviewID(findOverviewByName(name));
}
}, [overviewData, name]);
console.log({
name,
overviewID,
overviewData,
overviewError,
ticketData,
ticketError,
});
const restFetcher = (url: string) => fetch(url).then((r) => r.json());
const { data: recent } = useSWR("/api/v1/recent_view", restFetcher);
@ -41,6 +75,8 @@ export const ZammadOverview: FC<ZammadOverviewProps> = ({ name, id }) => {
const edges = ticketData?.ticketsByOverview?.edges;
if (edges) {
const nodes = edges.map((edge: any) => edge.node);
console.log({ nodes });
setError(null);
setTickets(sortTickets(nodes));
}
@ -72,6 +108,6 @@ export const ZammadOverview: FC<ZammadOverviewProps> = ({ name, id }) => {
}, [name]);
const shouldRender = tickets && !error;
console.log({ shouldRender, tickets, error });
return shouldRender && <TicketList title={name} tickets={tickets} />;
};

11
apps/link/app/(main)/overview/[overview]/page.tsx
View file

@ -21,14 +21,6 @@ export async function generateMetadata({
};
}
const overviews = {
assigned: 1,
unassigned: 2,
recent: 3,
open: 5,
urgent: 7,
};
type PageProps = {
params: {
overview: string;
@ -37,7 +29,6 @@ type PageProps = {
export default function Page({ params: { overview } }: PageProps) {
const section = getSection(overview);
console.log({ section });
return <ZammadOverview name={section} id={overviews[overview]} />;
return <ZammadOverview name={section} />;
}

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

@ -43,6 +43,14 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
{ refreshInterval: 2000 },
);
const { data: recentViewData, error: recentViewError }: any = useSWR({
url: "/api/v1/recent_view",
method: "POST",
body: JSON.stringify({ object: "Ticket", o_id: id }),
});
console.log({ recentViewData, recentViewError });
const ticket = ticketData?.ticket;
const ticketArticles = ticketArticlesData?.ticketArticles;
const externalArticles = ticketArticles?.edges.filter(

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

@ -40,7 +40,7 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
const { data: states } = useSWR("/api/v1/ticket_states", restFetcher);
const { data: priorities } = useSWR("/api/v1/ticket_priorities", restFetcher);
const { data: recent } = useSWR("/api/v1/recent_view", restFetcher);
console.log({ recent });
// const { data: tags } = useSWR("/api/v1/tags", restFetcher);
const filteredStates = states?.filter(
(state: any) => !["new", "merged", "removed"].includes(state.name),

71
apps/link/app/_components/MultiProvider.tsx
View file

@ -1,6 +1,6 @@
"use client";
import { FC, PropsWithChildren, useState, useEffect } from "react";
import { FC, PropsWithChildren, useState } from "react";
import { usePathname } from "next/navigation";
import { CssBaseline } from "@mui/material";
import { CookiesProvider } from "react-cookie";
@ -24,25 +24,46 @@ export const MultiProvider: FC<PropsWithChildren> = ({ children }) => {
typeof window !== "undefined" && window.location.origin
? window.location.origin
: null;
const client = new GraphQLClient(`${origin}/zammad/graphql`, {
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
});
const client = new GraphQLClient(`${origin}/zammad/graphql`);
const messages: any = { en: locales.en, fr: locales.fr };
const locale = "en";
const fetchAndCheckAuth = async ({ document, variables }: any) => {
const fetchAndCheckAuth = async ({
document,
variables,
url,
method,
body,
}: any) => {
const requestHeaders = {
"Content-Type": "application/json",
Accept: "application/json",
"X-CSRF-Token": csrfToken,
};
const { data, headers, status } = await client.rawRequest(
document,
variables,
requestHeaders,
);
let responseData = null;
let responseHeaders = new Headers();
let responseStatus = null;
if (status !== 200) {
if (document) {
const { data, headers, status } = await client.rawRequest(
document,
variables,
requestHeaders,
);
responseData = data;
responseHeaders = headers;
responseStatus = status;
} else {
const res = await fetch(url, {
method,
headers: requestHeaders,
body,
});
responseData = await res.json();
responseHeaders = res.headers;
responseStatus = res.status;
}
if (responseStatus !== 200) {
const res = await fetch("/zammad/auth/sso", {
method: "GET",
redirect: "manual",
@ -53,18 +74,30 @@ export const MultiProvider: FC<PropsWithChildren> = ({ children }) => {
return null;
}
const token = headers.get("CSRF-Token");
const token = responseHeaders.get("CSRF-Token");
setCsrfToken(token);
return data;
return responseData;
};
const graphQLFetcher = async ({ document, variables }: any) => {
const multiFetcher = async ({
document,
variables,
url,
method,
body,
}: any) => {
let checks = 0;
let data = null;
while (!data && checks < 2) {
data = await fetchAndCheckAuth({ document, variables });
data = await fetchAndCheckAuth({
document,
variables,
url,
method,
body,
});
checks++;
}
@ -75,7 +108,7 @@ export const MultiProvider: FC<PropsWithChildren> = ({ children }) => {
<>
<CssBaseline />
<NextAppDirEmotionCacheProvider options={{ key: "css" }}>
<SWRConfig value={{ fetcher: graphQLFetcher }}>
<SWRConfig value={{ fetcher: multiFetcher }}>
<SessionProvider>
<CookiesProvider>
<LocalizationProvider dateAdapter={AdapterDateFns}>

1
apps/link/middleware.ts
View file

@ -40,7 +40,6 @@ const checkRewrites = async (request: NextRequestWithAuth) => {
} else if (request.nextUrl.pathname.startsWith('/proxy/api') || request.nextUrl.pathname.startsWith('/proxy/assets')) {
return rewriteURL(request, `${linkBaseURL}/proxy`, zammadURL);
} else if (request.nextUrl.pathname.startsWith('/api/v1') || request.nextUrl.pathname.startsWith('/auth/sso') || request.nextUrl.pathname.startsWith('/mobile')) {
console.log("THIS PATH");
return rewriteURL(request, linkBaseURL, zammadURL, headers);
}

34
apps/link/package.json
View file

@ -19,25 +19,25 @@
"@fontsource/poppins": "^5.0.8",
"@fontsource/roboto": "^5.0.8",
"@mui/icons-material": "^5",
"@mui/lab": "^5.0.0-alpha.149",
"@mui/lab": "^5.0.0-alpha.152",
"@mui/material": "^5",
"@mui/x-data-grid-pro": "^6.16.3",
"@mui/x-date-pickers-pro": "^6.16.3",
"@mui/x-data-grid-pro": "^6.18.1",
"@mui/x-date-pickers-pro": "^6.18.1",
"cryptr": "^6.3.0",
"date-fns": "^2.30.0",
"graphql-request": "^6.1.0",
"leafcutter-common": "*",
"material-ui-popup-state": "^5.0.9",
"material-ui-popup-state": "^5.0.10",
"mui-chips-input": "^2.1.3",
"next": "13.5.6",
"next-auth": "^4.24.3",
"next": "14.0.2",
"next-auth": "^4.24.4",
"ra-data-graphql": "^4.14.3",
"ra-i18n-polyglot": "^4.15.1",
"ra-input-rich-text": "^4.15.1",
"ra-language-english": "^4.15.1",
"ra-i18n-polyglot": "^4.15.2",
"ra-input-rich-text": "^4.15.3",
"ra-language-english": "^4.15.2",
"ra-postgraphile": "^6.1.2",
"react": "18.2.0",
"react-admin": "^4.15.1",
"react-admin": "^4.15.3",
"react-cookie": "^6.1.1",
"react-digit-input": "^2.1.0",
"react-dom": "18.2.0",
@ -51,17 +51,17 @@
"twilio-client": "^1.15.1"
},
"devDependencies": {
"@babel/core": "^7.23.2",
"@types/node": "^20.8.7",
"@types/react": "18.2.31",
"@types/uuid": "^9.0.6",
"@babel/core": "^7.23.3",
"@types/node": "^20.9.0",
"@types/react": "18.2.37",
"@types/uuid": "^9.0.7",
"babel-loader": "^9.1.3",
"eslint": "^8.52.0",
"eslint": "^8.53.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-next": "^13.5.6",
"eslint-config-next": "^14.0.2",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-import": "^2.29.0",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-prettier": "^5.0.1",
"eslint-plugin-react": "^7.33.2",
"typescript": "5.2.2"

6
apps/metamigo-api/package.json
View file

@ -29,7 +29,7 @@
"graphile-worker": "^0.13.0",
"hapi-auth-bearer-token": "^8.0.0",
"hapi-auth-jwt2": "^10.4.0",
"hapi-swagger": "^17.1.0",
"hapi-swagger": "^17.2.0",
"joi": "^17.11.0",
"jsonwebtoken": "^9.0.2",
"jwks-rsa": "^3.1.0",
@ -40,7 +40,7 @@
"pg-promise": "^11.5.4",
"postgraphile": "4.12.3",
"postgraphile-plugin-connection-filter": "^2.3.0",
"remeda": "^1.27.1",
"remeda": "^1.29.0",
"twilio": "^4.19.0",
"typeorm": "^0.3.17",
"@whiskeysockets/baileys": "^6.5.0"
@ -58,7 +58,7 @@
"ts-node": "^10.9.1",
"tsc-watch": "^6.0.4",
"tsconfig-link": "*",
"typedoc": "^0.25.2",
"typedoc": "^0.25.3",
"typescript": "^5.2.2"
},
"nodemonConfig": {

2
apps/metamigo-cli/package.json
View file

@ -23,7 +23,7 @@
"graphql": "15.8.0"
},
"devDependencies": {
"@types/jest": "^29.5.6",
"@types/jest": "^29.5.8",
"pino-pretty": "^10.2.3",
"nodemon": "^3.0.1",
"tsconfig-link": "*",

16
apps/metamigo-worker/package.json
View file

@ -14,16 +14,16 @@
"html-to-text": "^9.0.5",
"node-fetch": "^3",
"pg-promise": "^11.5.4",
"remeda": "^1.27.1",
"remeda": "^1.29.0",
"twilio": "^4.19.0"
},
"devDependencies": {
"@babel/core": "7.23.2",
"@babel/preset-env": "7.23.2",
"@babel/preset-typescript": "7.23.2",
"@types/fluent-ffmpeg": "^2.1.23",
"@types/jest": "^29.5.6",
"eslint": "^8.52.0",
"@babel/core": "7.23.3",
"@babel/preset-env": "7.23.3",
"@babel/preset-typescript": "7.23.3",
"@types/fluent-ffmpeg": "^2.1.24",
"@types/jest": "^29.5.8",
"eslint": "^8.53.0",
"jest": "^29.7.0",
"jest-circus": "^29.7.0",
"jest-junit": "^16.0.0",
@ -31,7 +31,7 @@
"pino-pretty": "^10.2.3",
"prettier": "^3.0.3",
"ts-node": "^10.9.1",
"typedoc": "^0.25.2",
"typedoc": "^0.25.3",
"typescript": "^5.2.2"
},
"nodemonConfig": {