Merge pull request #118 from buddypia/feature/toggle-show-keys-button

Feature/toggle show keys button. If the deployment decides to disable show keys, then there is no option to show keys in the frontend.

Author: Chenglong-MS

.env.template

@@ -0,0 +1,2 @@
+# Provide frontend configuration settings from environment variables
+SHOW_KEYS_ENABLED=true

.gitignore

@@ -1,7 +1,7 @@
 
+*env
 *api-keys.env
 **/*.ipynb_checkpoints/
-
 .DS_Store
 build/
 dist/

py-src/data_formulator/app.py

@@ -53,6 +53,7 @@
 # Load the single environment file
 load_dotenv(os.path.join(APP_ROOT, "..", "..", 'api-keys.env'))
 load_dotenv(os.path.join(APP_ROOT, 'api-keys.env'))
+load_dotenv(os.path.join(APP_ROOT, '.env'))
 
 # Configure root logger for general application logging
 logging.basicConfig(
@@ -539,6 +540,13 @@ def request_code_expl():
         expl = ""
     return expl
 
+@app.route('/app-config', methods=['GET'])
+def get_app_config():
+    """Provide frontend configuration settings from environment variables"""
+    config = {
+        "SHOW_KEYS_ENABLED": os.getenv("SHOW_KEYS_ENABLED", "true").lower() == "true"
+    }
+    return flask.jsonify(config)
 
 def parse_args() -> argparse.Namespace:
     parser = argparse.ArgumentParser(description="Data Formulator")

src/app/utils.tsx

@@ -49,6 +49,8 @@ export function getUrls() {
         VEGA_DATASET_LIST: `${appConfig.serverUrl}/vega-datasets`,
         VEGA_DATASET_REQUEST_PREFIX: `${appConfig.serverUrl}/vega-dataset/`,
 
+        APP_CONFIG: `${appConfig.serverUrl}/app-config`,
+
         AUTH_INFO_PREFIX: `${appConfig.serverUrl}/.auth/`
     };
 }

src/views/ModelSelectionDialog.tsx

@@ -54,6 +54,11 @@ import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 
 import { getUrls } from '../app/utils';
 
+// Add interface for app configuration
+interface AppConfig {
+    SHOW_KEYS_ENABLED: boolean;
+}
+
 export const GroupHeader = styled('div')(({ theme }) => ({
     position: 'sticky',
     padding: '8px 8px',
@@ -76,6 +81,19 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
     const [modelDialogOpen, setModelDialogOpen] = useState<boolean>(false);
     const [showKeys, setShowKeys] = useState<boolean>(false);
     const [tempSelectedModelId, setTempSelectedModeId] = useState<string | undefined >(selectedModelId);
+    const [appConfig, setAppConfig] = useState<AppConfig>({ SHOW_KEYS_ENABLED: true });
+
+    // Fetch app configuration
+    useEffect(() => {
+        fetch(getUrls().APP_CONFIG)
+            .then(response => response.json())
+            .then(data => {
+                setAppConfig(data);
+            })
+            .catch(error => {
+                console.error("Failed to fetch app configuration:", error);
+            });
+    }, []);
 
     let updateModelStatus = (model: ModelConfig, status: 'ok' | 'error' | 'testing' | 'unknown', message: string) => {
         dispatch(dfActions.updateModelStatus({id: model.id, status, message}));
@@ -454,10 +472,12 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
                 {modelTable}
             </DialogContent>
             <DialogActions>
-                <Button sx={{marginRight: 'auto'}} endIcon={showKeys ? <VisibilityOffIcon /> : <VisibilityIcon />} onClick={()=>{
-                    setShowKeys(!showKeys);}}>
-                        {showKeys ? 'hide' : 'show'} keys
-                </Button>
+                {appConfig.SHOW_KEYS_ENABLED && (
+                    <Button sx={{marginRight: 'auto'}} endIcon={showKeys ? <VisibilityOffIcon /> : <VisibilityIcon />} onClick={()=>{
+                        setShowKeys(!showKeys);}}>
+                            {showKeys ? 'hide' : 'show'} keys
+                    </Button>
+                )}
                 <Button disabled={getStatus(tempSelectedModelId) !== 'ok'} 
                     variant={(selectedModelId == tempSelectedModelId) ? 'text' : 'contained'}
                     onClick={()=>{