Merge branch 'main' into 'master'

# Conflicts:
#   README.md

.gitignore

@@ -17,4 +17,5 @@ graphql/lib
 # Yarn
 .pnp.*
 .yarn/*
-!.yarn/releases/*
\ No newline at end of file
+!.yarn/releases/*
+**/.yarn/*

.gitlab-ci.yml

@@ -49,7 +49,7 @@ create-image:
   stage: buildimage
   only:
     refs:
-      - master
+      - main
   before_script:
     - echo "Docker registry url is $CI_REGISTRY"
     - echo "Docker registry username is $CI_REGISTRY_USER"

CHANGELOG.md

-2023.11.21 - convert repository into Monorepo
-2024.01.10 - add Smart Connect feature 
-2024.02.06 - merge Dashboard INJECT into INJECT frontend
-2024.02.08 - add Dockerfile to React client of INJECT
-2024.02.15 - change package management from node_modules to pnp
-2024.02.21 - add client settings to Frontend
-2024.02.22 - improvement to Apollo connection
-2024.02.29 - add CI checks support for the project
-2024.03.09 - refactor DataContext in Dashboard
-2024.04.02 - add support for Channels
-2024.04.05 - refactor connection routine, introduce a state-based connection dialog
-2024.04.08 - add Nginx deployment script
-2024.04.09 - add Overlay injects
-2024.04.20 - add initial implementation of AAI to Frontend
-2024.04.21 - improvements to the login UI, onboarding UI, added support for disabling AAI
+2024-05-07 - change the tab icon to the INJECT logo
+2024-05-03 - improve Codegen pipeline and separate it from the codebase
+2024-04-21 - improvements to the login UI, onboarding UI, added support for disabling AAI
+2024-04-20 - add initial implementation of AAI to Frontend
+2024-04-09 - add Overlay injects
+2024-04-08 - add Nginx deployment script
+2024-04-05 - refactor connection routine, introduce a state-based connection dialog
+2024-04-02 - add support for Channels
+2024-03-09 - refactor DataContext in Dashboard
+2024-02-29 - add CI checks support for the project
+2024-02-22 - improvement to Apollo connection
+2024-02-21 - add client settings to Frontend
+2024-02-15 - change package management from node_modules to pnp
+2024-02-08 - add Dockerfile to React client of INJECT
+2024-02-06 - merge Dashboard INJECT into INJECT frontend
+2024-01-10 - add Smart Connect feature
+2023-11-21 - convert repository into Monorepo

README.md

@@ -64,6 +64,19 @@ Then build the `dist/` artifact from the frontend repository:
 yarn build
 ```
 
+## Generating Codegen headers
+
+To aid in development and work with GraphQL, the project uses a tool called Codegen, which pulls the API described by the GraphQL Schema and generates appropriate Typescript library files that can be used with the project.
+
+This tool needs to be executed every time when it's expected that there are changes in the GraphQL API with which the Frontend is compatible. Say updating the linked backend and having a new feature. To do it, it's needed to execute a script located at `docker/schema-gen/update.sh`. It's expected that the machine has Docker installed with support for Docker Compose (prior versions didn't bundle in Docker Compose to base Docker installation, latest versions of Docker have Docker Compose).
+
+## How to update Frontend to support newer version of Backend
+
+1. Update `backend` git submodule to desired commit
+2. Generate Codegen headers via `docker/schema-gen/update.sh`
+3. If headers change (signifying new behaviour), please revalidate if application works and fix it
+4. Done, don't forget to mark your MR with [x] that the MR is tested with new backend
+
 ## How to test the Monorepo
 
 Run `yarn test`, the tests should take no more than a minute now.

codegen/01-entrypoint.sh

+#!/bin/bash
+
+# WARNING: This script is meant for Docker Compose execution in docker/schema-gen, do not run it directly
+
+# if INJECT_CODEGENENV is not present, stop the script and warn the user
+if [ -z "$INJECT_CODEGENENV" ]; then
+  echo "Codegen: INJECT_CODEGENENV is not set, please run the script using docker-compose project located in `docker/schema-gen`"
+  exit 1
+fi
+
+# schemas folder must be present
+if [ ! -d "./schemas" ]; then
+  echo "Codegen: `schemas` folder not found"
+  exit 1
+fi
+
+# gql folder must be present
+if [ ! -d "../gql" ]; then
+  echo "Codegen: `gql` folder not found"
+  exit 1
+fi
+
+mkdir -p ./gql-cache
+# copy all files from gql folder to gql-cache folder, prevent gql being prefixed
+cp -r ../gql/* ./gql-cache
+
+# list out graphql schema files in schemas dir
+SCHEMA_FILES=$(find ./schemas -type f -name "*.graphql")
+# echo them out
+echo "Codegen: Found schema files: $SCHEMA_FILES"
+
+# generate typescript types from graphql schema
+yarn exec graphql-codegen --config codegen.ts
+
+FILES=$(find ./gql-cache -type f -name "*.ts")
+echo $FILES
+
+# move all .ts files from gql folder to generated folder recursively while keeping their paths and removing gql-cache/gql prefix
+for FILE in $FILES; do
+  DEST_FILE=$(echo $FILE | sed 's/gql-cache/generated/g')
+  mkdir -p $(dirname $DEST_FILE)
+  mv $FILE $DEST_FILE
+done
+
+rm -rf ./gql-cache
+
+echo "Codegen: Done"
+ 
+#The script is pretty straightforward. It checks if the  schemas  and  gql  folders are present. If they are, it runs the codegen script. After the codegen script is done, it moves all the generated files from the  gql  folder to the  generated  folder. 
+# The codegen script is a simple script that uses the  graphql-codegen  package to generate typescript types from the graphql schema. 
+# Path: codegen/codegen.ts
\ No newline at end of file

codegen/Dockerfile

+FROM node:20 as INSTALL
+
+# Create app directory
+
+WORKDIR /usr/src/app
+
+# Install app dependencies
+
+COPY package.json yarn.lock ./
+
+RUN yarn install --immutable --inline-builds
+
+COPY codegen.ts 01-entrypoint.sh ./
+
+ENTRYPOINT [ "/bin/bash", "01-entrypoint.sh" ]
\ No newline at end of file

graphql/codegen.ts → codegen/codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli'
-import { httpGraphql } from '@inject/shared/config'
 
 const config: CodegenConfig = {
-  schema: [httpGraphql(import.meta.env.VITE_HTTP_HOST), 'localSchema.graphql'],
+  schema: ['schemas/schema.json', 'schemas/*.graphql'],
   documents: [
-    'fragments/**/*.graphql',
-    'queries/**/*.graphql',
-    'subscriptions/**/*.graphql',
-    'mutations/**/*.graphql',
+    'gql-cache/**/*.graphql',
   ],
   verbose: true,
   ignoreNoDocuments: true, // for better experience with the watcher
