Merge pull request #1205 from automatisch/white-labelling

feat: introduce dynamic configuration

packages/backend/src/db/migrations/20230810124730_create_config.ts

@@ -0,0 +1,15 @@
+import { Knex } from 'knex';
+
+export async function up(knex: Knex): Promise<void> {
+  return knex.schema.createTable('config', (table) => {
+    table.uuid('id').primary().defaultTo(knex.raw('gen_random_uuid()'));
+    table.string('key').unique().notNullable();
+    table.jsonb('value').notNullable().defaultTo({});
+
+    table.timestamps(true, true);
+  });
+}
+
+export async function down(knex: Knex): Promise<void> {
+  return knex.schema.dropTable('config');
+}

packages/backend/src/db/migrations/20230810134714_seed_update_config_permissions_to_admin.ts

@@ -0,0 +1,30 @@
+import { Knex } from 'knex';
+
+const getPermissionForRole = (
+  roleId: string,
+  subject: string,
+  actions: string[]
+) =>
+  actions.map((action) => ({
+    role_id: roleId,
+    subject,
+    action,
+    conditions: [],
+  }));
+
+export async function up(knex: Knex): Promise<void> {
+  const role = (await knex('roles')
+    .first(['id', 'key'])
+    .where({ key: 'admin' })
+    .limit(1)) as { id: string; key: string };
+
+  await knex('permissions').insert(
+    getPermissionForRole(role.id, 'Config', [
+      'update',
+    ])
+  );
+}
+
+export async function down(knex: Knex): Promise<void> {
+  await knex('permissions').where({ subject: 'Config' }).delete();
+}

packages/backend/src/graphql/mutation-resolvers.ts

@@ -17,6 +17,7 @@ import login from './mutations/login';
 import registerUser from './mutations/register-user.ee';
 import resetConnection from './mutations/reset-connection';
 import resetPassword from './mutations/reset-password.ee';
+import updateConfig from './mutations/update-config';
 import updateConnection from './mutations/update-connection';
 import updateCurrentUser from './mutations/update-current-user';
 import updateFlow from './mutations/update-flow';
@@ -24,8 +25,8 @@ import updateFlowStatus from './mutations/update-flow-status';
 import updateRole from './mutations/update-role.ee';
 import updateStep from './mutations/update-step';
 import updateUser from './mutations/update-user.ee';
-import verifyConnection from './mutations/verify-connection';
 import upsertSamlAuthProvider from './mutations/upsert-saml-auth-provider.ee';
