frontend: fix compatibility session crash & simplify the redirect URI

2025-11-23 11:02:35 +03:00 · 2023-08-31 14:47:50 +02:00
parent 45e3fb045d
commit 73d33dfccb
4 changed files with 41 additions and 128 deletions
--- a/frontend/src/components/CompatSession.tsx
+++ b/frontend/src/components/CompatSession.tsx
@@ -22,14 +22,6 @@ import { FragmentType, graphql, useFragment } from "../gql";

 import { Session } from "./Session";

-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const LOGIN_FRAGMENT = graphql(/* GraphQL */ `
-  fragment CompatSession_sso_login on CompatSsoLogin {
-    id
-    redirectUri
-  }
-`);
-
 export const COMPAT_SESSION_FRAGMENT = graphql(/* GraphQL */ `
  fragment CompatSession_session on CompatSession {
    id
@@ -38,22 +30,11 @@ export const COMPAT_SESSION_FRAGMENT = graphql(/* GraphQL */ `
    finishedAt
    ssoLogin {
      id
-      ...CompatSession_sso_login
+      redirectUri
    }
  }
 `);

-type CompatSessionType = {
-  id: string;
-  deviceId: string;
-  createdAt: string;
-  finishedAt: string | null;
-  ssoLogin: {
-    id: string;
-    redirectUri: string;
-  };
-};
-
 const END_SESSION_MUTATION = graphql(/* GraphQL */ `
  mutation EndCompatSession($id: ID!) {
    endCompatSession(input: { compatSessionId: $id }) {
@@ -78,14 +59,32 @@ const endCompatSessionFamily = atomFamily((id: string) => {
  return endCompatSessionAtom;
 });

+const simplifyUrl = (url: string): string => {
+  let parsed;
+  try {
+    parsed = new URL(url);
+  } catch (e) {
+    // Not a valid URL, return the original
+    return url;
+  }
+
+  // Clear out the search params and hash
+  parsed.search = "";
+  parsed.hash = "";
+
+  if (parsed.protocol === "https:") {
+    return parsed.hostname;
+  }
+
+  // Return the simplified URL
+  return parsed.toString();
+};
+
 const CompatSession: React.FC<{
  session: FragmentType<typeof COMPAT_SESSION_FRAGMENT>;
 }> = ({ session }) => {
  const [pending, startTransition] = useTransition();
-  const data = useFragment(
-    COMPAT_SESSION_FRAGMENT,
-    session,
-  ) as CompatSessionType;
+  const data = useFragment(COMPAT_SESSION_FRAGMENT, session);
  const endCompatSession = useSetAtom(endCompatSessionFamily(data.id));

  const onSessionEnd = (): void => {
@@ -94,13 +93,17 @@ const CompatSession: React.FC<{
    });
  };

+  const clientName = data.ssoLogin?.redirectUri
+    ? simplifyUrl(data.ssoLogin.redirectUri)
+    : undefined;
+
  return (
    <Session
      id={data.id}
      name={data.deviceId}
      createdAt={data.createdAt}
      finishedAt={data.finishedAt || undefined}
-      clientName={data.ssoLogin.redirectUri}
+      clientName={clientName}
    >
      {!data.finishedAt && (
        <Button
--- a/frontend/src/components/snapshots/CompatSession.test.tsx.snap
+++ b/frontend/src/components/snapshots/CompatSession.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`<CompatSession /> > renders a finished session 1`] = `
    <span
      className="_font-body-sm-semibold_1g2sj_49 _sessionMetadata_634806"
    >
-      https://element.io
+      element.io
    </span>
  </p>
 </div>
@@ -67,7 +67,7 @@ exports[`<CompatSession /> > renders an active session 1`] = `
    <span
      className="_font-body-sm-semibold_1g2sj_49 _sessionMetadata_634806"
    >
-      https://element.io
+      element.io
    </span>
  </p>
  <div
--- a/frontend/src/gql/gql.ts
+++ b/frontend/src/gql/gql.ts
@@ -23,9 +23,7 @@ const documents = {
    types.EndBrowserSessionDocument,
  "\n  query BrowserSessionList(\n    $userId: ID!\n    $state: BrowserSessionState\n    $first: Int\n    $after: String\n    $last: Int\n    $before: String\n  ) {\n    user(id: $userId) {\n      id\n      browserSessions(\n        first: $first\n        after: $after\n        last: $last\n        before: $before\n        state: $state\n      ) {\n        totalCount\n\n        edges {\n          cursor\n          node {\n            id\n            ...BrowserSession_session\n          }\n        }\n\n        pageInfo {\n          hasNextPage\n          hasPreviousPage\n          startCursor\n          endCursor\n        }\n      }\n    }\n  }\n":
    types.BrowserSessionListDocument,
-  "\n  fragment CompatSession_sso_login on CompatSsoLogin {\n    id\n    redirectUri\n  }\n":
-    types.CompatSession_Sso_LoginFragmentDoc,
-  "\n  fragment CompatSession_session on CompatSession {\n    id\n    createdAt\n    deviceId\n    finishedAt\n    ssoLogin {\n      id\n      ...CompatSession_sso_login\n    }\n  }\n":
+  "\n  fragment CompatSession_session on CompatSession {\n    id\n    createdAt\n    deviceId\n    finishedAt\n    ssoLogin {\n      id\n      redirectUri\n    }\n  }\n":
    types.CompatSession_SessionFragmentDoc,
  "\n  mutation EndCompatSession($id: ID!) {\n    endCompatSession(input: { compatSessionId: $id }) {\n      status\n      compatSession {\n        id\n        finishedAt\n      }\n    }\n  }\n":
    types.EndCompatSessionDocument,
@@ -123,14 +121,8 @@ export function graphql(
 * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
 */
 export function graphql(
-  source: "\n  fragment CompatSession_sso_login on CompatSsoLogin {\n    id\n    redirectUri\n  }\n",
-): (typeof documents)["\n  fragment CompatSession_sso_login on CompatSsoLogin {\n    id\n    redirectUri\n  }\n"];
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(
-  source: "\n  fragment CompatSession_session on CompatSession {\n    id\n    createdAt\n    deviceId\n    finishedAt\n    ssoLogin {\n      id\n      ...CompatSession_sso_login\n    }\n  }\n",
-): (typeof documents)["\n  fragment CompatSession_session on CompatSession {\n    id\n    createdAt\n    deviceId\n    finishedAt\n    ssoLogin {\n      id\n      ...CompatSession_sso_login\n    }\n  }\n"];
+  source: "\n  fragment CompatSession_session on CompatSession {\n    id\n    createdAt\n    deviceId\n    finishedAt\n    ssoLogin {\n      id\n      redirectUri\n    }\n  }\n",
+): (typeof documents)["\n  fragment CompatSession_session on CompatSession {\n    id\n    createdAt\n    deviceId\n    finishedAt\n    ssoLogin {\n      id\n      redirectUri\n    }\n  }\n"];
 /**
 * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
 */
--- a/frontend/src/gql/graphql.ts
+++ b/frontend/src/gql/graphql.ts
@@ -1001,25 +1001,17 @@ export type BrowserSessionListQuery = {
  } | null;
 };

-export type CompatSession_Sso_LoginFragment = {
-  __typename?: "CompatSsoLogin";
-  id: string;
-  redirectUri: any;
-} & { " $fragmentName"?: "CompatSession_Sso_LoginFragment" };
-
 export type CompatSession_SessionFragment = {
  __typename?: "CompatSession";
  id: string;
  createdAt: any;
  deviceId: string;
  finishedAt?: any | null;
-  ssoLogin?:
-    | ({ __typename?: "CompatSsoLogin"; id: string } & {
-        " $fragmentRefs"?: {
-          CompatSession_Sso_LoginFragment: CompatSession_Sso_LoginFragment;
-        };
-      })
-    | null;
+  ssoLogin?: {
+    __typename?: "CompatSsoLogin";
+    id: string;
+    redirectUri: any;
+  } | null;
 } & { " $fragmentName"?: "CompatSession_SessionFragment" };

 export type EndCompatSessionMutationVariables = Exact<{
@@ -1496,26 +1488,6 @@ export const BrowserSession_SessionFragmentDoc = {
    },
  ],
 } as unknown as DocumentNode<BrowserSession_SessionFragment, unknown>;
-export const CompatSession_Sso_LoginFragmentDoc = {
-  kind: "Document",
-  definitions: [
-    {
-      kind: "FragmentDefinition",
-      name: { kind: "Name", value: "CompatSession_sso_login" },
-      typeCondition: {
-        kind: "NamedType",
-        name: { kind: "Name", value: "CompatSsoLogin" },
-      },
-      selectionSet: {
-        kind: "SelectionSet",
-        selections: [
-          { kind: "Field", name: { kind: "Name", value: "id" } },
-          { kind: "Field", name: { kind: "Name", value: "redirectUri" } },
-        ],
-      },
-    },
-  ],
-} as unknown as DocumentNode<CompatSession_Sso_LoginFragment, unknown>;
 export const CompatSession_SessionFragmentDoc = {
  kind: "Document",
  definitions: [
@@ -1540,31 +1512,13 @@ export const CompatSession_SessionFragmentDoc = {
              kind: "SelectionSet",
              selections: [
                { kind: "Field", name: { kind: "Name", value: "id" } },
-                {
-                  kind: "FragmentSpread",
-                  name: { kind: "Name", value: "CompatSession_sso_login" },
-                },
+                { kind: "Field", name: { kind: "Name", value: "redirectUri" } },
              ],
            },
          },
        ],
      },
    },
-    {
-      kind: "FragmentDefinition",
-      name: { kind: "Name", value: "CompatSession_sso_login" },
-      typeCondition: {
-        kind: "NamedType",
-        name: { kind: "Name", value: "CompatSsoLogin" },
-      },
-      selectionSet: {
-        kind: "SelectionSet",
-        selections: [
-          { kind: "Field", name: { kind: "Name", value: "id" } },
-          { kind: "Field", name: { kind: "Name", value: "redirectUri" } },
-        ],
-      },
-    },
  ],
 } as unknown as DocumentNode<CompatSession_SessionFragment, unknown>;
 export const OAuth2Session_SessionFragmentDoc = {
@@ -2526,21 +2480,6 @@ export const CompatSessionListDocument = {
        ],
      },
    },