@@ -24,13 +20,13 @@ const config: CodegenConfig = {
     useTypeImports: true,
   },
   generates: {
-    './graphql.schema.json': {
+    './generated/graphql.schema.json': {
       plugins: ['introspection'],
       config: {
         minify: false,
       },
     },
-    './types.ts': {
+    './gql-cache/types.ts': {
       config: {
         useIndexSignature: true,
         showUnusedMappers: false,
@@ -53,7 +49,7 @@ const config: CodegenConfig = {
         'typescript-resolvers',
       ],
     },
-    './schema.ts': {
+    './gql-cache/schema.ts': {
       plugins: [
         'typescript-operations',
         'typescript-react-apollo',
@@ -72,7 +68,6 @@ const config: CodegenConfig = {
       presetConfig: {
         baseTypesPath: '../types.ts',
         importTypesNamespace: '_Types',
-        // cwd: "./src/graphql/"
       },
       config: {
         documentMode: 'documentNode',
@@ -88,7 +83,7 @@ const config: CodegenConfig = {
         omitOperationSuffix: true,
       },
     },
-    'client/apollo-helpers.ts': {
+    './generated/client/apollo-helpers.ts': {
       plugins: [
         {
           add: {

graphql/fragments/Channel.graphql → codegen/gql/fragments/Channel.graphql

@@ -2,5 +2,8 @@ fragment Channel on DefinitionChannelType {
   id
   name
   type
-  readReceipt @client
+  readReceipt @client {
+    readReceipt
+    teamId
+  }
 }