+import verifyConnection from './mutations/verify-connection';
 
 const mutationResolvers = {
   createConnection,
@@ -47,15 +48,16 @@ const mutationResolvers = {
   registerUser,
   resetConnection,
   resetPassword,
+  updateConfig,
   updateConnection,
   updateCurrentUser,
-  updateUser,
   updateFlow,
   updateFlowStatus,
   updateRole,
   updateStep,
-  verifyConnection,
+  updateUser,
   upsertSamlAuthProvider,
+  verifyConnection,
 };
 
 export default mutationResolvers;

packages/backend/src/graphql/mutations/update-config.ts

@@ -0,0 +1,44 @@
+import type { IJSONValue } from '@automatisch/types';
+import Config from '../../models/config';
+import Context from '../../types/express/context';
+
+type Params = {
+  input: {
+    [index: string]: IJSONValue;
+  };
+};
+
+const updateConfig = async (_parent: unknown, params: Params, context: Context) => {
+  context.currentUser.can('update', 'Config');
+
+  const config = params.input;
+  const configKeys = Object.keys(config);
+  const updates = [];
+
+  for (const key of configKeys) {
+    const newValue = config[key];
+
+    const entryUpdate = Config
+      .query()
+      .insert({
+        key,
+        value: {
+          data: newValue
+        }
+      })
+      .onConflict('key')
+      .merge({
+        value: {
+          data: newValue
+        }
+      });
+
+    updates.push(entryUpdate);
+  }
+
+  await Promise.all(updates);
+
+  return config;
+};
+
+export default updateConfig;

packages/backend/src/graphql/queries/get-config.ts

@@ -0,0 +1,31 @@
+import Context from '../../types/express/context';
+import Config from '../../models/config';
+
+type Params = {
+  keys: string[];
+};
+
+const getConfig = async (
+  _parent: unknown,
+  params: Params,
+  context: Context
+) => {
+  const configQuery = Config
+    .query();
+
+  if (Array.isArray(params.keys)) {
+    configQuery.whereIn('key', params.keys);
+  }
+
+  const config = await configQuery;
+
+  return config.reduce((computedConfig, configEntry) => {
+    const { key, value } = configEntry;
+
+    computedConfig[key] = value?.data;
+
+    return computedConfig;
+  }, {} as Record<string, unknown>);
+};
+
+export default getConfig;

packages/backend/src/graphql/query-resolvers.ts

@@ -3,6 +3,7 @@ import getApps from './queries/get-apps';
 import getAutomatischInfo from './queries/get-automatisch-info';
 import getBillingAndUsage from './queries/get-billing-and-usage.ee';
 import getConnectedApps from './queries/get-connected-apps';
+import getConfig from './queries/get-config';
 import getCurrentUser from './queries/get-current-user';
 import getDynamicData from './queries/get-dynamic-data';
 import getDynamicFields from './queries/get-dynamic-fields';
@@ -11,20 +12,20 @@ import getExecutionSteps from './queries/get-execution-steps';
 import getExecutions from './queries/get-executions';
 import getFlow from './queries/get-flow';
 import getFlows from './queries/get-flows';
-import getUser from './queries/get-user';
-import getUsers from './queries/get-users';
 import getInvoices from './queries/get-invoices.ee';
 import getPaddleInfo from './queries/get-paddle-info.ee';
 import getPaymentPlans from './queries/get-payment-plans.ee';
 import getPermissionCatalog from './queries/get-permission-catalog.ee';
 import getRole from './queries/get-role.ee';
 import getRoles from './queries/get-roles.ee';
-import listSamlAuthProviders from './queries/list-saml-auth-providers.ee';
 import getSamlAuthProvider from './queries/get-saml-auth-provider.ee';
 import getStepWithTestExecutions from './queries/get-step-with-test-executions';
 import getSubscriptionStatus from './queries/get-subscription-status.ee';
 import getTrialStatus from './queries/get-trial-status.ee';
+import getUser from './queries/get-user';
+import getUsers from './queries/get-users';
 import healthcheck from './queries/healthcheck';
+import listSamlAuthProviders from './queries/list-saml-auth-providers.ee';
 import testConnection from './queries/test-connection';
 
 const queryResolvers = {
@@ -32,6 +33,7 @@ const queryResolvers = {
   getApps,
   getAutomatischInfo,
   getBillingAndUsage,
+  getConfig,
   getConnectedApps,
   getCurrentUser,
   getDynamicData,
@@ -47,7 +49,6 @@ const queryResolvers = {
   getPermissionCatalog,
   getRole,
   getRoles,
-  listSamlAuthProviders,
   getSamlAuthProvider,
   getStepWithTestExecutions,
   getSubscriptionStatus,
@@ -55,6 +56,7 @@ const queryResolvers = {
   getUser,
   getUsers,
   healthcheck,
+  listSamlAuthProviders,
   testConnection,
 };
 

packages/backend/src/graphql/schema.graphql

@@ -33,22 +33,23 @@ type Query {
     key: String!
     parameters: JSONObject
   ): [SubstepArgument]
-  getCurrentUser: User
-  getPaymentPlans: [PaymentPlan]
-  getPaddleInfo: GetPaddleInfo
-  getBillingAndUsage: GetBillingAndUsage
-  getInvoices: [Invoice]
   getAutomatischInfo: GetAutomatischInfo
-  getTrialStatus: GetTrialStatus
-  getSubscriptionStatus: GetSubscriptionStatus
-  listSamlAuthProviders: [ListSamlAuthProviders]
-  getSamlAuthProvider: SamlAuthProvider
-  getUsers(limit: Int!, offset: Int!): UserConnection
-  getUser(id: String!): User
-  getRoles: [Role]
-  getRole(id: String!): Role
+  getBillingAndUsage: GetBillingAndUsage
+  getCurrentUser: User
+  getConfig(keys: [String]): JSONObject
+  getInvoices: [Invoice]
+  getPaddleInfo: GetPaddleInfo
+  getPaymentPlans: [PaymentPlan]
   getPermissionCatalog: PermissionCatalog
+  getRole(id: String!): Role
+  getRoles: [Role]
+  getSamlAuthProvider: SamlAuthProvider
+  getSubscriptionStatus: GetSubscriptionStatus
+  getTrialStatus: GetTrialStatus
+  getUser(id: String!): User
+  getUsers(limit: Int!, offset: Int!): UserConnection
   healthcheck: AppHealth
+  listSamlAuthProviders: [ListSamlAuthProviders]
 }
 
 type Mutation {
@@ -71,6 +72,7 @@ type Mutation {
   registerUser(input: RegisterUserInput): User
   resetConnection(input: ResetConnectionInput): Connection
   resetPassword(input: ResetPasswordInput): Boolean
+  updateConfig(input: JSONObject): JSONObject
   updateConnection(input: UpdateConnectionInput): Connection
   updateCurrentUser(input: UpdateCurrentUserInput): User
   updateFlow(input: UpdateFlowInput): Flow
@@ -78,8 +80,8 @@ type Mutation {
   updateRole(input: UpdateRoleInput): Role
   updateStep(input: UpdateStepInput): Step
   updateUser(input: UpdateUserInput): User
-  verifyConnection(input: VerifyConnectionInput): Connection
   upsertSamlAuthProvider(input: UpsertSamlAuthProviderInput): SamlAuthProvider
+  verifyConnection(input: VerifyConnectionInput): Connection
 }
 
 """

packages/backend/src/helpers/authentication.ts

@@ -36,6 +36,7 @@ const authentication = shield(
       getAutomatischInfo: allow,
       listSamlAuthProviders: allow,
       healthcheck: allow,
+      getConfig: allow,
     },
     Mutation: {
       '*': isAuthenticated,

packages/backend/src/models/config.ts

@@ -0,0 +1,23 @@
+import { IJSONValue } from '@automatisch/types';
+import Base from './base';
+
+class Config extends Base {
+  id!: string;
+  key!: string;
+  value!: { data: IJSONValue };
+
+  static tableName = 'config';
+
+  static jsonSchema = {
+    type: 'object',
+    required: ['key', 'value'],
+
+    properties: {
+      id: { type: 'string', format: 'uuid' },
+      key: { type: 'string', minLength: 1 },
+      value: { type: 'object' },
+    },
+  };
+}
+
+export default Config;

packages/web/src/components/AppBar/index.tsx

@@ -1,20 +1,20 @@
-import * as React from 'react';
-import type { ContainerProps } from '@mui/material/Container';
-import { useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import MuiAppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import MenuIcon from '@mui/icons-material/Menu';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
-import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import MuiAppBar from '@mui/material/AppBar';
+import type { ContainerProps } from '@mui/material/Container';
+import IconButton from '@mui/material/IconButton';
+import Toolbar from '@mui/material/Toolbar';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import * as React from 'react';
 
-import * as URLS from 'config/urls';
 import AccountDropdownMenu from 'components/AccountDropdownMenu';
-import TrialStatusBadge from 'components/TrialStatusBadge/index.ee';
 import Container from 'components/Container';
-import { FormattedMessage } from 'react-intl';
+import Logo from 'components/Logo/index';
+import TrialStatusBadge from 'components/TrialStatusBadge/index.ee';
+import * as URLS from 'config/urls';
+
 import { Link } from './style';
 
 type AppBarProps = {
@@ -60,11 +60,9 @@ export default function AppBar(props: AppBarProps): React.ReactElement {
             {drawerOpen && matchSmallScreens ? <MenuOpenIcon /> : <MenuIcon />}
           </IconButton>
 
-          <div style={{ flexGrow: 1 }}>
+          <div style={{ flexGrow: 1, display: 'flex' }}>
             <Link to={URLS.DASHBOARD}>
-              <Typography variant="h6" component="h1" noWrap>
-                <FormattedMessage id="brandText" />
-              </Typography>
+              <Logo />
             </Link>
           </div>
 

packages/web/src/components/CustomLogo/index.ee.tsx

@@ -0,0 +1,15 @@
+import useConfig from 'hooks/useConfig';
+
+const CustomLogo = () => {
+  const { config, loading } = useConfig(['logo.svgData']);
+
+  if (loading || !config?.['logo.svgData']) return null;
+
+  const logoSvgData = config['logo.svgData'] as string;
+
+  return (
+    <img src={`data:image/svg+xml;utf8,${encodeURIComponent(logoSvgData)}`} />
+  );
+};
+
+export default CustomLogo;

packages/web/src/components/Logo/index.tsx

@@ -0,0 +1,23 @@
+import Typography from '@mui/material/Typography';
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import CustomLogo from 'components/CustomLogo/index.ee';
+import useConfig from 'hooks/useConfig';
+
+const Logo = () => {
+  const { config, loading } = useConfig(['logo.svgData']);
+
+  const logoSvgData = config?.['logo.svgData'] as string;
+  if (loading && !logoSvgData) return (<React.Fragment />);
+
+  if (logoSvgData) return <CustomLogo />;
+
+  return (
+    <Typography variant="h6" component="h1" noWrap>
+      <FormattedMessage id="brandText" />
+    </Typography>
+  );
+};
+
+export default Logo;

packages/web/src/components/Logo/style.ts

@@ -0,0 +1,8 @@
+import { styled } from '@mui/material/styles';
+import { Link as RouterLink } from 'react-router-dom';
+
+export const Link = styled(RouterLink)(() => ({
+  textDecoration: 'none',
+  color: 'inherit',
+  display: 'inline-flex',
+}));

packages/web/src/components/PublicLayout/index.tsx

@@ -3,10 +3,9 @@ import * as React from 'react';
 import Toolbar from '@mui/material/Toolbar';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
 
+import Logo from 'components/Logo';
 import Container from 'components/Container';
-import { FormattedMessage } from 'react-intl';
 
 type LayoutProps = {
   children: React.ReactNode;
@@ -18,14 +17,7 @@ export default function Layout({ children }: LayoutProps): React.ReactElement {
       <AppBar>
         <Container maxWidth="lg" disableGutters>
           <Toolbar>
-            <Typography
-              variant="h6"
-              noWrap
-              component="div"
-              sx={{ flexGrow: 1 }}
-            >
-              <FormattedMessage id="brandText" />
-            </Typography>
+            <Logo />
           </Toolbar>
         </Container>
       </AppBar>

packages/web/src/components/ThemeProvider/index.tsx

@@ -1,18 +1,49 @@
-import * as React from 'react';
-import { ThemeProvider as BaseThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider as BaseThemeProvider } from '@mui/material/styles';
+import get from 'lodash/get';
+import set from 'lodash/set';
+import * as React from 'react';
+
+import { IJSONObject } from '@automatisch/types';
+import useConfig from 'hooks/useConfig';
 import theme from 'styles/theme';
 
 type ThemeProviderProps = {
   children: React.ReactNode;
 };
 
+const customizeTheme = (defaultTheme: typeof theme, config: IJSONObject) => {
+  for (const key in config) {
+    const value = config[key];
+    const exists = get(defaultTheme, key);
+
+    if (exists) {
+      set(defaultTheme, key, value);
+    }
+  }
+
+  return defaultTheme;
+};
+
 const ThemeProvider = ({
   children,
   ...props
 }: ThemeProviderProps): React.ReactElement => {
+  const { config, loading } = useConfig();
+
+  const customTheme = React.useMemo(() => {
+    if (!config) return theme;
+
+    const customTheme = customizeTheme(theme, config);
+
+    return customTheme;
+  }, [config]);
+
+  // TODO: maybe a global loading state for the custom theme?
+  if (loading) return <></>;
+
   return (
-    <BaseThemeProvider theme={theme} {...props}>
+    <BaseThemeProvider theme={customTheme} {...props}>
       <CssBaseline />
 
       {children}

packages/web/src/graphql/mutations/update-config.ts

@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client';
+
+export const UPDATE_CONFIG = gql`
+  mutation UpdateConfig($input: JSONObject) {
+    updateConfig(input: $input)
+  }
+`;

packages/web/src/graphql/queries/get-config.ts

@@ -0,0 +1,8 @@
+import { gql } from '@apollo/client';
+
+export const GET_CONFIG = gql`
+  query GetConfig($keys: [String]) {
+    getConfig(keys: $keys)
+  }
+`;
+

packages/web/src/hooks/useConfig.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@apollo/client';
+import { IJSONObject } from '@automatisch/types';
+
+import { GET_CONFIG } from 'graphql/queries/get-config';
+
+type QueryResponse = {
+  getConfig: IJSONObject;
+}
+
+export default function useConfig(keys?: string[]) {
+  const { data, loading } = useQuery<QueryResponse>(GET_CONFIG, { variables: { keys } });
+
+  return {
+    config: data?.getConfig,
+    loading,
+  };
+}