Stories for components with Relay fragments

frontend/package-lock.json

@@ -31,6 +31,7 @@
         "@types/react-relay": "^14.1.2",
         "@types/react-test-renderer": "^18.0.0",
         "@types/relay-runtime": "^14.1.4",
+        "@types/relay-test-utils": "^14.1.0",
         "@vitejs/plugin-react": "^2.2.0",
         "autoprefixer": "^10.4.13",
         "babel-plugin-relay": "^14.1.0",
@@ -44,6 +45,7 @@
         "prettier": "^2.7.1",
         "react-test-renderer": "^18.2.0",
         "relay-compiler": "^14.1.0",
+        "relay-test-utils": "^14.1.0",
         "storybook": "^7.0.0-alpha.49",
         "tailwindcss": "^3.2.2",
         "typescript": "^4.6.4",
@@ -7514,6 +7516,17 @@
       "integrity": "sha512-463BgnIkwthKkRsBNNwU9xJ2z5qJkX9l6qCtiMO01KOm+f4V8n8Z4kLHzn7d2qXYBdRgReisi6DlG7wrwACEFQ==",
       "dev": true
     },
+    "node_modules/@types/relay-test-utils": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@types/relay-test-utils/-/relay-test-utils-14.1.0.tgz",
+      "integrity": "sha512-qwt9JDaNFa3VNTYC5FKvDE38a3Blz8Pav95xvqhY2g2ECoz47G6oocVR6qySTNQ/1kp2rFvhGG4TtyThlQBh5A==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*",
+        "@types/react-relay": "*",
+        "@types/relay-runtime": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -20140,6 +20153,18 @@
         "invariant": "^2.2.4"
       }
     },
+    "node_modules/relay-test-utils": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/relay-test-utils/-/relay-test-utils-14.1.0.tgz",
+      "integrity": "sha512-4Ftqc+LnHyhqU2LNOtD/UEqqutFF9qJn+xqn+xfxgUGjU4X42vVhAN8KdG3q4KqE142EX0S8oPX5kA0FyFFiWg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "fbjs": "^3.0.2",
+        "invariant": "^2.2.4",
+        "relay-runtime": "14.1.0"
+      }
+    },
     "node_modules/remark-external-links": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/remark-external-links/-/remark-external-links-8.0.0.tgz",
@@ -28884,6 +28909,17 @@
       "integrity": "sha512-463BgnIkwthKkRsBNNwU9xJ2z5qJkX9l6qCtiMO01KOm+f4V8n8Z4kLHzn7d2qXYBdRgReisi6DlG7wrwACEFQ==",
       "dev": true
     },
+    "@types/relay-test-utils": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@types/relay-test-utils/-/relay-test-utils-14.1.0.tgz",
+      "integrity": "sha512-qwt9JDaNFa3VNTYC5FKvDE38a3Blz8Pav95xvqhY2g2ECoz47G6oocVR6qySTNQ/1kp2rFvhGG4TtyThlQBh5A==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "@types/react-relay": "*",
+        "@types/relay-runtime": "*"
+      }
+    },
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -38084,6 +38120,18 @@
         "invariant": "^2.2.4"
       }
     },
+    "relay-test-utils": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/relay-test-utils/-/relay-test-utils-14.1.0.tgz",
+      "integrity": "sha512-4Ftqc+LnHyhqU2LNOtD/UEqqutFF9qJn+xqn+xfxgUGjU4X42vVhAN8KdG3q4KqE142EX0S8oPX5kA0FyFFiWg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "fbjs": "^3.0.2",
+        "invariant": "^2.2.4",
+        "relay-runtime": "14.1.0"
+      }
+    },
     "remark-external-links": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/remark-external-links/-/remark-external-links-8.0.0.tgz",

frontend/package.json

@@ -38,6 +38,7 @@
     "@types/react-relay": "^14.1.2",
     "@types/react-test-renderer": "^18.0.0",
     "@types/relay-runtime": "^14.1.4",
+    "@types/relay-test-utils": "^14.1.0",
     "@vitejs/plugin-react": "^2.2.0",
     "autoprefixer": "^10.4.13",
     "babel-plugin-relay": "^14.1.0",
