feat: add codegen and tenant query

.gitattributes

@@ -0,0 +1 @@
+frontend/src/generated-types.tsx linguist-generated=true

deploy/crownlabs/values.yaml

@@ -28,7 +28,7 @@ frontend-app:
     path: /
   configuration:
     backend:
-      apiServer: https://apiserver.example.com
+      graphql: https://graphql.example.com
     oidc:
       clientId: <client-id>
       clientSecret: <client-secret>

frontend/codegen.yml

@@ -0,0 +1,12 @@
+overwrite: true
+schema: "https://graphql.preprod.crownlabs.polito.it/"
+documents: './src/**/*.graphql'
+generates:
+  src/generated-types.tsx:
+    config:
+      withComponent: true
+      preResolveTypes: true
+    plugins:
+      - "typescript"
+      - "typescript-operations"
+      - "typescript-react-apollo"

frontend/deploy/frontend-app/templates/configmap.yaml

@@ -6,7 +6,7 @@ metadata:
     {{- include "frontend-app.labels" . | nindent 4 }}
 data:
   {{ .Values.configuration.fileName }}: |
-    window.REACT_APP_CROWNLABS_APISERVER_URL="{{ .Values.configuration.backend.apiServer }}";
+    window.REACT_APP_CROWNLABS_GRAPHQL_URL="{{ .Values.configuration.backend.graphql }}";
     window.REACT_APP_CROWNLABS_OIDC_PROVIDER_URL="{{ .Values.configuration.oidc.providerUrl }}";
     window.REACT_APP_CROWNLABS_OIDC_CLIENT_ID="{{ .Values.configuration.oidc.clientId }}";
     window.REACT_APP_CROWNLABS_OIDC_CLIENT_SECRET="{{ .Values.configuration.oidc.clientSecret }}";

frontend/deploy/frontend-app/values.yaml

@@ -14,7 +14,7 @@ configuration:
   mountPath: /usr/share/nginx/html
   fileName: config.js
   backend:
-    apiServer: https://apiserver.example.com
+    graphql: https://graphql.example.com
   oidc:
     clientId: <client-id>
     clientSecret: <client-secret>

frontend/package.json

@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
+    "@apollo/client": "^3.3.20",
+    "@apollo/react-hooks": "^4.0.0",
     "@craco/craco": "^6.1.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -16,6 +18,7 @@
     "antd": "^4.15.2",
     "antd-button-color": "^1.0.4",
     "craco-less": "^1.17.1",
+    "graphql": "^15.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
@@ -31,7 +34,8 @@
     "build-storybook": "build-storybook -s public -o build",
     "prepare": "cd .. && husky install frontend/.husky",
     "check-format-lint": "prettier --check **/*.{ts,tsx,js,jsx,json,css} && eslint . --ext .ts --ext .tsx --ext .js --ext .jsx --max-warnings=0",
-    "pre-commit": "lint-staged"
+    "pre-commit": "lint-staged",
+    "generate": "graphql-codegen --config codegen.yml"
   },
   "eslintConfig": {
     "extends": [
@@ -85,6 +89,7 @@
     ]
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "1.21.6",
     "@storybook/addon-actions": "^6.2.8",
     "@storybook/addon-essentials": "^6.2.8",
     "@storybook/addon-links": "^6.2.8",
@@ -100,7 +105,11 @@
     "prettier": "^2.2.1",
     "storybook-addon-themes": "^6.1.0",
     "storybook-preset-craco": "^0.0.4",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+    "@graphql-codegen/typescript": "1.22.4",
+    "@graphql-codegen/typescript-react-apollo": "2.2.8",
+    "@graphql-codegen/typescript-operations": "1.18.3",
+    "@graphql-codegen/introspection": "1.18.2"
   },
   "resolutions": {
     "babel-loader": "8.1.0"

frontend/public/config.js

@@ -4,7 +4,7 @@
 // template to define env variables on container start
 // for local development the app falls back to local environment variables
 
-window.REACT_APP_CROWNLABS_APISERVER_URL = undefined;
+window.REACT_APP_CROWNLABS_GRAPHQL_URL = undefined;
 window.REACT_APP_CROWNLABS_OIDC_PROVIDER_URL = undefined;
 window.REACT_APP_CROWNLABS_OIDC_CLIENT_ID = undefined;
 window.REACT_APP_CROWNLABS_OIDC_CLIENT_SECRET = undefined;

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import './App.css';
-import { PUBLIC_URL, REACT_APP_CROWNLABS_APISERVER_URL } from './env';
+import { PUBLIC_URL, REACT_APP_CROWNLABS_GRAPHQL_URL } from './env';
 import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';
 
 function App() {
@@ -32,7 +32,7 @@ function App() {
           <Route path="/" exact>
             <div className="p-10 m-10">
               CrownLabs will get a new look!
-              <br /> Apiserver at {REACT_APP_CROWNLABS_APISERVER_URL}{' '}
+              <br /> GraphQL at {REACT_APP_CROWNLABS_GRAPHQL_URL}{' '}
             </div>
 
             <Link to="/active">Go to active</Link>

frontend/src/env.ts

@@ -1,5 +1,5 @@
 type envVarNames =
-  | 'REACT_APP_CROWNLABS_APISERVER_URL'
+  | 'REACT_APP_CROWNLABS_GRAPHQL_URL'
   | 'REACT_APP_CROWNLABS_OIDC_PROVIDER_URL'
   | 'REACT_APP_CROWNLABS_OIDC_CLIENT_ID'
   | 'REACT_APP_CROWNLABS_OIDC_CLIENT_SECRET'
@@ -16,9 +16,6 @@ const getEnvVar = (envVarName: envVarNames) => {
   return envVar;
 };
 
-export const REACT_APP_CROWNLABS_APISERVER_URL = getEnvVar(
-  'REACT_APP_CROWNLABS_APISERVER_URL'
-);
 export const REACT_APP_CROWNLABS_OIDC_PROVIDER_URL = getEnvVar(
   'REACT_APP_CROWNLABS_OIDC_PROVIDER_URL'
 );
@@ -31,4 +28,7 @@ export const REACT_APP_CROWNLABS_OIDC_CLIENT_SECRET = getEnvVar(
 export const REACT_APP_CROWNLABS_OIDC_REDIRECT_URI = getEnvVar(
   'REACT_APP_CROWNLABS_OIDC_REDIRECT_URI'
 );
+export const REACT_APP_CROWNLABS_GRAPHQL_URL = getEnvVar(
+  'REACT_APP_CROWNLABS_GRAPHQL_URL'
+);
 export const PUBLIC_URL = getEnvVar('PUBLIC_URL');