add property of use env vars in adminAppContainer

src/client/js/components/Admin/App/GcsSettings.jsx

@@ -11,95 +11,94 @@ import AdminAppContainer from '../../../services/AdminAppContainer';
 
 function GcsSetting(props) {
   const { t, adminAppContainer } = props;
+  const { gcsUseOnlyEnvVars } = adminAppContainer.state;
 
   return (
-    <table className="table settings-table">
-      <colgroup>
-        <col className="item-name" />
-        <col className="from-db" />
-        <col className="from-env-vars" />
-      </colgroup>
-      <thead>
-        <tr><th></th><th>Database</th><th>Environment variables</th></tr>
-      </thead>
-      <tbody>
-        <tr>
-          <th>Api Key Json Path</th>
-          <td>
-            <input
-              className="form-control"
-              type="text"
-              name="gcsApiKeyJsonPath"
-              defaultValue={adminAppContainer.state.gcsApiKeyJsonPath}
-              onChange={e => adminAppContainer.changeGcsApiKeyJsonPath(e.target.value)}
-            />
-          </td>
-          <td>
-            <input
-              className="form-control"
-              type="text"
-              value={adminAppContainer.state.envGcsApiKeyJsonPath || ''}
-              readOnly
-              tabIndex="-1"
-            />
-            <p className="form-text text-muted">
-              {/* eslint-disable-next-line react/no-danger */}
-              <small dangerouslySetInnerHTML={{ __html: t('admin:app_setting.use_env_var_if_empty', { variable: 'GCS_API_KEY_JSON_PATH' }) }} />
-            </p>
-          </td>
-        </tr>
-        <tr>
-          <th>{t('admin:app_setting.bucket_name')}</th>
-          <td>
-            <input
-              className="form-control"
-              type="text"
-              name="gcsBucket"
-              defaultValue={adminAppContainer.state.gcsBucket}
-              onChange={e => adminAppContainer.changeGcsBucket(e.target.value)}
-            />
-          </td>
-          <td>
-            <input
-              className="form-control"
-              type="text"
-              value={adminAppContainer.state.envGcsBucket || ''}
-              readOnly
-              tabIndex="-1"
-            />
-            <p className="form-text text-muted">
-              {/* eslint-disable-next-line react/no-danger */}
-              <small dangerouslySetInnerHTML={{ __html: t('admin:app_setting.use_env_var_if_empty', { variable: 'GCS_BUCKET' }) }} />
-            </p>
-          </td>
-        </tr>
-        <tr>
-          <th>Name Space</th>
-          <td>
-            <input
-              className="form-control"
-              type="text"
-              name="gcsUploadNamespace"
-              defaultValue={adminAppContainer.state.gcsUploadNamespace}
-              onChange={e => adminAppContainer.changeGcsUploadNamespace(e.target.value)}
-            />
-          </td>
-          <td>
-            <input
-              className="form-control"
-              type="text"
-              value={adminAppContainer.state.envGcsUploadNamespace || ''}
-              readOnly
-              tabIndex="-1"
-            />
-            <p className="form-text text-muted">
-              {/* eslint-disable-next-line react/no-danger */}
-              <small dangerouslySetInnerHTML={{ __html: t('admin:app_setting.use_env_var_if_empty', { variable: 'GCS_UPLOAD_NAMESPACE' }) }} />
-            </p>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <>
+      {gcsUseOnlyEnvVars && (
+        <p
+          className="alert alert-info"
+          // [TODO GW-4194] rename env var
+          dangerouslySetInnerHTML={{ __html: t('admin:app_setting.note_for_the_only_env_option', { env: 'IS_GCS_ENV_PRIORITIZED' }) }}
+        />
+      )}
+      <table className="table settings-table">
+        <colgroup>
+          <col className="item-name" />
+          <col className="from-db" />
+          <col className="from-env-vars" />
+        </colgroup>
+        <thead>
+          <tr>
+            <th></th>
+            <th>Database</th>
+            <th>Environment variables</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th>Api Key Json Path</th>
+            <td>
+              <input
+                className="form-control"
+                type="text"
+                name="gcsApiKeyJsonPath"
+                readOnly={gcsUseOnlyEnvVars}
+                defaultValue={adminAppContainer.state.gcsApiKeyJsonPath}
+                onChange={e => adminAppContainer.changeGcsApiKeyJsonPath(e.target.value)}
+              />
+            </td>
+            <td>
+              <input className="form-control" type="text" value={adminAppContainer.state.envGcsApiKeyJsonPath || ''} readOnly tabIndex="-1" />
+              <p className="form-text text-muted">
+                {/* eslint-disable-next-line react/no-danger */}
+                <small dangerouslySetInnerHTML={{ __html: t('admin:app_setting.use_env_var_if_empty', { variable: 'GCS_API_KEY_JSON_PATH' }) }} />
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <th>{t('admin:app_setting.bucket_name')}</th>
+            <td>
+              <input
+                className="form-control"
+                type="text"
+                name="gcsBucket"
+                readOnly={gcsUseOnlyEnvVars}
+                defaultValue={adminAppContainer.state.gcsBucket}
+                onChange={e => adminAppContainer.changeGcsBucket(e.target.value)}
+              />
+            </td>
+            <td>
+              <input className="form-control" type="text" value={adminAppContainer.state.envGcsBucket || ''} readOnly tabIndex="-1" />
+              <p className="form-text text-muted">
+                {/* eslint-disable-next-line react/no-danger */}
+                <small dangerouslySetInnerHTML={{ __html: t('admin:app_setting.use_env_var_if_empty', { variable: 'GCS_BUCKET' }) }} />
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <th>Name Space</th>
+            <td>
+              <input
+                className="form-control"
+                type="text"
+                name="gcsUploadNamespace"
+                readOnly={gcsUseOnlyEnvVars}
+                defaultValue={adminAppContainer.state.gcsUploadNamespace}
+                onChange={e => adminAppContainer.changeGcsUploadNamespace(e.target.value)}
+              />
+            </td>
+            <td>
+              <input className="form-control" type="text" value={adminAppContainer.state.envGcsUploadNamespace || ''} readOnly tabIndex="-1" />
+              <p className="form-text text-muted">
+                {/* eslint-disable-next-line react/no-danger */}
+                <small dangerouslySetInnerHTML={{ __html: t('admin:app_setting.use_env_var_if_empty', { variable: 'GCS_UPLOAD_NAMESPACE' }) }} />
+              </p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </>
   );
 
 }

src/client/js/services/AdminAppContainer.js

@@ -97,6 +97,7 @@ export default class AdminAppContainer extends Container {
       s3Bucket: appSettingsParams.s3Bucket,
       s3AccessKeyId: appSettingsParams.s3AccessKeyId,
       s3SecretAccessKey: appSettingsParams.s3SecretAccessKey,
+      gcsUseOnlyEnvVars: appSettingsParams.gcsUseOnlyEnvVars,
       gcsApiKeyJsonPath: appSettingsParams.gcsApiKeyJsonPath,
       gcsBucket: appSettingsParams.gcsBucket,
       gcsUploadNamespace: appSettingsParams.gcsUploadNamespace,