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

Merge pull request #1582 from automatisch/toggle-favicon-and-notifications-page

Browse Source 
feat: put favicon and notifications page behind feature flags
This commit is contained in:
Ali BARIN
2024-02-07 14:46:59 +01:00
committed by GitHub
parent 38a3e3ab9f 9d42fd9293
commit 3320dc6bc4
10 changed files with 102 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.devcontainer/devcontainer.json
View File

@@ -8,7 +8,7 @@
"version": "latest" "version": "latest"
}, },
"ghcr.io/devcontainers/features/node:1": { "ghcr.io/devcontainers/features/node:1": {
"version": 16 "version": 20
}, },
"ghcr.io/devcontainers/features/common-utils:1": { "ghcr.io/devcontainers/features/common-utils:1": {
"username": "vscode", "username": "vscode",

2
packages/backend/src/config/app.js
View File

@@ -88,6 +88,8 @@ const appConfig = {
licenseKey: process.env.LICENSE_KEY, licenseKey: process.env.LICENSE_KEY,
sentryDsn: process.env.SENTRY_DSN, sentryDsn: process.env.SENTRY_DSN,
CI: process.env.CI === 'true', CI: process.env.CI === 'true',
disableNotificationsPage: process.env.DISABLE_NOTIFICATIONS_PAGE === 'true',
disableFavicon: process.env.DISABLE_FAVICON === 'true',
}; };
if (!appConfig.encryptionKey) { if (!appConfig.encryptionKey) {

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

@@ -1,9 +1,15 @@
import appConfig from '../../config/app.js';
import { hasValidLicense } from '../../helpers/license.ee.js'; import { hasValidLicense } from '../../helpers/license.ee.js';
import Config from '../../models/config.js'; import Config from '../../models/config.js';
const getConfig = async (_parent, params) => { const getConfig = async (_parent, params) => {
if (!(await hasValidLicense())) return {}; if (!(await hasValidLicense())) return {};
const defaultConfig = {
disableNotificationsPage: appConfig.disableNotificationsPage,
disableFavicon: appConfig.disableFavicon,
};
const configQuery = Config.query(); const configQuery = Config.query();
if (Array.isArray(params.keys)) { if (Array.isArray(params.keys)) {
@@ -18,7 +24,7 @@ const getConfig = async (_parent, params) => {
computedConfig[key] = value?.data; computedConfig[key] = value?.data;
return computedConfig; return computedConfig;
}, {}); }, defaultConfig);
}; };
export default getConfig; export default getConfig;

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

@@ -2,6 +2,7 @@ import { vi, describe, it, expect, beforeEach } from 'vitest';
import request from 'supertest'; import request from 'supertest';
import app from '../../app'; import app from '../../app';
import { createConfig } from '../../../test/factories/config'; import { createConfig } from '../../../test/factories/config';
import appConfig from '../../config/app';
import * as license from '../../helpers/license.ee'; import * as license from '../../helpers/license.ee';
describe('graphQL getConfig query', () => { describe('graphQL getConfig query', () => {
@@ -56,6 +57,8 @@ describe('graphQL getConfig query', () => {
[configOne.key]: configOne.value.data, [configOne.key]: configOne.value.data,
[configTwo.key]: configTwo.value.data, [configTwo.key]: configTwo.value.data,
[configThree.key]: configThree.value.data, [configThree.key]: configThree.value.data,
disableNotificationsPage: false,
disableFavicon: false,
}, },
}, },
}; };
@@ -82,6 +85,38 @@ describe('graphQL getConfig query', () => {
getConfig: { getConfig: {
[configOne.key]: configOne.value.data, [configOne.key]: configOne.value.data,
[configTwo.key]: configTwo.value.data, [configTwo.key]: configTwo.value.data,
disableNotificationsPage: false,
disableFavicon: false,
},
},
};
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);
});
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,
}, },
}, },
}; };

58
packages/docs/pages/advanced/configuration.md
View File

