groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: rewrite useConfig with RQ

Browse Source
This commit is contained in:
kasia.oczkowska
2024-03-21 13:57:34 +00:00
parent 754c3269ec
commit 3a57349d8a
15 changed files with 76 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/backend/src/graphql/queries/get-config.ee.js
View File

@@ -1,32 +0,0 @@
import appConfig from '../../config/app.js';
import { hasValidLicense } from '../../helpers/license.ee.js';
import Config from '../../models/config.js';
const getConfig = async (_parent, params) => {
if (!(await hasValidLicense())) return {};
const defaultConfig = {
disableNotificationsPage: appConfig.disableNotificationsPage,
disableFavicon: appConfig.disableFavicon,
additionalDrawerLink: appConfig.additionalDrawerLink,
additionalDrawerLinkText: appConfig.additionalDrawerLinkText,
};
const configQuery = Config.query();
if (Array.isArray(params.keys)) {
configQuery.whereIn('key', params.keys);
}
const config = await configQuery.orderBy('key', 'asc');
return config.reduce((computedConfig, configEntry) => {
const { key, value } = configEntry;
computedConfig[key] = value?.data;
return computedConfig;
}, defaultConfig);
};
export default getConfig;

140
packages/backend/src/graphql/queries/get-config.ee.test.js
View File

@@ -1,140 +0,0 @@
import { vi, describe, it, expect, beforeEach } from 'vitest';
import request from 'supertest';
import app from '../../app';
import { createConfig } from '../../../test/factories/config';
import appConfig from '../../config/app';
import * as license from '../../helpers/license.ee';
describe('graphQL getConfig query', () => {
let configOne, configTwo, configThree, query;
beforeEach(async () => {
configOne = await createConfig({ key: 'configOne' });
configTwo = await createConfig({ key: 'configTwo' });
configThree = await createConfig({ key: 'configThree' });
query = `
query {
getConfig
}
`;
});
describe('and without valid license', () => {
beforeEach(async () => {
vi.spyOn(license, 'hasValidLicense').mockResolvedValue(false);
});
describe('and correct permissions', () => {
it('should return empty config data', async () => {
const response = await request(app)
.post('/graphql')
.send({ query })
.expect(200);
const expectedResponsePayload = { data: { getConfig: {} } };
expect(response.body).toEqual(expectedResponsePayload);
});
});
});
describe('and with valid license', () => {
beforeEach(async () => {
vi.spyOn(license, 'hasValidLicense').mockResolvedValue(true);
});
describe('and without providing specific keys', () => {
it('should return all config data', async () => {
const response = await request(app)
.post('/graphql')
.send({ query })
.expect(200);
const expectedResponsePayload = {
data: {
getConfig: {
[configOne.key]: configOne.value.data,
[configTwo.key]: configTwo.value.data,
[configThree.key]: configThree.value.data,
disableNotificationsPage: false,
disableFavicon: false,
additionalDrawerLink: undefined,
additionalDrawerLinkText: undefined,
},
},
};
expect(response.body).toEqual(expectedResponsePayload);
});
});
describe('and with providing specific keys', () => {
it('should return all config data', async () => {
query = `
query {
getConfig(keys: ["configOne", "configTwo"])
}
`;
const response = await request(app)
.post('/graphql')
.send({ query })
.expect(200);
const expectedResponsePayload = {
data: {
getConfig: {
[configOne.key]: configOne.value.data,
[configTwo.key]: configTwo.value.data,
disableNotificationsPage: false,
disableFavicon: false,
additionalDrawerLink: undefined,
additionalDrawerLinkText: undefined,
},
},
};
expect(response.body).toEqual(expectedResponsePayload);
});
});
describe('and with different defaults', () => {
beforeEach(async () => {
vi.spyOn(appConfig, 'disableNotificationsPage', 'get').mockReturnValue(
true
);
vi.spyOn(appConfig, 'disableFavicon', 'get').mockReturnValue(true);
vi.spyOn(appConfig, 'additionalDrawerLink', 'get').mockReturnValue(
'https://automatisch.io'
);
vi.spyOn(appConfig, 'additionalDrawerLinkText', 'get').mockReturnValue(
'Automatisch'
);
});
it('should return custom config', async () => {
const response = await request(app)
.post('/graphql')
.send({ query })
.expect(200);
const expectedResponsePayload = {
data: {
getConfig: {
[configOne.key]: configOne.value.data,
[configTwo.key]: configTwo.value.data,
[configThree.key]: configThree.value.data,
disableNotificationsPage: true,
disableFavicon: true,
additionalDrawerLink: 'https://automatisch.io',
additionalDrawerLinkText: 'Automatisch',
},
},
};
expect(response.body).toEqual(expectedResponsePayload);
});
});
});
});

