Made API keys hidden (password fields) in the query translator module

Author: nielsdejong

src/component/field/Field.tsx

@@ -15,6 +15,7 @@ const NeoField = ({
   select = false,
   disabled = undefined,
   variant = undefined,
+  password = false,
   helperText = undefined,
   defaultValueLabel = undefined,
   defaultValue = undefined,
@@ -77,6 +78,7 @@ const NeoField = ({
         variant={variant}
         label={label}
         helpText={helperText}
+        type={password ? 'password' : 'text'}
         disabled={disabled}
         value={value != null ? value : defaultValue}
         fluid

src/component/field/Setting.tsx

@@ -72,6 +72,7 @@ const NeoSetting = ({
   defaultValue,
   disabled = undefined,
   helperText = undefined,
+  password = false,
   onChange,
   onClick = () => {},
   style = { width: '100%', marginBottom: '10px', marginRight: '10px', marginLeft: '10px' },
@@ -104,6 +105,7 @@ const NeoSetting = ({
             disabled={disabled}
             helperText={helperText}
             value={value}
+            password={password}
             defaultValue={''}
             placeholder={`${defaultValue}`}
             style={style}

src/extensions/query-translator/QueryTranslatorConfig.ts

@@ -10,6 +10,7 @@ interface ClientSettingEntry {
   label: string;
   type: SELECTION_TYPES;
   default: any;
+  password?: boolean;
   authentication?: boolean; // Required for authentication, the user should insert all the required fields before trying to authenticate
   hasAuthButton?: boolean; // Append a button at the end of the selector to trigger an auth request.
   methodFromClient?: string; // String that contains the name of the client function to call to retrieve the data needed to fill the option
@@ -47,6 +48,7 @@ export const QUERY_TRANSLATOR_CONFIG: QueryTranslatorConfig = {
           label: 'OpenAI API Key',
           type: SELECTION_TYPES.TEXT,
           default: '',
+          password: true,
           hasAuthButton: true,
           authentication: true,
         },
@@ -74,6 +76,7 @@ export const QUERY_TRANSLATOR_CONFIG: QueryTranslatorConfig = {
           label: 'Subscription Key',
           type: SELECTION_TYPES.TEXT,
           default: '',
+          password: true,
           hasAuthButton: true,
           authentication: true,
         },

src/extensions/query-translator/component/ClientSettings.tsx

@@ -155,6 +155,7 @@ export const ClientSettings = ({
                 name={setting}
                 value={localSettings[setting]}
                 disabled={disabled}
+                password={defaultSettings[setting].password}
                 type={defaultSettings[setting].type}
                 label={defaultSettings[setting].label}
                 defaultValue={defaultSettings[setting].default}