feat: feature flags disable not finished components

.env

@@ -1,4 +1,9 @@
 VERSION=1
 WEB_URL=https://pinmenote.com
 IS_PRODUCTION=true
-OBJ_LIST_LIMIT=100
+OBJ_LIST_LIMIT=100
+
+FF_SYNC_ENABLED=0
+FF_LOGIN_ENABLED=0
+FF_NEW_PIN_PREVIEW=0
+FF_REPORT_BUG=0

.env.development

@@ -1,4 +1,9 @@
 VERSION=1
 WEB_URL=http://localhost:5173
-IS_PRODUCTION=false
-OBJ_LIST_LIMIT=20
+IS_PRODUCTION=1
+OBJ_LIST_LIMIT=20
+
+FF_SYNC_ENABLED=0
+FF_LOGIN_ENABLED=0
+FF_NEW_PIN_PREVIEW=0
+FF_REPORT_BUG=0

src/common/environment.ts

@@ -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')
 };

src/default-popup/components/main/main-footer.button.tsx

@@ -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 }}

src/default-popup/default-popup.tsx

@@ -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>

src/options-ui/components/preview/html-preview-header.component.tsx

@@ -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>

src/service-worker/service-worker.ts

@@ -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();