2
packages/backend/src/graphql/query-resolvers.js
View File

@@ -2,7 +2,6 @@ import getApp from './queries/get-app.js';
import getAppAuthClient from './queries/get-app-auth-client.ee.js';
import getAppAuthClients from './queries/get-app-auth-clients.ee.js';
import getBillingAndUsage from './queries/get-billing-and-usage.ee.js';
import getConfig from './queries/get-config.ee.js';
import getConnectedApps from './queries/get-connected-apps.js';
import getDynamicData from './queries/get-dynamic-data.js';
import getDynamicFields from './queries/get-dynamic-fields.js';
@@ -15,7 +14,6 @@ const queryResolvers = {
getAppAuthClient,
getAppAuthClients,
getBillingAndUsage,
getConfig,
getConnectedApps,
getDynamicData,
getDynamicFields,

1
packages/backend/src/graphql/schema.graphql
View File

@@ -17,7 +17,6 @@ type Query {
parameters: JSONObject
): [SubstepArgument]
getBillingAndUsage: GetBillingAndUsage
getConfig(keys: [String]): JSONObject
}
type Mutation {

1
packages/backend/src/helpers/authentication.js
View File

@@ -42,7 +42,6 @@ const isAuthenticatedRule = rule()(isAuthenticated);
export const authenticationRules = {
Query: {
'*': isAuthenticatedRule,
getConfig: allow,
},
Mutation: {
'*': isAuthenticatedRule,

10
packages/web/src/components/CustomLogo/index.ee.jsx
View File

@@ -1,10 +1,14 @@
import useConfig from 'hooks/useConfig';
import useAutomatischConfig from 'hooks/useAutomatischConfig';
import { LogoImage } from './style.ee';
const CustomLogo = () => {
const { config, loading } = useConfig(['logo.svgData']);
if (loading || !config?.['logo.svgData']) return null;
const { data: configData, isLoading } = useAutomatischConfig();
const config = configData?.data;
if (isLoading || !config?.['logo.svgData']) return null;
const logoSvgData = config['logo.svgData'];
return (
<LogoImage
data-test="custom-logo"

14
packages/web/src/components/Layout/index.jsx
View File

@@ -15,7 +15,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
import useVersion from 'hooks/useVersion';
import AppBar from 'components/AppBar';
import Drawer from 'components/Drawer';
import useConfig from 'hooks/useConfig';
import useAutomatischConfig from 'hooks/useAutomatischConfig';
const drawerLinks = [
{
@@ -77,11 +77,9 @@ const generateDrawerBottomLinks = async ({
export default function PublicLayout({ children }) {
const version = useVersion();
const { config, loading } = useConfig([
'disableNotificationsPage',
'additionalDrawerLink',
'additionalDrawerLinkText',
]);
const { data: configData, isLoading } = useAutomatischConfig();
const config = configData?.data;
const theme = useTheme();
const formatMessage = useFormatMessage();
const [bottomLinks, setBottomLinks] = React.useState([]);
@@ -102,10 +100,10 @@ export default function PublicLayout({ children }) {
setBottomLinks(newBottomLinks);
}
if (loading) return;
if (isLoading) return;
perform();
}, [config, loading, version.newVersionCount]);
}, [config, isLoading, version.newVersionCount]);
return (
<>

13
packages/web/src/components/Logo/index.jsx
View File

@@ -1,12 +1,19 @@
import * as React from 'react';
import CustomLogo from 'components/CustomLogo/index.ee';
import DefaultLogo from 'components/DefaultLogo';
import useConfig from 'hooks/useConfig';
import useAutomatischConfig from 'hooks/useAutomatischConfig';
const Logo = () => {
const { config, loading } = useConfig(['logo.svgData']);
const { data: configData, isLoading } = useAutomatischConfig();
const config = configData?.data;
const logoSvgData = config?.['logo.svgData'];
if (loading && !logoSvgData) return <React.Fragment />;
if (isLoading && !logoSvgData) return <React.Fragment />;
if (logoSvgData) return <CustomLogo />;
return <DefaultLogo />;
};
export default Logo;

14
packages/web/src/components/MetadataProvider/index.jsx
View File

@@ -1,15 +1,22 @@
import * as React from 'react';
import useConfig from 'hooks/useConfig';
import useAutomatischConfig from 'hooks/useAutomatischConfig';
const MetadataProvider = ({ children }) => {
const { config } = useConfig();
const { data: configData } = useAutomatischConfig();
const config = configData?.data;
React.useEffect(() => {
document.title = config?.title || 'Automatisch';
}, [config?.title]);
React.useEffect(() => {
const existingFaviconElement = document.querySelector("link[rel~='icon']");
if (config?.disableFavicon === true) {
existingFaviconElement?.remove();
}
if (config?.disableFavicon === false) {
if (existingFaviconElement) {
existingFaviconElement.href = '/browser-tab.ico';
@@ -20,7 +27,10 @@ const MetadataProvider = ({ children }) => {
newFaviconElement.href = '/browser-tab.ico';
}
}
}, [config?.disableFavicon]);
return <>{children}</>;
};
export default MetadataProvider;

6
packages/web/src/components/ThemeProvider/index.jsx
View File

@@ -6,7 +6,7 @@ import set from 'lodash/set';
import * as React from 'react';
import useAutomatischInfo from 'hooks/useAutomatischInfo';
import useConfig from 'hooks/useConfig';
import useAutomatischConfig from 'hooks/useAutomatischConfig';
import { defaultTheme, mationTheme } from 'styles/theme';
const customizeTheme = (theme, config) => {
@@ -28,7 +28,8 @@ const ThemeProvider = ({ children, ...props }) => {
const { data: automatischInfo, isPending: isAutomatischInfoPending } =
useAutomatischInfo();
const isMation = automatischInfo?.data.isMation;
const { config, loading: configLoading } = useConfig();
const { data: configData, isLoading: configLoading } = useAutomatischConfig();
const config = configData?.data;
const customTheme = React.useMemo(() => {
const installationTheme = isMation ? mationTheme : defaultTheme;
@@ -51,4 +52,5 @@ const ThemeProvider = ({ children, ...props }) => {
</BaseThemeProvider>
);
};
export default ThemeProvider;

6
packages/web/src/graphql/queries/get-config.ee.js
View File

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

16
packages/web/src/hooks/useAutomatischConfig.js Normal file
View File

@@ -0,0 +1,16 @@
import { useQuery } from '@tanstack/react-query';
import api from 'helpers/api';
export default function useAutomatischConfig() {
const query = useQuery({
queryKey: ['automatisch', 'config'],
queryFn: async ({ signal }) => {
const { data } = await api.get(`/v1/automatisch/config`, {
signal,
});
return data;
},
});
return query;
}

11
packages/web/src/hooks/useConfig.js
View File

@@ -1,11 +0,0 @@
import { useQuery } from '@apollo/client';
import { GET_CONFIG } from 'graphql/queries/get-config.ee';
export default function useConfig(keys) {
const { data, loading } = useQuery(GET_CONFIG, {
variables: { keys },
});
return {
config: data?.getConfig,
loading,
};
}

55
packages/web/src/pages/UserInterface/index.jsx
View File

@@ -3,43 +3,44 @@ import LoadingButton from '@mui/lab/LoadingButton';
import Grid from '@mui/material/Grid';
import Skeleton from '@mui/material/Skeleton';
import Stack from '@mui/material/Stack';
import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
import merge from 'lodash/merge';
import * as React from 'react';
import { useQueryClient } from '@tanstack/react-query';
import ColorInput from 'components/ColorInput';
import Container from 'components/Container';
import Form from 'components/Form';
import PageTitle from 'components/PageTitle';
import TextField from 'components/TextField';
import { UPDATE_CONFIG } from 'graphql/mutations/update-config.ee';
import { GET_CONFIG } from 'graphql/queries/get-config.ee';
import nestObject from 'helpers/nestObject';
import useConfig from 'hooks/useConfig';
import useAutomatischConfig from 'hooks/useAutomatischConfig';
import useFormatMessage from 'hooks/useFormatMessage';
import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
import {
primaryDarkColor,
primaryLightColor,
primaryMainColor,
} from 'styles/theme';
const getPrimaryMainColor = (color) => color || primaryMainColor;
const getPrimaryDarkColor = (color) => color || primaryDarkColor;
const getPrimaryLightColor = (color) => color || primaryLightColor;
const defaultValues = {
title: 'Automatisch',
'palette.primary.main': primaryMainColor,
'palette.primary.dark': primaryDarkColor,
'palette.primary.light': primaryLightColor,
};
export default function UserInterface() {
const formatMessage = useFormatMessage();
const [updateConfig, { loading }] = useMutation(UPDATE_CONFIG);
const { config, loading: configLoading } = useConfig([
'title',
'palette.primary.main',
'palette.primary.light',
'palette.primary.dark',
'logo.svgData',
]);
const { data: configData, isLoading: configLoading } = useAutomatischConfig();
const config = configData?.data;
const queryClient = useQueryClient();
const enqueueSnackbar = useEnqueueSnackbar();
const configWithDefaults = merge({}, defaultValues, nestObject(config));
const handleUserInterfaceUpdate = async (uiData) => {
@@ -64,37 +65,9 @@ export default function UserInterface() {
optimisticResponse: {
updateConfig: input,
},
update: async function (cache, { data: { updateConfig } }) {
const newConfigWithDefaults = merge({}, defaultValues, updateConfig);
cache.writeQuery({
query: GET_CONFIG,
data: {
getConfig: newConfigWithDefaults,
},
});
cache.writeQuery({
query: GET_CONFIG,
data: {
getConfig: newConfigWithDefaults,
},
variables: {
keys: ['logo.svgData'],
},
});
cache.writeQuery({
query: GET_CONFIG,
data: {
getConfig: newConfigWithDefaults,
},
variables: {
keys: [
'title',
'palette.primary.main',
'palette.primary.light',
'palette.primary.dark',
'logo.svgData',
],
},
update: async function () {
queryClient.invalidateQueries({
queryKey: ['automatisch', 'config'],
});
},
});

9
packages/web/src/routes.jsx
View File

@@ -1,4 +1,5 @@
import { Route, Routes as ReactRouterRoutes, Navigate } from 'react-router-dom';
import Layout from 'components/Layout';
import NoResultFound from 'components/NotFound';
import PublicLayout from 'components/PublicLayout';
@@ -19,11 +20,14 @@ import * as URLS from 'config/urls';
import settingsRoutes from './settingsRoutes';
import adminSettingsRoutes from './adminSettingsRoutes';
import Notifications from 'pages/Notifications';
import useConfig from 'hooks/useConfig';
import useAutomatischConfig from 'hooks/useAutomatischConfig';
import useAuthentication from 'hooks/useAuthentication';
function Routes() {
const { config } = useConfig();
const { data: configData } = useAutomatischConfig();
const { isAuthenticated } = useAuthentication();
const config = configData?.data;
return (
<ReactRouterRoutes>
<Route
@@ -147,4 +151,5 @@ function Routes() {
</ReactRouterRoutes>
);
}
export default <Routes />;