-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Created minimal dashboard app with relay provider and keycloak
- Loading branch information
Showing
18 changed files
with
988 additions
and
549 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,3 +13,5 @@ dist-ssr | |
| *.local | ||
|
|
||
| *storybook.log | ||
|
|
||
| *.tsbuildinfo | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> --> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Workflows Dashboard</title> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/main.tsx"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| { | ||
| "name": "dashboard", | ||
| "private": true, | ||
| "version": "0.0.0", | ||
| "type": "module", | ||
| "scripts": { | ||
| "dev": "vite", | ||
| "build": "relay-compiler --validate && tsc -b && vite build", | ||
| "lint": "eslint .", | ||
| "preview": "vite preview", | ||
| "relay": "relay-compiler" | ||
| }, | ||
| "dependencies": { | ||
| "@jsonforms/material-renderers": "^3.4.1", | ||
| "@jsonforms/react": "^3.4.1", | ||
| "keycloak-js": "^26.0.5", | ||
| "react": "^18.3.1", | ||
| "react-dom": "^18.3.1", | ||
| "react-relay": "18.1.0", | ||
| "relay-runtime": "18.1.0", | ||
| "workflows-lib": "*", | ||
| "relay-workflows-lib": "*" | ||
|
|
||
| }, | ||
| "devDependencies": { | ||
| "@eslint/js": "^9.13.0", | ||
| "@jsonforms/core": "^3.4.1", | ||
| "@types/react": "^18.3.12", | ||
| "@types/react-dom": "^18.3.1", | ||
| "@types/react-relay": "16.0.6", | ||
| "@types/relay-runtime": "18.1.1", | ||
| "babel-plugin-relay": "18.1.0", | ||
| "eslint": "^9.13.0", | ||
| "eslint-plugin-react-hooks": "^5.0.0", | ||
| "eslint-plugin-react-refresh": "^0.4.14", | ||
| "globals": "^15.11.0", | ||
| "relay-compiler": "18.1.0", | ||
| "typescript": "~5.6.2", | ||
| "typescript-eslint": "^8.11.0", | ||
| "vite": "^5.4.10", | ||
| "vite-plugin-relay": "2.1.0" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| { | ||
| "src": "./src", | ||
| "language": "typescript", | ||
| "schema": "./src/workflows.graphql", | ||
| "exclude": [ | ||
| "**/node_modules/**", | ||
| "**/__mocks__/**", | ||
| "**/__generated__/**" | ||
| ], | ||
| "eagerEsModules": true | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| #root { | ||
| max-width: 1280px; | ||
| margin: 0 auto; | ||
| padding: 2rem; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .logo { | ||
| height: 6em; | ||
| padding: 1.5em; | ||
| will-change: filter; | ||
| transition: filter 300ms; | ||
| } | ||
| .logo:hover { | ||
| filter: drop-shadow(0 0 2em #646cffaa); | ||
| } | ||
| .logo.react:hover { | ||
| filter: drop-shadow(0 0 2em #61dafbaa); | ||
| } | ||
|
|
||
| @keyframes logo-spin { | ||
| from { | ||
| transform: rotate(0deg); | ||
| } | ||
| to { | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion: no-preference) { | ||
| a:nth-of-type(2) .logo { | ||
| animation: logo-spin infinite 20s linear; | ||
| } | ||
| } | ||
|
|
||
| .card { | ||
| padding: 2em; | ||
| } | ||
|
|
||
| .read-the-docs { | ||
| color: #888; | ||
| } | ||
|
|
||
| .mainCanvas{display: flex; flex-direction: row;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import './App.css' | ||
|
|
||
| function App() { | ||
|
|
||
| return ( | ||
| <> | ||
| <h1>Hello Workflow Dashboard!</h1> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default App |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import { | ||
| Environment, | ||
| Network, | ||
| RecordSource, | ||
| Store, | ||
| FetchFunction, | ||
| } from "relay-runtime"; | ||
| import keycloak from "./keycloak"; | ||
|
|
||
| const HTTP_ENDPOINT = "https://workflows.diamond.ac.uk/graphql"; | ||
|
|
||
| const kcinit = keycloak.init({ | ||
| onLoad: "login-required" | ||
| }) | ||
| .then( | ||
| auth => { | ||
| if (!auth) { | ||
| // window.location.reload(); | ||
| } else { | ||
| console.info("Authenticated"); | ||
| console.log("auth", auth); | ||
| keycloak.onTokenExpired = () => { | ||
| console.log("token expired"); | ||
| }; | ||
| } | ||
| }, | ||
| () => { | ||
| console.error("Authentication failed"); | ||
| } | ||
| ); | ||
|
|
||
|
|
||
| const fetchFn: FetchFunction = async (request, variables) => { | ||
| if (!keycloak.authenticated) { | ||
| await kcinit; | ||
| } | ||
|
|
||
| if (keycloak.token) { | ||
| const resp = await fetch(HTTP_ENDPOINT, { | ||
| method: "POST", | ||
| headers: { | ||
| Authorization: `Bearer ${keycloak.token}`, | ||
| Accept: | ||
| "application/graphql-response+json; charset=utf-8, application/json; charset=utf-8", | ||
| "Content-Type": "application/json", | ||
| }, | ||
| body: JSON.stringify({ | ||
| query: request.text, // <-- The GraphQL document composed by Relay | ||
| variables, | ||
| }), | ||
| }); | ||
|
|
||
| // This is following the official relay docs: | ||
| // https://relay.dev/docs/getting-started/step-by-step-guide/#22-a-fetchgraphql-helper | ||
| // Couldn't find a way that avoids returning type Promise<any> | ||
| return await resp.json(); // eslint-disable-line @typescript-eslint/no-unsafe-return | ||
| } else { | ||
| console.log("Not authenticated yet"); | ||
| return {}; | ||
| } | ||
| }; | ||
|
|
||
|
|
||
| function createRelayEnvironment() { | ||
| return new Environment({ | ||
| network: Network.create(fetchFn), | ||
| store: new Store(new RecordSource()), | ||
| }); | ||
| } | ||
|
|
||
| export const RelayEnvironment = createRelayEnvironment(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| :root { | ||
| font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; | ||
| line-height: 1.5; | ||
| font-weight: 400; | ||
|
|
||
| color-scheme: light dark; | ||
| color: rgba(255, 255, 255, 0.87); | ||
| background-color: #242424; | ||
|
|
||
| font-synthesis: none; | ||
| text-rendering: optimizeLegibility; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| } | ||
|
|
||
| a { | ||
| font-weight: 500; | ||
| color: #646cff; | ||
| text-decoration: inherit; | ||
| } | ||
| a:hover { | ||
| color: #535bf2; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| display: flex; | ||
| place-items: center; | ||
| min-width: 320px; | ||
| min-height: 100vh; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 3.2em; | ||
| line-height: 1.1; | ||
| } | ||
|
|
||
| button { | ||
| border-radius: 8px; | ||
| border: 1px solid transparent; | ||
| padding: 0.6em 1.2em; | ||
| font-size: 1em; | ||
| font-weight: 500; | ||
| font-family: inherit; | ||
| background-color: #1a1a1a; | ||
| cursor: pointer; | ||
| transition: border-color 0.25s; | ||
| } | ||
| button:hover { | ||
| border-color: #646cff; | ||
| } | ||
| button:focus, | ||
| button:focus-visible { | ||
| outline: 4px auto -webkit-focus-ring-color; | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: light) { | ||
| :root { | ||
| color: #213547; | ||
| background-color: #ffffff; | ||
| } | ||
| a:hover { | ||
| color: #747bff; | ||
| } | ||
| button { | ||
| background-color: #f9f9f9; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import Keycloak from "keycloak-js"; | ||
|
|
||
| //Keycloak init options | ||
| const initOptions = { | ||
| url: "https://authn.diamond.ac.uk/", | ||
| realm: "master", | ||
| clientId: "iat69393", | ||
| }; | ||
|
|
||
| const keycloak = new Keycloak(initOptions); | ||
|
|
||
| export default keycloak; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { RelayEnvironmentProvider } from "react-relay"; | ||
| import { RelayEnvironment } from "./RelayEnvironment"; | ||
| import { StrictMode } from "react"; | ||
| import { createRoot } from "react-dom/client"; | ||
| import "./index.css"; | ||
| import App from "./App.tsx"; | ||
|
|
||
| createRoot(document.getElementById("root") as Element).render( | ||
| <RelayEnvironmentProvider environment={RelayEnvironment}> | ||
| <StrictMode> | ||
| <App/> | ||
| </StrictMode> | ||
| </RelayEnvironmentProvider> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| /// <reference types="vite/client" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "target": "ES2020", | ||
| "useDefineForClassFields": true, | ||
| "lib": ["ES2020", "DOM", "DOM.Iterable"], | ||
| "module": "ESNext", | ||
| "skipLibCheck": true, | ||
|
|
||
| /* Bundler mode */ | ||
| "moduleResolution": "Bundler", | ||
| "allowImportingTsExtensions": true, | ||
| "isolatedModules": true, | ||
| "moduleDetection": "force", | ||
| "noEmit": true, | ||
| "jsx": "react-jsx", | ||
|
|
||
| /* Linting */ | ||
| "strict": true, | ||
| "noUnusedLocals": true, | ||
| "noUnusedParameters": true, | ||
| "noFallthroughCasesInSwitch": true, | ||
| "noUncheckedSideEffectImports": true | ||
| }, | ||
| "include": ["src"] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "files": [], | ||
| "references": [ | ||
| { "path": "./tsconfig.app.json" }, | ||
| { "path": "./tsconfig.node.json" } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "target": "ES2022", | ||
| "lib": ["ES2023"], | ||
| "module": "ESNext", | ||
| "skipLibCheck": true, | ||
|
|
||
| /* Bundler mode */ | ||
| "moduleResolution": "Bundler", | ||
| "allowImportingTsExtensions": true, | ||
| "isolatedModules": true, | ||
| "moduleDetection": "force", | ||
| "noEmit": true, | ||
|
|
||
| /* Linting */ | ||
| "strict": true, | ||
| "noUnusedLocals": true, | ||
| "noUnusedParameters": true, | ||
| "noFallthroughCasesInSwitch": true, | ||
| "noUncheckedSideEffectImports": true | ||
| }, | ||
| "include": ["vite.config.ts"] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import relay from "vite-plugin-relay"; | ||
| import { defineConfig } from "vite"; | ||
| import react from "@vitejs/plugin-react"; | ||
|
|
||
| // https://vite.dev/config/ | ||
| export default defineConfig({ | ||
| plugins: [relay, react()], | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.