feat: feature flags disable not finished components
This commit is contained in:
parent
e61312f500
commit
49cf7cac15
5
.env
5
.env
|
@ -2,3 +2,8 @@ VERSION=1
|
|||
WEB_URL=https://pinmenote.com
|
||||
IS_PRODUCTION=true
|
||||
OBJ_LIST_LIMIT=100
|
||||
|
||||
FF_SYNC_ENABLED=0
|
||||
FF_LOGIN_ENABLED=0
|
||||
FF_NEW_PIN_PREVIEW=0
|
||||
FF_REPORT_BUG=0
|
|
@ -1,4 +1,9 @@
|
|||
VERSION=1
|
||||
WEB_URL=http://localhost:5173
|
||||
IS_PRODUCTION=false
|
||||
IS_PRODUCTION=1
|
||||
OBJ_LIST_LIMIT=20
|
||||
|
||||
FF_SYNC_ENABLED=0
|
||||
FF_LOGIN_ENABLED=0
|
||||
FF_NEW_PIN_PREVIEW=0
|
||||
FF_REPORT_BUG=0
|
|
@ -42,10 +42,18 @@ interface SettingsInterfaceConfig {
|
|||
optionsDrawerOpen?: boolean;
|
||||
}
|
||||
|
||||
interface FeatureFlag {
|
||||
SYNC_ENABLED: boolean;
|
||||
LOGIN_ENABLED: boolean;
|
||||
NEW_PIN_PREVIEW: boolean;
|
||||
REPORT_BUG: boolean;
|
||||
}
|
||||
|
||||
interface EnvironmentConfig {
|
||||
showAckMessage: boolean;
|
||||
defaultServer: string;
|
||||
isProduction: boolean;
|
||||
featureFlag: FeatureFlag;
|
||||
settings: SettingsConfig;
|
||||
objListLimit: number;
|
||||
}
|
||||
|
@ -53,7 +61,13 @@ interface EnvironmentConfig {
|
|||
export const environmentConfig: EnvironmentConfig = {
|
||||
showAckMessage: false,
|
||||
defaultServer: process.env.WEB_URL || 'https://pinmenote.com',
|
||||
isProduction: process.env.IS_PRODUCTION === 'true',
|
||||
isProduction: process.env.IS_PRODUCTION === '1',
|
||||
featureFlag: {
|
||||
SYNC_ENABLED: process.env.FF_SYNC_ENABLED === '1',
|
||||
LOGIN_ENABLED: process.env.FF_LOGIN_ENABLED === '1',
|
||||
NEW_PIN_PREVIEW: process.env.FF_NEW_PIN_PREVIEW === '1',
|
||||
REPORT_BUG: process.env.FF_REPORT_BUG === '1'
|
||||
},
|
||||
settings: {
|
||||
version: parseInt(process.env.VERSION || '1'),
|
||||
screenshotFormat: 'png',
|
||||
|
@ -71,5 +85,5 @@ export const environmentConfig: EnvironmentConfig = {
|
|||
pageNote: false
|
||||
}
|
||||
},
|
||||
objListLimit: parseInt(process.env.OBJ_LIST_LIMIT || '100000')
|
||||
objListLimit: parseInt(process.env.OBJ_LIST_LIMIT || '100')
|
||||
};
|
||||
|
|
|
@ -19,12 +19,24 @@ import { BrowserApi } from '@pinmenote/browser-api';
|
|||
import BugReportIcon from '@mui/icons-material/BugReport';
|
||||
import Button from '@mui/material/Button';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import { environmentConfig } from '../../../common/environment';
|
||||
|
||||
interface Props {
|
||||
openBugReport?: () => void;
|
||||
}
|
||||
|
||||
export const MainFooterButton: FunctionComponent<Props> = (props) => {
|
||||
const reportBugIcon = environmentConfig.featureFlag.REPORT_BUG ? (
|
||||
<IconButton
|
||||
style={{ marginBottom: 10, marginRight: 5, border: '1px solid #333333' }}
|
||||
title="Report bug"
|
||||
onClick={() => (props.openBugReport ? props.openBugReport() : '')}
|
||||
>
|
||||
<BugReportIcon />
|
||||
</IconButton>
|
||||
) : (
|
||||
''
|
||||
);
|
||||
return (
|
||||
<div style={{ position: 'absolute', bottom: 0, width: 300, paddingTop: 5, backgroundColor: '#ffffff' }}>
|
||||
<div
|
||||
|
@ -35,13 +47,7 @@ export const MainFooterButton: FunctionComponent<Props> = (props) => {
|
|||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
style={{ marginBottom: 10, marginRight: 5, border: '1px solid #333333' }}
|
||||
title="Report bug"
|
||||
onClick={() => (props.openBugReport ? props.openBugReport() : '')}
|
||||
>
|
||||
<BugReportIcon />
|
||||
</IconButton>
|
||||
{reportBugIcon}
|
||||
<Button
|
||||
sx={{ width: '100%' }}
|
||||
style={{ marginBottom: 10 }}
|
||||
|
|
|
@ -80,10 +80,8 @@ const ExtensionPopupApp: React.FC = () => {
|
|||
};
|
||||
|
||||
// Show logs panel only on development environment
|
||||
let logsTab: any = '';
|
||||
if (!environmentConfig.isProduction) {
|
||||
logsTab = <Tab icon={<LogoDevIcon />} tabIndex={3} />;
|
||||
}
|
||||
const logsTab = environmentConfig.isProduction ? '' : <Tab icon={<LogoDevIcon />} tabIndex={3} />;
|
||||
const loginTab = environmentConfig.featureFlag.LOGIN_ENABLED ? <Tab icon={<PersonIcon />} /> : '';
|
||||
|
||||
const panel = getCurrentPanel(selectedPanel);
|
||||
|
||||
|
@ -103,7 +101,7 @@ const ExtensionPopupApp: React.FC = () => {
|
|||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Tabs value={selectedPanel} onChange={handleChange}>
|
||||
<Tab icon={<PushPinIcon />} />
|
||||
<Tab icon={<PersonIcon />} />
|
||||
{loginTab}
|
||||
{logsTab}
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
|
|
@ -32,6 +32,7 @@ import { SyncObjectStatus } from '../../../common/model/sync.model';
|
|||
import { fnConsoleLog } from '../../../common/fn/fn-console';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import Button from '@mui/material/Button';
|
||||
import { environmentConfig } from '../../../common/environment';
|
||||
|
||||
export interface Props {
|
||||
obj?: ObjDto<ObjPageDto>;
|
||||
|
@ -80,6 +81,21 @@ export const HtmlPreviewHeaderComponent: FunctionComponent<Props> = (props) => {
|
|||
const handleNewPin = () => {
|
||||
alert('NEW PIN');
|
||||
};
|
||||
const syncIcon = environmentConfig.featureFlag.SYNC_ENABLED ? (
|
||||
<IconButton onClick={handleManualSync}>
|
||||
<CloudSyncIcon />
|
||||
</IconButton>
|
||||
) : (
|
||||
''
|
||||
);
|
||||
|
||||
const newPinIcon = environmentConfig.featureFlag.NEW_PIN_PREVIEW ? (
|
||||
<Button sx={{ width: '100%' }} variant="outlined" onClick={handleNewPin}>
|
||||
<AddIcon /> Pin
|
||||
</Button>
|
||||
) : (
|
||||
''
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ backgroundColor: '#ffffff', width: '100%', display: 'flex', justifyContent: 'space-between' }}>
|
||||
|
@ -88,15 +104,11 @@ export const HtmlPreviewHeaderComponent: FunctionComponent<Props> = (props) => {
|
|||
<div ref={urlRef}></div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Button sx={{ width: '100%', display: 'none' }} variant="outlined" onClick={handleNewPin}>
|
||||
<AddIcon /> Pin
|
||||
</Button>
|
||||
{newPinIcon}
|
||||
<div style={{ display: props.isLoading ? 'flex' : 'none' }}>
|
||||
<CircularProgress />
|
||||
</div>
|
||||
<IconButton onClick={handleManualSync}>
|
||||
<CloudSyncIcon />
|
||||
</IconButton>
|
||||
{syncIcon}
|
||||
<IconButton onClick={props.handleDownload}>
|
||||
<DownloadIcon />
|
||||
</IconButton>
|
||||
|
|
|
@ -43,6 +43,7 @@ import { SyncManualOutgoingCommand } from './command/sync/manual/sync-manual-out
|
|||
import { SyncServerIncomingCommand } from './command/sync/sync-server-incoming.command';
|
||||
import { SyncGetProgressCommand } from './command/sync/progress/sync-get-progress.command';
|
||||
import { SyncTxHelper } from './command/sync/sync-tx.helper';
|
||||
import { environmentConfig } from '../common/environment';
|
||||
|
||||
const handleMessage = async (
|
||||
msg: BusMessage<any>,
|
||||
|
@ -131,14 +132,13 @@ const handleMessage = async (
|
|||
}
|
||||
}
|
||||
// Sync command
|
||||
if (
|
||||
![
|
||||
PageComputeMessage.CONTENT_FETCH_CSS,
|
||||
PageComputeMessage.CONTENT_FETCH_IMAGE,
|
||||
BusMessageType.OPTIONS_SYNC_OUTGOING_OBJECT,
|
||||
BusMessageType.OPTIONS_SYNC_INCOMING_CHANGES
|
||||
].includes(msg.type as any)
|
||||
) {
|
||||
const skipMessage = [
|
||||
PageComputeMessage.CONTENT_FETCH_CSS,
|
||||
PageComputeMessage.CONTENT_FETCH_IMAGE,
|
||||
BusMessageType.OPTIONS_SYNC_OUTGOING_OBJECT,
|
||||
BusMessageType.OPTIONS_SYNC_INCOMING_CHANGES
|
||||
].includes(msg.type as any);
|
||||
if (!skipMessage && environmentConfig.featureFlag.SYNC_ENABLED) {
|
||||
await new SyncServerCommand().execute();
|
||||
}
|
||||
await TaskExecutor.dequeue();
|
||||
|
|
Loading…
Reference in New Issue