Use enums as types in the GraphQL codegen

Author: sandhose

frontend/codegen.ts

@@ -15,6 +15,7 @@ const config: CodegenConfig = {
       preset: "client",
       config: {
         useTypeImports: true,
+        enumsAsTypes: true,
         // By default, unknown scalars are generated as `any`. This is not ideal for catching potential bugs.
         defaultScalarType: "unknown",
         scalars: {

frontend/src/components/BrowserSession.tsx

@@ -14,7 +14,7 @@ import { useTranslation } from "react-i18next";
 import { useMutation } from "urql";
 
 import { type FragmentType, graphql, useFragment } from "../gql";
-import { DeviceType } from "../gql/graphql";
+import type { DeviceType } from "../gql/graphql";
 
 import DateTime from "./DateTime";
 import EndSessionButton from "./Session/EndSessionButton";
@@ -97,7 +97,7 @@ const BrowserSession: React.FC<Props> = ({ session, isCurrent }) => {
 
   const onSessionEnd = useEndBrowserSession(data.id, isCurrent);
 
-  const deviceType = data.userAgent?.deviceType ?? DeviceType.Unknown;
+  const deviceType = data.userAgent?.deviceType ?? "UNKNOWN";
 
   let deviceName: string | null = null;
   let clientName: string | null = null;

frontend/src/components/CompatSession.tsx

@@ -86,7 +86,7 @@ const CompatSession: React.FC<{
     ? simplifyUrl(data.ssoLogin.redirectUri)
     : undefined;
 
-  const deviceType = data.userAgent?.deviceType ?? DeviceType.Unknown;
+  const deviceType = data.userAgent?.deviceType ?? "UNKNOWN";
 
   const deviceName =
     data.userAgent?.model ??

frontend/src/components/OAuth2Session.test.tsx

@@ -12,7 +12,7 @@ import { beforeAll, describe, expect, it } from "vitest";
 import { never } from "wonka";
 
 import { makeFragmentData } from "../gql";
-import { Oauth2ApplicationType } from "../gql/graphql";
+import type { Oauth2ApplicationType } from "../gql/graphql";
 import { mockLocale } from "../test-utils/mockLocale";
 import { DummyRouter } from "../test-utils/router";
 
@@ -34,7 +34,7 @@ describe("<OAuth2Session />", () => {
       clientId: "test-client-id",
       clientName: "Element",
       clientUri: "https://element.io",
-      applicationType: Oauth2ApplicationType.Web,
+      applicationType: "WEB" as Oauth2ApplicationType,
     },
   };
 
@@ -80,7 +80,7 @@ describe("<OAuth2Session />", () => {
         finishedAt,
         client: {
           ...defaultSession.client,
-          applicationType: Oauth2ApplicationType.Native,
+          applicationType: "NATIVE",
         },
       },
       FRAGMENT,

frontend/src/components/OAuth2Session.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
 import { useMutation } from "urql";
 
 import { type FragmentType, graphql, useFragment } from "../gql";
-import { DeviceType, Oauth2ApplicationType } from "../gql/graphql";
+import type { DeviceType, Oauth2ApplicationType } from "../gql/graphql";
 import { getDeviceIdFromScope } from "../utils/deviceIdFromScope";
 
 import DateTime from "./DateTime";
@@ -58,13 +58,13 @@ export const END_SESSION_MUTATION = graphql(/* GraphQL */ `
 const getDeviceTypeFromClientAppType = (
   appType?: Oauth2ApplicationType | null,
 ): DeviceType => {
-  if (appType === Oauth2ApplicationType.Web) {
-    return DeviceType.Pc;
+  if (appType === "WEB") {
+    return "PC";
   }
-  if (appType === Oauth2ApplicationType.Native) {
-    return DeviceType.Mobile;
+  if (appType === "NATIVE") {
+    return "MOBILE";
   }
-  return DeviceType.Unknown;
+  return "UNKNOWN";
 };
 
 type Props = {
@@ -88,7 +88,7 @@ const OAuth2Session: React.FC<Props> = ({ session }) => {
     : undefined;
 
   const deviceType =
-    (data.userAgent?.deviceType === DeviceType.Unknown
+    (data.userAgent?.deviceType === "UNKNOWN"
       ? null
       : data.userAgent?.deviceType) ??
     getDeviceTypeFromClientAppType(data.client.applicationType);

frontend/src/components/Session/DeviceTypeIcon.stories.tsx

@@ -15,17 +15,12 @@ const meta = {
   component: DeviceTypeIcon,
   tags: ["autodocs"],
   args: {
-    deviceType: DeviceType.Unknown,
+    deviceType: "UNKNOWN",
   },
   argTypes: {
     deviceType: {
       control: "select",
-      options: [
-        DeviceType.Unknown,
-        DeviceType.Pc,
-        DeviceType.Mobile,
-        DeviceType.Tablet,
-      ],
+      options: ["UNKNOWN", "PC", "MOBILE", "TABLET"],
     },
   },
 } satisfies Meta<typeof DeviceTypeIcon>;
@@ -37,16 +32,16 @@ export const Unknown: Story = {};
 
 export const Pc: Story = {
   args: {
-    deviceType: DeviceType.Pc,
+    deviceType: "PC",
   },
 };
 export const Mobile: Story = {
   args: {
-    deviceType: DeviceType.Mobile,
+    deviceType: "MOBILE",
   },
 };
 export const Tablet: Story = {
   args: {
-    deviceType: DeviceType.Tablet,
+    deviceType: "TABLET",
   },
 };

frontend/src/components/Session/DeviceTypeIcon.tsx

@@ -11,18 +11,18 @@ import IconBrowser from "@vector-im/compound-design-tokens/assets/web/icons/web-
 import type { FunctionComponent, SVGProps } from "react";
 import { useTranslation } from "react-i18next";
 
-import { DeviceType } from "../../gql/graphql";
+import type { DeviceType } from "../../gql/graphql";
 
 import styles from "./DeviceTypeIcon.module.css";
 
 const deviceTypeToIcon: Record<
   DeviceType,
   FunctionComponent<SVGProps<SVGSVGElement> & { title?: string | undefined }>
 > = {
-  [DeviceType.Unknown]: IconUnknown,
-  [DeviceType.Pc]: IconComputer,
-  [DeviceType.Mobile]: IconMobile,
-  [DeviceType.Tablet]: IconBrowser,
+  UNKNOWN: IconUnknown,
+  PC: IconComputer,
+  MOBILE: IconMobile,
+  TABLET: IconBrowser,
 };
 
 const DeviceTypeIcon: React.FC<{ deviceType: DeviceType }> = ({
@@ -33,10 +33,10 @@ const DeviceTypeIcon: React.FC<{ deviceType: DeviceType }> = ({
   const Icon = deviceTypeToIcon[deviceType];
 
   const deviceTypeToLabel: Record<DeviceType, string> = {
-    [DeviceType.Unknown]: t("frontend.device_type_icon_label.unknown"),
-    [DeviceType.Pc]: t("frontend.device_type_icon_label.pc"),
-    [DeviceType.Mobile]: t("frontend.device_type_icon_label.mobile"),
-    [DeviceType.Tablet]: t("frontend.device_type_icon_label.tablet"),
+    UNKNOWN: t("frontend.device_type_icon_label.unknown"),
+    PC: t("frontend.device_type_icon_label.pc"),
+    MOBILE: t("frontend.device_type_icon_label.mobile"),
+    TABLET: t("frontend.device_type_icon_label.tablet"),
   };
 
   const label = deviceTypeToLabel[deviceType];

frontend/src/components/SessionCard/SessionCard.stories.tsx

@@ -9,7 +9,7 @@ import IconSignOut from "@vector-im/compound-design-tokens/assets/web/icons/sign
 import { Button } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
 
-import { DeviceType } from "../../gql/graphql";
+import type { DeviceType } from "../../gql/graphql";
 
 import * as Card from "./SessionCard";
 
@@ -51,10 +51,13 @@ const meta = {
     disabled: false,
     deviceName: "MacBook Pro 16",
     clientName: "Firefox",
-    deviceType: DeviceType.Pc,
+    deviceType: "PC",
   },
   argTypes: {
-    deviceType: { control: "select", options: Object.values(DeviceType) },
+    deviceType: {
+      control: "select",
+      options: ["PC", "MOBILE", "TABLET", "UNKNOWN"],
+    },
     disabled: { control: "boolean" },
     deviceName: { control: "text" },
     clientName: { control: "text" },

frontend/src/components/UserGreeting/UserGreeting.stories.tsx

@@ -9,10 +9,7 @@ import { Provider } from "urql";
 import { delay, fromValue, pipe } from "wonka";
 
 import { makeFragmentData } from "../../gql";
-import {
-  type SetDisplayNameMutation,
-  SetDisplayNameStatus,
-} from "../../gql/graphql";
+import type { SetDisplayNameMutation } from "../../gql/graphql";
 
 import UserGreeting, { CONFIG_FRAGMENT, FRAGMENT } from "./UserGreeting";
 
@@ -31,7 +28,7 @@ const Template: React.FC<{
         fromValue({
           data: {
             setDisplayName: {
-              status: SetDisplayNameStatus.Set,
+              status: "SET",
               user: { id: userId, matrix: { displayName } },
             },
           },

frontend/src/components/UserGreeting/UserGreeting.tsx

@@ -107,7 +107,7 @@ const UserGreeting: React.FC<Props> = ({ user, siteConfig }) => {
 
     const result = await setDisplayName({ displayName, userId: data.id });
 
-    if (result.data?.setDisplayName.status === SetDisplayNameStatus.Set) {
+    if (result.data?.setDisplayName.status === "SET") {
       setOpen(false);
     }
   };
@@ -163,8 +163,7 @@ const UserGreeting: React.FC<Props> = ({ user, siteConfig }) => {
               <Form.Field
                 name="displayname"
                 serverInvalid={
-                  setDisplayNameResult.data?.setDisplayName.status ===
-                  SetDisplayNameStatus.Invalid
+                  setDisplayNameResult.data?.setDisplayName.status === "INVALID"
                 }
               >
                 <Form.Label>