-    {
-      kind: "FragmentDefinition",
-      name: { kind: "Name", value: "CompatSession_sso_login" },
-      typeCondition: {
-        kind: "NamedType",
-        name: { kind: "Name", value: "CompatSsoLogin" },
-      },
-      selectionSet: {
-        kind: "SelectionSet",
-        selections: [
-          { kind: "Field", name: { kind: "Name", value: "id" } },
-          { kind: "Field", name: { kind: "Name", value: "redirectUri" } },
-        ],
-      },
-    },
    {
      kind: "FragmentDefinition",
      name: { kind: "Name", value: "CompatSession_session" },
@@ -2562,10 +2501,7 @@ export const CompatSessionListDocument = {
              kind: "SelectionSet",
              selections: [
                { kind: "Field", name: { kind: "Name", value: "id" } },
-                {
-                  kind: "FragmentSpread",
-                  name: { kind: "Name", value: "CompatSession_sso_login" },
-                },
+                { kind: "Field", name: { kind: "Name", value: "redirectUri" } },
              ],
            },
          },
@@ -2988,21 +2924,6 @@ export const SessionQueryDocument = {
        ],
      },
    },
-    {
-      kind: "FragmentDefinition",
-      name: { kind: "Name", value: "CompatSession_sso_login" },
-      typeCondition: {
-        kind: "NamedType",
-        name: { kind: "Name", value: "CompatSsoLogin" },
-      },
-      selectionSet: {
-        kind: "SelectionSet",
-        selections: [
-          { kind: "Field", name: { kind: "Name", value: "id" } },
-          { kind: "Field", name: { kind: "Name", value: "redirectUri" } },
-        ],
-      },
-    },
    {
      kind: "FragmentDefinition",
      name: { kind: "Name", value: "CompatSession_session" },
@@ -3024,10 +2945,7 @@ export const SessionQueryDocument = {
              kind: "SelectionSet",
              selections: [
                { kind: "Field", name: { kind: "Name", value: "id" } },
-                {
-                  kind: "FragmentSpread",
-                  name: { kind: "Name", value: "CompatSession_sso_login" },
-                },
+                { kind: "Field", name: { kind: "Name", value: "redirectUri" } },
              ],
            },
          },