@@ -14,31 +14,33 @@ The default values for some environment variables might be different in our deve
Please be careful with the `ENCRYPTION_KEY` and `WEBHOOK_SECRET_KEY` environment variables. They are used to encrypt your credentials from third-party services and verify webhook requests. If you change them, your existing connections and flows will not continue to work. Please be careful with the `ENCRYPTION_KEY` and `WEBHOOK_SECRET_KEY` environment variables. They are used to encrypt your credentials from third-party services and verify webhook requests. If you change them, your existing connections and flows will not continue to work.
::: :::
| Variable Name | Type | Default Value | Description | | Variable Name | Type | Default Value | Description |
| --------------------------- | ------- | ------------------ | ---------------------------------------------------------------------------------------------------- | | ---------------------------- | ------- | ------------------ | ----------------------------------------------------------------------------------- |
| `HOST` | string | `localhost` | HTTP Host | | `HOST` | string | `localhost` | HTTP Host |
| `PROTOCOL` | string | `http` | HTTP Protocol | | `PROTOCOL` | string | `http` | HTTP Protocol |
| `PORT` | string | `3000` | HTTP Port | | `PORT` | string | `3000` | HTTP Port |
| `APP_ENV` | string | `production` | Automatisch Environment | | `APP_ENV` | string | `production` | Automatisch Environment |
| `WEB_APP_URL` | string | | Can be used to override connection URLs and CORS URL | | `WEB_APP_URL` | string | | Can be used to override connection URLs and CORS URL |
| `WEBHOOK_URL` | string | | Can be used to override webhook URL | | `WEBHOOK_URL` | string | | Can be used to override webhook URL |
| `LOG_LEVEL` | string | `info` | Can be used to configure log level such as `error`, `warn`, `info`, `http`, `debug` | | `LOG_LEVEL` | string | `info` | Can be used to configure log level such as `error`, `warn`, `info`, `http`, `debug` |
| `POSTGRES_DATABASE` | string | `automatisch` | Database Name | | `POSTGRES_DATABASE` | string | `automatisch` | Database Name |
| `POSTGRES_SCHEMA` | string | `public` | Database Schema | | `POSTGRES_SCHEMA` | string | `public` | Database Schema |
| `POSTGRES_PORT` | number | `5432` | Database Port | | `POSTGRES_PORT` | number | `5432` | Database Port |
| `POSTGRES_ENABLE_SSL` | boolean | `false` | Enable/Disable SSL for the database | | `POSTGRES_ENABLE_SSL` | boolean | `false` | Enable/Disable SSL for the database |
| `POSTGRES_HOST` | string | `postgres` | Database Host | | `POSTGRES_HOST` | string | `postgres` | Database Host |
| `POSTGRES_USERNAME` | string | `automatisch_user` | Database User | | `POSTGRES_USERNAME` | string | `automatisch_user` | Database User |
| `POSTGRES_PASSWORD` | string | | Password of Database User | | `POSTGRES_PASSWORD` | string | | Password of Database User |
| `ENCRYPTION_KEY` | string | | Encryption Key to store credentials | | `ENCRYPTION_KEY` | string | | Encryption Key to store credentials |
| `WEBHOOK_SECRET_KEY` | string | | Webhook Secret Key to verify webhook requests | | `WEBHOOK_SECRET_KEY` | string | | Webhook Secret Key to verify webhook requests |
| `APP_SECRET_KEY` | string | | Secret Key to authenticate the user | | `APP_SECRET_KEY` | string | | Secret Key to authenticate the user |
| `REDIS_HOST` | string | `redis` | Redis Host | | `REDIS_HOST` | string | `redis` | Redis Host |
| `REDIS_PORT` | number | `6379` | Redis Port | | `REDIS_PORT` | number | `6379` | Redis Port |
| `REDIS_USERNAME` | string | | Redis Username | | `REDIS_USERNAME` | string | | Redis Username |
| `REDIS_PASSWORD` | string | | Redis Password | | `REDIS_PASSWORD` | string | | Redis Password |
| `REDIS_TLS` | boolean | `false` | Redis TLS | | `REDIS_TLS` | boolean | `false` | Redis TLS |
| `TELEMETRY_ENABLED` | boolean | `true` | Enable/Disable Telemetry | | `TELEMETRY_ENABLED` | boolean | `true` | Enable/Disable Telemetry |
| `ENABLE_BULLMQ_DASHBOARD` | boolean | `false` | Enable BullMQ Dashboard | | `ENABLE_BULLMQ_DASHBOARD` | boolean | `false` | Enable BullMQ Dashboard |
| `BULLMQ_DASHBOARD_USERNAME` | string | | Username to login BullMQ Dashboard | | `BULLMQ_DASHBOARD_USERNAME` | string | | Username to login BullMQ Dashboard |
| `BULLMQ_DASHBOARD_PASSWORD` | string | | Password to login BullMQ Dashboard | | `BULLMQ_DASHBOARD_PASSWORD` | string | | Password to login BullMQ Dashboard |
| `DISABLE_NOTIFICATIONS_PAGE` | boolean | `false` | Enable/Disable notifications page |
| `DISABLE_FAVICON` | boolean | `false` | Enable/Disable favicon |