@@ -51,6 +52,7 @@
     "prettier": "^2.7.1",
     "react-test-renderer": "^18.2.0",
     "relay-compiler": "^14.1.0",
+    "relay-test-utils": "^14.1.0",
     "storybook": "^7.0.0-alpha.49",
     "tailwindcss": "^3.2.2",
     "typescript": "^4.6.4",

frontend/src/components/BrowserSession.tsx

@@ -36,7 +36,7 @@ const BrowserSession: React.FC<Props> = ({ session, isCurrent }) => {
   );
 
   return (
-    <div className="p-2 my-1 bg-grey-50 dark:bg-grey-450 rounded">
+    <div className="p-2 my-1 bg-grey-50 dark:bg-grey-450 dark:text-white rounded">
       {isCurrent && <div className="font-bold">Current session</div>}
       <div>
         Started: <span className="font-mono text-sm">{data.createdAt}</span>

frontend/src/components/CompatSsoLogin.tsx

@@ -62,7 +62,7 @@ const CompatSsoLogin: React.FC<Props> = ({ login }) => {
   }
 
   return (
-    <div className="p-2 my-1 bg-grey-50 dark:bg-grey-450 rounded">
+    <div className="p-2 my-1 bg-grey-50 dark:bg-grey-450 dark:text-white rounded">
       <div>
         Requested: <span className="font-mono text-sm">{data.createdAt}</span>
       </div>

frontend/src/components/LoadingScreen.tsx

@@ -15,7 +15,7 @@
 import LoadingSpinner from "./LoadingSpinner";
 
 const LoadingScreen: React.FC = () => (
-  <main className="bg-white dark:bg-black-800 min-h-screen flex justify-center items-center">
+  <main className="min-h-screen flex justify-center items-center">
     <LoadingSpinner />
   </main>
 );

frontend/src/components/OAuth2Session.stories.tsx

@@ -0,0 +1,95 @@
+// Copyright 2022 The Matrix.org Foundation C.I.C.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  graphql,
+  RelayEnvironmentProvider,
+  useLazyLoadQuery,
+} from "react-relay";
+import { createMockEnvironment, MockPayloadGenerator } from "relay-test-utils";
+
+import OAuth2Session from "./OAuth2Session";
+import { OAuth2SessionStoriesQuery } from "./__generated__/OAuth2SessionStoriesQuery.graphql";
+
+type TemplateProps = {
+  scope: string;
+  clientId: string;
+  clientName: string;
+  clientUri: string;
+};
+
+const Template: React.FC<TemplateProps> = ({
+  scope,
+  clientId,
+  clientName,
+  clientUri,
+}) => {
+  const environment = createMockEnvironment();
+  environment.mock.queueOperationResolver((operation) =>
+    MockPayloadGenerator.generate(operation, {
+      Oauth2Session() {
+        return {
+          scope,
+        };
+      },
+
+      Oauth2Client() {
+        return {
+          clientId,
+          clientName,
+          clientUri,
+        };
+      },
+    })
+  );
+
+  const Render = () => {
+    const data = useLazyLoadQuery<OAuth2SessionStoriesQuery>(
+      graphql`
+        query OAuth2SessionStoriesQuery @relay_test_operation {
+          session: node(id: "test-id") {
+            ...OAuth2Session_session
+          }
+        }
+      `,
+      {}
+    );
+
+    return <OAuth2Session session={data.session!!} />;
+  };
+
+  return (
+    <RelayEnvironmentProvider environment={environment}>
+      <Render />
+    </RelayEnvironmentProvider>
+  );
+};
+
+const meta: Meta<typeof Template> = {
+  title: "Components/OAuth 2.0 Session",
+  component: Template,
+  tags: ["docsPage"],
+  args: {
+    scope: "openid",
+    clientId: "aaabbbcccdddeee",
+    clientName: "My client",
+    clientUri: "https://example.com/",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Template>;
+
+export const Basic: Story = {};

frontend/src/components/OAuth2Session.tsx

@@ -37,7 +37,7 @@ const OAuth2Session: React.FC<Props> = ({ session }) => {
   );
 
   return (
-    <div className="p-2 my-1 bg-grey-50 dark:bg-grey-450 rounded">
+    <div className="p-2 my-1 bg-grey-50 dark:bg-grey-450 dark:text-white rounded">
       <div>
         Client ID:{" "}
         <span className="font-mono text-sm">{data.client.clientId}</span>

frontend/src/components/__generated__/OAuth2SessionStoriesQuery.graphql.ts

@@ -0,0 +1,197 @@
+/**
+ * @generated SignedSource<<82179715f61e6a03437d696941ceaf16>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest, Query } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type OAuth2SessionStoriesQuery$variables = {};
+export type OAuth2SessionStoriesQuery$data = {
+  readonly session: {
+    readonly " $fragmentSpreads": FragmentRefs<"OAuth2Session_session">;
+  } | null;
+};
+export type OAuth2SessionStoriesQuery = {
+  response: OAuth2SessionStoriesQuery$data;
+  variables: OAuth2SessionStoriesQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "kind": "Literal",
+    "name": "id",
+    "value": "test-id"
+  }
+],
+v1 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+},
+v2 = {
+  "enumValues": null,
+  "nullable": false,
+  "plural": false,
+  "type": "String"
+},
+v3 = {
+  "enumValues": null,
+  "nullable": false,
+  "plural": false,
+  "type": "ID"
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "OAuth2SessionStoriesQuery",
+    "selections": [
+      {
+        "alias": "session",
+        "args": (v0/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "args": null,
+            "kind": "FragmentSpread",
+            "name": "OAuth2Session_session"
+          }
+        ],
+        "storageKey": "node(id:\"test-id\")"
+      }
+    ],
+    "type": "RootQuery",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "OAuth2SessionStoriesQuery",
+    "selections": [
+      {
+        "alias": "session",
+        "args": (v0/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "__typename",
+            "storageKey": null
+          },
+          (v1/*: any*/),
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "scope",
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "Oauth2Client",
+                "kind": "LinkedField",
+                "name": "client",
+                "plural": false,
+                "selections": [
+                  (v1/*: any*/),
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "clientId",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "clientName",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "clientUri",
+                    "storageKey": null
+                  }
+                ],
+                "storageKey": null
+              }
+            ],
+            "type": "Oauth2Session",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": "node(id:\"test-id\")"
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "2b2911cfb421c557245313732f0813e0",
+    "id": null,
+    "metadata": {
+      "relayTestingSelectionTypeInfo": {
+        "session": {
+          "enumValues": null,
+          "nullable": true,
+          "plural": false,
+          "type": "Node"
+        },
+        "session.__typename": (v2/*: any*/),
+        "session.client": {
+          "enumValues": null,
+          "nullable": false,
+          "plural": false,
+          "type": "Oauth2Client"
+        },
+        "session.client.clientId": (v2/*: any*/),
+        "session.client.clientName": {
+          "enumValues": null,
+          "nullable": true,
+          "plural": false,
+          "type": "String"
+        },
+        "session.client.clientUri": {
+          "enumValues": null,
+          "nullable": true,
+          "plural": false,
+          "type": "Url"
+        },
+        "session.client.id": (v3/*: any*/),
+        "session.id": (v3/*: any*/),
+        "session.scope": (v2/*: any*/)
+      }
+    },
+    "name": "OAuth2SessionStoriesQuery",
+    "operationKind": "query",
+    "text": "query OAuth2SessionStoriesQuery {\n  session: node(id: \"test-id\") {\n    __typename\n    ...OAuth2Session_session\n    id\n  }\n}\n\nfragment OAuth2Session_session on Oauth2Session {\n  id\n  scope\n  client {\n    id\n    clientId\n    clientName\n    clientUri\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "d60f8f0abfc0b70236d89328bc5c0e85";
+
+export default node;

frontend/src/components/__snapshots__/LoadingScreen.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`render <LoadingScreen /> 1`] = `
 <main
-  className="bg-white dark:bg-black-800 min-h-screen flex justify-center items-center"
+  className="min-h-screen flex justify-center items-center"
 >
   <div
     role="status"

frontend/src/index.css

@@ -16,3 +16,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body, .docs-story {
+  @apply bg-grey-25 text-black-900 dark:bg-black-800 dark:text-white;
+}