[PLAT-14098]: Updating yb.runtime_conf_ui.tag_filter with appropriate…

… tags value does not display the flags accordingly

Summary:
This diff fixes
1. Updating yb.runtime_conf_ui.tag_filter fails
2. “yb.runtime_conf_ui.tag_filter" is not displaying the BETA and INTERNAL flags in the ui , even if it is set to ["PUBLIC","BETA","INTERNAL"]. but , it is displayed if we switch tabs. This ensures to get the yb.runtime_conf_ui.tag_filter
value and then filter runtime configs accordingly. It should work regardless of user being same tab or different tab

Test Plan:
Please refer to the video
{F257807}

Reviewers: jmak, kkannan

Reviewed By: jmak

Subscribers: yugaware

Differential Revision: https://phorge.dev.yugabyte.com/D35905

managed/ui/src/actions/customers.js

@@ -131,6 +131,9 @@ export const FETCH_CUSTOMER_RUNTIME_CONFIGS_RESPONSE = 'FETCH_CUSTOMER_RUNTIME_C
 export const FETCH_PROVIDER_RUNTIME_CONFIGS = 'FETCH_PROVIDER_RUNTIME_CONFIGS';
 export const FETCH_PROVIDER_RUNTIME_CONFIGS_RESPONSE = 'FETCH_PROVIDER_RUNTIME_CONFIGS_RESPONSE';
 
+export const GET_RUNTIME_CONFIG_KEY = 'GET_RUNTIME_CONFIG_KEY';
+export const GET_RUNTIME_CONFIG_KEY_RESPONSE = 'GET_RUNTIME_CONFIG_KEY_RESPONSE';
+
 export const SET_RUNTIME_CONFIG = 'SET_RUNTIME_CONFIG';
 export const SET_RUNTIME_CONFIG_RESPONSE = 'SET_RUNTIME_CONFIG_RESPONSE';
 
@@ -1022,6 +1025,22 @@ export function fetchCustomerRunTimeConfigsResponse(response) {
   };
 }
 