0
packages/web/public/favicon.ico → packages/web/public/browser-tab.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

1
packages/web/public/index.html
View File

@@ -2,7 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#0059F7" /> <meta name="theme-color" content="#0059F7" />
<meta <meta

7
packages/web/public/manifest.json
View File

@@ -2,13 +2,6 @@
"short_name": "automatisch", "short_name": "automatisch",
"name": "automatisch", "name": "automatisch",
"description": "Build workflow automation without spending time and money. No code is required.", "description": "Build workflow automation without spending time and money. No code is required.",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".", "start_url": ".",
"display": "standalone", "display": "standalone",
"theme_color": "#000000", "theme_color": "#000000",

12
packages/web/src/components/Layout/index.tsx
View File

@@ -12,7 +12,7 @@ import * as URLS from 'config/urls';
import useVersion from 'hooks/useVersion'; import useVersion from 'hooks/useVersion';
import AppBar from 'components/AppBar'; import AppBar from 'components/AppBar';
import Drawer from 'components/Drawer'; import Drawer from 'components/Drawer';
import useAutomatischInfo from 'hooks/useAutomatischInfo'; import useConfig from 'hooks/useConfig';
type PublicLayoutProps = { type PublicLayoutProps = {
children: React.ReactNode; children: React.ReactNode;
@@ -40,17 +40,17 @@ const drawerLinks = [
]; ];
type GenerateDrawerBottomLinksOptions = { type GenerateDrawerBottomLinksOptions = {
isMation: boolean; disableNotificationsPage: boolean;
loading: boolean; loading: boolean;
notificationBadgeContent: number; notificationBadgeContent: number;
}; };
const generateDrawerBottomLinks = ({ const generateDrawerBottomLinks = ({
isMation, disableNotificationsPage,
loading, loading,
notificationBadgeContent = 0, notificationBadgeContent = 0,
}: GenerateDrawerBottomLinksOptions) => { }: GenerateDrawerBottomLinksOptions) => {
if (loading || isMation) { if (loading || disableNotificationsPage) {
return []; return [];
} }
@@ -68,7 +68,7 @@ export default function PublicLayout({
children, children,
}: PublicLayoutProps): React.ReactElement { }: PublicLayoutProps): React.ReactElement {
const version = useVersion(); const version = useVersion();
const { isMation, loading } = useAutomatischInfo(); const { config, loading } = useConfig(['disableNotificationsPage']);
const theme = useTheme(); const theme = useTheme();
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg')); const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens); const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
@@ -79,7 +79,7 @@ export default function PublicLayout({
const drawerBottomLinks = generateDrawerBottomLinks({ const drawerBottomLinks = generateDrawerBottomLinks({
notificationBadgeContent: version.newVersionCount, notificationBadgeContent: version.newVersionCount,
loading, loading,
isMation, disableNotificationsPage: config?.disableNotificationsPage as boolean,
}); });
return ( return (

21
packages/web/src/components/MetadataProvider/index.tsx
View File

@@ -15,6 +15,27 @@ const MetadataProvider = ({
document.title = (config?.title as string) || 'Automatisch'; document.title = (config?.title as string) || 'Automatisch';
}, [config?.title]); }, [config?.title]);
React.useEffect(() => {
const existingFaviconElement = document.querySelector(
"link[rel~='icon']"
) as HTMLLinkElement | null;
if (config?.disableFavicon === true) {
existingFaviconElement?.remove();
}
if (config?.disableFavicon === false) {
if (existingFaviconElement) {
existingFaviconElement.href = '/browser-tab.ico';
} else {
const newFaviconElement = document.createElement('link');
newFaviconElement.rel = 'icon';
document.head.appendChild(newFaviconElement);
newFaviconElement.href = '/browser-tab.ico';
}
}
}, [config?.disableFavicon]);
return <>{children}</>; return <>{children}</>;
}; };