Feat/startup config api (#518)

* feat: add api for config

* feat: add data service to client

* feat: update client pages with values from config endpoint

* test: update tests

* Update configurations and documentation to remove VITE_SHOW_GOOGLE_LOGIN_OPTION and change VITE_APP_TITLE to APP_TITLE

* include APP_TITLE with startup config

* Add test for new route

* update backend-review pipeline

* comment out test until we can figure out testing routes in CI

* update: .env.example

---------

Co-authored-by: fuegovic <32828263+fuegovic@users.noreply.github.com>

client/src/components/Auth/Login.tsx

@@ -2,10 +2,11 @@ import { useEffect } from 'react';
 import LoginForm from './LoginForm';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { useNavigate } from 'react-router-dom';
-import { SHOW_GOOGLE_LOGIN_OPTION, ALLOW_REGISTRATION, DOMAIN_SERVER } from "~/utils/envConstants";
+import { useGetStartupConfig } from '~/data-provider';
 
 function Login() {
   const { login, error, isAuthenticated } = useAuthContext();
+  const { data: startupConfig } = useGetStartupConfig();
 
   const navigate = useNavigate();
 
@@ -29,7 +30,7 @@ function Login() {
           </div>
         )}
         <LoginForm onSubmit={login} />
-        {ALLOW_REGISTRATION && (
+        {startupConfig?.registrationEnabled && (
           <p className="my-4 text-center text-sm font-light text-gray-700">
             {' '}
             Don&apos;t have an account?{' '}
@@ -38,7 +39,7 @@ function Login() {
             </a>
           </p>
         )}
-        {SHOW_GOOGLE_LOGIN_OPTION && (
+        {startupConfig?.googleLoginEnabled && (
           <>
             <div className="relative mt-6 flex w-full items-center justify-center border border-t uppercase">
               <div className="absolute bg-white px-3 text-xs">Or</div>
@@ -47,7 +48,7 @@ function Login() {
               <a
                 aria-label="Login with Google"
                 className="justify-left flex w-full items-center space-x-3 rounded-md border border-gray-300 px-5 py-3 hover:bg-gray-50 focus:ring-2 focus:ring-violet-600 focus:ring-offset-1"
-                href={`${DOMAIN_SERVER}/oauth/google`}
+                href={`${startupConfig.serverDomain}/oauth/google`}
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"

client/src/components/Auth/Registration.tsx

@@ -1,11 +1,11 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
-import { useRegisterUserMutation, TRegisterUser } from '~/data-provider';
-import { SHOW_GOOGLE_LOGIN_OPTION, DOMAIN_SERVER } from '~/utils/envConstants';
+import { useRegisterUserMutation, TRegisterUser, useGetStartupConfig } from '~/data-provider';
 
 function Registration() {
   const navigate = useNavigate();
+  const { data: startupConfig } = useGetStartupConfig();
 
   const {
     register,
@@ -34,6 +34,12 @@ function Registration() {
     });
   };
 
+  useEffect(() => {
+    if (startupConfig?.registrationEnabled === false) {
+      navigate('/login');
+    }
+  }, [startupConfig, navigate]);
+
   return (
     <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
       <div className="mt-6 w-96 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
@@ -266,7 +272,7 @@ function Registration() {
             Login
           </a>
         </p>
-        {SHOW_GOOGLE_LOGIN_OPTION && (
+        {startupConfig?.googleLoginEnabled && (
           <>
             <div className="relative mt-6 flex w-full items-center justify-center border border-t uppercase">
               <div className="absolute bg-white px-3 text-xs">Or</div>
@@ -275,7 +281,7 @@ function Registration() {
             <div className="mt-4 flex gap-x-2">
               <a
                 aria-label="Login with Google"
-                href={`${DOMAIN_SERVER}/oauth/google`}
+                href={`${startupConfig.serverDomain}/oauth/google`}
                 className="justify-left flex w-full items-center space-x-3 rounded-md border border-gray-300 px-5 py-3 hover:bg-gray-50 focus:ring-2 focus:ring-violet-600 focus:ring-offset-1"
               >
                 <svg

client/src/components/Auth/__tests__/Login.spec.tsx

@@ -3,12 +3,6 @@ import userEvent from '@testing-library/user-event';
 import Login from '../Login';
 import * as mockDataProvider from '~/data-provider';
 
-jest.mock('~/utils/envConstants', () => ({
-  DOMAIN_SERVER: 'mock-server',
-  SHOW_GOOGLE_LOGIN_OPTION: true,
-  ALLOW_REGISTRATION: true
-}));
-
 jest.mock('~/data-provider');
 
 const setup = ({
@@ -23,6 +17,15 @@ const setup = ({
     mutate: jest.fn(),
     data: {},
     isSuccess: false
+  },
+  useGetStartupCongfigReturnValue = {
+    isLoading: false,
+    isError: false,
+    data: {
+      googleLoginEnabled: true,
+      registrationEnabled: true,
+      serverDomain: 'mock-server'
+    }
   }
 } = {}) => {
   const mockUseLoginUser = jest
@@ -33,12 +36,16 @@ const setup = ({
     .spyOn(mockDataProvider, 'useGetUserQuery')
     //@ts-ignore - we don't need all parameters of the QueryObserverSuccessResult
     .mockReturnValue(useGetUserQueryReturnValue);
+  const mockUseGetStartupConfig = jest
+    .spyOn(mockDataProvider, 'useGetStartupConfig')
+    //@ts-ignore - we don't need all parameters of the QueryObserverSuccessResult
+    .mockReturnValue(useGetStartupCongfigReturnValue);
   const renderResult = render(<Login />);
-
   return {
     ...renderResult,
     mockUseLoginUser,
-    mockUseGetUserQuery
+    mockUseGetUserQuery,
+    mockUseGetStartupConfig
   };
 };
 

client/src/components/Auth/__tests__/Registration.spec.tsx

@@ -3,11 +3,6 @@ import userEvent from '@testing-library/user-event';
 import Registration from '../Registration';
 import * as mockDataProvider from '~/data-provider';
 
-jest.mock('~/utils/envConstants', () => ({
-  DOMAIN_SERVER: 'mock-server',
-  SHOW_GOOGLE_LOGIN_OPTION: true
-}));
-
 jest.mock('~/data-provider');
 
 const setup = ({
@@ -22,6 +17,15 @@ const setup = ({
     mutate: jest.fn(),
     data: {},
     isSuccess: false
+  },
+  useGetStartupCongfigReturnValue = {
+    isLoading: false,
+    isError: false,
+    data: {
+      googleLoginEnabled: true,
+      registrationEnabled: true,
+      serverDomain: 'mock-server'
+    }
   }
 } = {}) => {
   const mockUseRegisterUserMutation = jest
@@ -32,13 +36,18 @@ const setup = ({
     .spyOn(mockDataProvider, 'useGetUserQuery')
     //@ts-ignore - we don't need all parameters of the QueryObserverSuccessResult
     .mockReturnValue(useGetUserQueryReturnValue);
+  const mockUseGetStartupConfig = jest
+    .spyOn(mockDataProvider, 'useGetStartupConfig')
+    //@ts-ignore - we don't need all parameters of the QueryObserverSuccessResult
+    .mockReturnValue(useGetStartupCongfigReturnValue);
 
   const renderResult = render(<Registration />);
 
   return {
     ...renderResult,
     mockUseRegisterUserMutation,
-    mockUseGetUserQuery
+    mockUseGetUserQuery,
+    mockUseGetStartupConfig
   };
 };