+export function getRunTimeConfigKey({ key, scope = DEFAULT_RUNTIME_GLOBAL_SCOPE }) {
+  const cUUID = localStorage.getItem('customerId');
+  const request = axios.get(`${ROOT_URL}/customers/${cUUID}/runtime_config/${scope}/key/${key}`);
+  return {
+    type: GET_RUNTIME_CONFIG_KEY,
+    payload: request
+  };
+}
+
+export function getRunTimeConfigKeyResponse(response) {
+  return {
+    type: GET_RUNTIME_CONFIG_KEY_RESPONSE,
+    payload: response
+  };
+}
+
 export function setRunTimeConfig({ key, value, scope = DEFAULT_RUNTIME_GLOBAL_SCOPE }) {
   const cUUID = localStorage.getItem('customerId');
   const headers = {

managed/ui/src/components/administration/Administration.tsx

@@ -95,15 +95,10 @@ export const Administration: FC<RouteComponentProps<{}, RouteParams>> = ({ param
     test['enableRunTimeConfig'] ||
     released['enableRunTimeConfig'];
 
-  const configTagFilter = globalRuntimeConfigs?.data?.configEntries?.find(
-    (c: any) => c.key === 'yb.runtime_conf_ui.tag_filter'
-  )?.value;
-
   const defaultTab = isAvailable(currentCustomer.data.features, 'administration.highAvailability')
     ? AdministrationTabs.HA
     : AdministrationTabs.AC;
 
-
   useEffect(() => {
     showOrRedirect(currentCustomer.data.features, 'menu.administration');
     // redirect to a proper url on navigation from sidebar "Admin" button (the "/admin" route)
@@ -128,9 +123,7 @@ export const Administration: FC<RouteComponentProps<{}, RouteParams>> = ({ param
   const getHighAvailabilityTab = () => {
     return isAvailable(currentCustomer.data.features, 'administration.highAvailability') ? (
       <Tab eventKey="ha" title="High Availability" key="high-availability">
-        <RbacValidator
-          accessRequiredOn={ApiPermissionMap.GET_HA_CONFIG}
-        >
+        <RbacValidator accessRequiredOn={ApiPermissionMap.GET_HA_CONFIG}>
           <YBTabsPanel
             defaultTab={HighAvailabilityTabs.Replication}
             activeTab={params.section}
@@ -154,15 +147,16 @@ export const Administration: FC<RouteComponentProps<{}, RouteParams>> = ({ param
               eventKey={HighAvailabilityTabs.Instances}
               title={
                 <span>
-                  <i className="fa fa-codepen tab-logo" aria-hidden="true"></i> Instance Configuration
+                  <i className="fa fa-codepen tab-logo" aria-hidden="true"></i> Instance
+                  Configuration
                 </span>
               }
               unmountOnExit
             >
               <HAInstancesContainer />
             </Tab>
           </YBTabsPanel>
-        </RbacValidator >
+        </RbacValidator>
       </Tab>
     ) : null;
   };
@@ -187,7 +181,6 @@ export const Administration: FC<RouteComponentProps<{}, RouteParams>> = ({ param
         <RuntimeConfigContainer
           defaultTab={defaultTab}
           activeTab={params.section}
-          configTagFilter={configTagFilter}
           routePrefix={`/admin/${id}/`}
         />
       </Tab>

managed/ui/src/components/advanced/ConfigData.tsx

@@ -11,14 +11,13 @@ import { ResetConfig } from './ResetConfig';
 import { RunTimeConfigData, RunTimeConfigScope } from '../../redesign/utils/dtos';
 import { getPromiseState } from '../../utils/PromiseUtils';
 import { isNonEmptyArray } from '../../utils/ObjectUtils';
-
 import {
   RbacValidator,
   hasNecessaryPerm
 } from '../../redesign/features/rbac/common/RbacApiPermValidator';
-
 import { ApiPermissionMap } from '../../redesign/features/rbac/ApiAndUserPermMapping';
 import { Action } from '../../redesign/features/rbac';
+import { DEFAULT_RUNTIME_GLOBAL_SCOPE } from '../../actions/customers';
 import './AdvancedConfig.scss';
 
 const DEFAULT_RUNTIME_TAG_FILTER = ['PUBLIC'];
@@ -29,34 +28,33 @@ const ConfigScopePriority = {
   PROVIDER: 4
 };
 
-interface GlobalConfigProps {
+interface ConfigDataProps {
+  getRuntimeConfig: (key: string, scope?: string) => void;
   setRuntimeConfig: (key: string, value: string, scope?: string) => void;
   deleteRunTimeConfig: (key: string, scope?: string) => void;
   scope: string;
-  configTagFilter: string[] | undefined;
   universeUUID?: string;
   providerUUID?: string;
   customerUUID?: string;
 }
 
-export const ConfigData: FC<GlobalConfigProps> = ({
+export const ConfigData: FC<ConfigDataProps> = ({
+  getRuntimeConfig,
   setRuntimeConfig,
   deleteRunTimeConfig,
   scope,
-  configTagFilter,
   universeUUID,
   providerUUID,
   customerUUID
 }) => {
   const { t } = useTranslation();
-  const tagFilter = configTagFilter ?? DEFAULT_RUNTIME_TAG_FILTER;
+  const [tagFilter, setTagFilter] = useState<string[]>(DEFAULT_RUNTIME_TAG_FILTER);
   const runtimeConfigs = useSelector((state: any) => state.customer.runtimeConfigs);
   const runtimeConfigsKeyMetadata = useSelector(
     (state: any) => state.customer.runtimeConfigsKeyMetadata
   );
   // Helps in deciding if the logged in user can mutate the config values
   const [searchText, setSearchText] = useState<string>('');
-  const isScopeMutable = runtimeConfigs?.data?.mutableScope;
   const [editConfig, setEditConfig] = useState<boolean>(false);
   const [resetConfig, setResetConfig] = useState<boolean>(false);
   const [showOverridenValues, setShowOverridenValues] = useState<boolean>(false);
@@ -115,7 +113,21 @@ export const ConfigData: FC<GlobalConfigProps> = ({
         });
       setListItems(runtimeConfigItems);
     }
-  }, [scope, universeUUID, providerUUID, customerUUID, runtimeConfigEntries]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [scope, universeUUID, providerUUID, customerUUID, runtimeConfigEntries, tagFilter]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    fetchUiTagFilter();
+  }, [scope]);
+
+  const fetchUiTagFilter = async () => {
+    const uiTagFilterResponse: any = await getRuntimeConfig(
+      'yb.runtime_conf_ui.tag_filter',
+      DEFAULT_RUNTIME_GLOBAL_SCOPE
+    );
+    if (isNonEmptyArray(uiTagFilterResponse?.payload?.data)) {
+      setTagFilter(uiTagFilterResponse?.payload?.data);
+    }
+  };
 
   const openEditConfig = (row: any) => {
     setEditConfig(true);
@@ -282,6 +294,7 @@ export const ConfigData: FC<GlobalConfigProps> = ({
           configData={configData}
           onHide={() => setEditConfig(false)}
           setRuntimeConfig={setRuntimeConfig}
+          fetchUiTagFilter={fetchUiTagFilter}
           scope={scope}
           universeUUID={universeUUID}
           providerUUID={providerUUID}
@@ -293,6 +306,7 @@ export const ConfigData: FC<GlobalConfigProps> = ({
           configData={configData}
           onHide={() => setResetConfig(false)}
           deleteRunTimeConfig={deleteRunTimeConfig}
+          fetchUiTagFilter={fetchUiTagFilter}
           scope={scope}
           universeUUID={universeUUID}
           providerUUID={providerUUID}

managed/ui/src/components/advanced/EditConfig.tsx

@@ -8,6 +8,7 @@ import { YBFormInput, YBToggle } from '../common/forms/fields';
 import { DEFAULT_RUNTIME_GLOBAL_SCOPE } from '../../actions/customers';
 import { RunTimeConfigData, RunTimeConfigScope } from '../../redesign/utils/dtos';
 import { isEmptyObject } from '../../utils/ObjectUtils';
+import { RuntimeConfigKey } from '../../redesign/helpers/constants';
 
 const CONFIG_DATA_TYPE_TO_TOOLTIP_MESSAGE = {
   Bytes: 'BytesTooltipMessage',
@@ -18,9 +19,12 @@ const CONFIG_DATA_TYPE_TO_TOOLTIP_MESSAGE = {
   'String List': 'StringListTooltipMessage'
 };
 
+const STRING_CONVERSION_NEEDED = ['Boolean', 'Tags List'];
+
 interface EditConfigData {
   configData: RunTimeConfigData;
   onHide: () => void;
+  fetchUiTagFilter: () => void;
   setRuntimeConfig: (key: string, value: string, scope?: string) => void;
   scope?: string;
   universeUUID?: string;
@@ -32,6 +36,7 @@ export const EditConfig: FC<EditConfigData> = ({
   configData,
   onHide,
   setRuntimeConfig,
+  fetchUiTagFilter,
   scope,
   universeUUID,
   providerUUID,
@@ -60,9 +65,14 @@ export const EditConfig: FC<EditConfigData> = ({
         configScope = customerUUID!;
       }
 
-      const configValue =
-        configData.type === 'Boolean' ? values.config_value.toString() : values.config_value;
+      const configValue = STRING_CONVERSION_NEEDED.includes(configData.type)
+        ? values.config_value.toString()
+        : values.config_value;
       await setRuntimeConfig(configData.configKey, configValue, configScope);
+      // Refetch the conf tags to filter runtime config flags accordingly
+      if (configData.configKey === RuntimeConfigKey.UI_TAG_FILTER) {
+        fetchUiTagFilter();
+      }
     }
     onHide();
   };

managed/ui/src/components/advanced/ResetConfig.tsx

@@ -7,10 +7,12 @@ import { RunTimeConfigData, RunTimeConfigScope } from '../../redesign/utils/dtos
 import { DEFAULT_RUNTIME_GLOBAL_SCOPE } from '../../actions/customers';
 import { YBModalForm } from '../common/forms';
 import { YBFormInput } from '../common/forms/fields';
+import { RuntimeConfigKey } from '../../redesign/helpers/constants';
 
 interface ResetConfigData {
   configData: RunTimeConfigData;
   onHide: () => void;
+  fetchUiTagFilter: () => void;
   deleteRunTimeConfig: (key: string, scope?: string) => void;
   scope?: string;
   universeUUID?: string;
@@ -21,6 +23,7 @@ interface ResetConfigData {
 export const ResetConfig: FC<ResetConfigData> = ({
   configData,
   onHide,
+  fetchUiTagFilter,
   deleteRunTimeConfig,
   scope,
   universeUUID,
@@ -42,6 +45,10 @@ export const ResetConfig: FC<ResetConfigData> = ({
       scopeValue = customerUUID!;
     }
     await deleteRunTimeConfig(configData.configKey, scopeValue);
+    // Refetch the conf tags to filter runtime config flags accordingly
+    if (configData.configKey === RuntimeConfigKey.UI_TAG_FILTER) {
+      fetchUiTagFilter();
+    }
     onHide();
   };
   return (

managed/ui/src/components/advanced/RuntimeConfig/CustomerRuntimeConfig.tsx

@@ -11,7 +11,7 @@ import { YBErrorIndicator, YBLoading } from '../../common/indicators';
 import '../AdvancedConfig.scss';
 
 export const CustomerRuntimeConfig: FC<RuntimeConfigScopeProps> = ({
-  configTagFilter,
+  getRuntimeConfig,
   fetchRuntimeConfigs,
   setRuntimeConfig,
   deleteRunTimeConfig,
@@ -101,7 +101,7 @@ export const CustomerRuntimeConfig: FC<RuntimeConfigScopeProps> = ({
         deleteRunTimeConfig={deleteRunTimeConfig}
         scope={RunTimeConfigScope.CUSTOMER}
         customerUUID={customerUUID}
-        configTagFilter={configTagFilter}
+        getRuntimeConfig={getRuntimeConfig}
       />
     </div>
   );

managed/ui/src/components/advanced/RuntimeConfig/GlobalRuntimeConfig.tsx

@@ -5,7 +5,7 @@ import { ConfigData } from '../ConfigData';
 import '../AdvancedConfig.scss';
 
 export const GlobalRuntimeConfig: FC<RuntimeConfigScopeProps> = ({
-  configTagFilter,
+  getRuntimeConfig,
   fetchRuntimeConfigs,
   setRuntimeConfig,
   deleteRunTimeConfig,
@@ -19,10 +19,10 @@ export const GlobalRuntimeConfig: FC<RuntimeConfigScopeProps> = ({
   return (
     <div className="global-runtime-config-container">
       <ConfigData
+        getRuntimeConfig={getRuntimeConfig}
         setRuntimeConfig={setRuntimeConfig}
         deleteRunTimeConfig={deleteRunTimeConfig}
         scope={RunTimeConfigScope.GLOBAL}
-        configTagFilter={configTagFilter}
       />
     </div>
   );

managed/ui/src/components/advanced/RuntimeConfig/ProviderRuntimeConfig.tsx

@@ -10,7 +10,7 @@ import { YBErrorIndicator, YBLoading } from '../../common/indicators';
 import '../AdvancedConfig.scss';
 
 export const ProviderRuntimeConfig: FC<RuntimeConfigScopeProps> = ({
-  configTagFilter,
+  getRuntimeConfig,
   fetchRuntimeConfigs,
   setRuntimeConfig,
   deleteRunTimeConfig,
@@ -84,11 +84,11 @@ export const ProviderRuntimeConfig: FC<RuntimeConfigScopeProps> = ({
         </Dropdown>
       </div>
       <ConfigData
+        getRuntimeConfig={getRuntimeConfig}
         setRuntimeConfig={setRuntimeConfig}
         deleteRunTimeConfig={deleteRunTimeConfig}
         scope={RunTimeConfigScope.PROVIDER}
         providerUUID={providerUUID}
-        configTagFilter={configTagFilter}
       />
     </div>
   );

managed/ui/src/components/advanced/RuntimeConfig/RuntimeConfig.tsx

@@ -18,7 +18,7 @@ interface RuntimeConfigProps {
   activeTab: string;
   defaultTab: string;
   routePrefix: string;
-  configTagFilter: string[];
+  getRuntimeConfig: (key: string, scope?: string) => void;
   fetchRuntimeConfigs: () => void;
   setRuntimeConfig: (key: string, value: string, scope?: string) => void;
   deleteRunTimeConfig: (key: string, scope?: string) => void;
@@ -29,7 +29,7 @@ export const RuntimeConfig: FC<RuntimeConfigProps> = ({
   activeTab,
   defaultTab,
   routePrefix,
-  configTagFilter,
+  getRuntimeConfig,
   fetchRuntimeConfigs,
   setRuntimeConfig,
   deleteRunTimeConfig,
@@ -56,11 +56,11 @@ export const RuntimeConfig: FC<RuntimeConfigProps> = ({
             overrideStyle={{ marginTop: '150px' }}
           >
             <GlobalRuntimeConfig
+              getRuntimeConfig={getRuntimeConfig}
               setRuntimeConfig={setRuntimeConfig}
               deleteRunTimeConfig={deleteRunTimeConfig}
               fetchRuntimeConfigs={fetchRuntimeConfigs}
               resetRuntimeConfigs={resetRuntimeConfigs}
-              configTagFilter={configTagFilter}
             />
           </RbacValidator>
         </Tab>
@@ -75,11 +75,11 @@ export const RuntimeConfig: FC<RuntimeConfigProps> = ({
             overrideStyle={{ marginTop: '50px' }}
           >
             <CustomerRuntimeConfig
+              getRuntimeConfig={getRuntimeConfig}
               setRuntimeConfig={setRuntimeConfig}
               deleteRunTimeConfig={deleteRunTimeConfig}
               fetchRuntimeConfigs={fetchRuntimeConfigs}
               resetRuntimeConfigs={resetRuntimeConfigs}
-              configTagFilter={configTagFilter}
             />
           </RbacValidator>
         </Tab>
@@ -96,11 +96,11 @@ export const RuntimeConfig: FC<RuntimeConfigProps> = ({
             overrideStyle={{ marginTop: '150px' }}
           >
             <UniverseRuntimeConfig
+              getRuntimeConfig={getRuntimeConfig}
               setRuntimeConfig={setRuntimeConfig}
               deleteRunTimeConfig={deleteRunTimeConfig}
               fetchRuntimeConfigs={fetchRuntimeConfigs}
               resetRuntimeConfigs={resetRuntimeConfigs}
-              configTagFilter={configTagFilter}
             />
           </RbacValidator>
         </Tab>
@@ -115,11 +115,11 @@ export const RuntimeConfig: FC<RuntimeConfigProps> = ({
             overrideStyle={{ marginTop: '150px' }}
           >
             <ProviderRuntimeConfig
+              getRuntimeConfig={getRuntimeConfig}
               setRuntimeConfig={setRuntimeConfig}
               deleteRunTimeConfig={deleteRunTimeConfig}
               fetchRuntimeConfigs={fetchRuntimeConfigs}
               resetRuntimeConfigs={resetRuntimeConfigs}
-              configTagFilter={configTagFilter}
             />
           </RbacValidator>
         </Tab>