You've already forked authentication-service
mirror of
https://github.com/matrix-org/matrix-authentication-service.git
synced 2025-11-21 23:00:50 +03:00
Stories for components with Relay fragments
This commit is contained in:
Quentin Gliech
48
frontend/package-lock.json
generated
48
frontend/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
95
frontend/src/components/OAuth2Session.stories.tsx
Normal file
95
frontend/src/components/OAuth2Session.stories.tsx
Normal file
@@ -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 = {};
|
||||
@@ -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>
|
||||
|
||||
197
frontend/src/components/__generated__/OAuth2SessionStoriesQuery.graphql.ts
generated
Normal file
197
frontend/src/components/__generated__/OAuth2SessionStoriesQuery.graphql.ts
generated
Normal file
@@ -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;
|
||||
@@ -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"
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user