From 30771559decc5f5047681ab68b93d54aa95fc547 Mon Sep 17 00:00:00 2001
From: Oscar Reyes <oscar-rreyes1@hotmail.com>
Date: Thu, 28 Sep 2023 14:32:56 -0600
Subject: [PATCH] feat(frontend): settings page customization (#3194)

feat: Updating environment settings page
---
 web/src/pages/Settings/Content.tsx             |  4 ++--
 .../providers/DataStore/DataStore.provider.tsx |  3 +--
 .../providers/Settings/Settings.provider.tsx   |  4 ++--
 .../SettingsValues/SettingsValues.provider.tsx | 18 +++++++++---------
 4 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/web/src/pages/Settings/Content.tsx b/web/src/pages/Settings/Content.tsx
index c0dfa184cb..db061e5e72 100644
--- a/web/src/pages/Settings/Content.tsx
+++ b/web/src/pages/Settings/Content.tsx
@@ -7,7 +7,7 @@ import Linter from 'components/Settings/Linter';
 import Polling from 'components/Settings/Polling';
 import TestRunner from 'components/Settings/TestRunner';
 import BetaBadge from 'components/BetaBadge/BetaBadge';
-import {Flag, useCustomization} from 'providers/Customization';
+import {Flag, useCustomization, withCustomization} from 'providers/Customization';
 import * as S from './Settings.styled';
 
 const TabsKeys = {
@@ -71,4 +71,4 @@ const Content = () => {
   );
 };
 
-export default Content;
+export default withCustomization(Content, 'settings');
diff --git a/web/src/providers/DataStore/DataStore.provider.tsx b/web/src/providers/DataStore/DataStore.provider.tsx
index e66b34aa4e..8b7585b24e 100644
--- a/web/src/providers/DataStore/DataStore.provider.tsx
+++ b/web/src/providers/DataStore/DataStore.provider.tsx
@@ -12,8 +12,6 @@ import useDataStoreNotification from './hooks/useDataStoreNotification';
 import {useConfirmationModal} from '../ConfirmationModal/ConfirmationModal.provider';
 import {useSettingsValues} from '../SettingsValues/SettingsValues.provider';
 
-const {useTestConnectionMutation, useUpdateDataStoreMutation, useDeleteDataStoreMutation} = TracetestAPI.instance;
-
 interface IContext {
   isFormValid: boolean;
   isLoading: boolean;
@@ -41,6 +39,7 @@ interface IProps {
 export const useDataStore = () => useContext(Context);
 
 const DataStoreProvider = ({children}: IProps) => {
+  const {useTestConnectionMutation, useUpdateDataStoreMutation, useDeleteDataStoreMutation} = TracetestAPI.instance;
   const {isFetching} = useSettingsValues();
   const [updateDataStore, {isLoading: isLoadingUpdate}] = useUpdateDataStoreMutation();
   const [deleteDataStore] = useDeleteDataStoreMutation();
diff --git a/web/src/providers/Settings/Settings.provider.tsx b/web/src/providers/Settings/Settings.provider.tsx
index 2031f86320..6cf11afab7 100644
--- a/web/src/providers/Settings/Settings.provider.tsx
+++ b/web/src/providers/Settings/Settings.provider.tsx
@@ -5,8 +5,6 @@ import TracetestAPI from 'redux/apis/Tracetest';
 import {TDraftResource} from 'types/Settings.types';
 import {useNotification} from '../Notification/Notification.provider';
 
-const {useCreateSettingMutation, useUpdateSettingMutation} = TracetestAPI.instance;
-
 interface IContext {
   isLoading: boolean;
   onSubmit(resource: TDraftResource[]): void;
@@ -21,6 +19,8 @@ interface IProps {
 export const useSettings = () => useContext(Context);
 
 const SettingsProvider = ({children}: IProps) => {
+  const {useCreateSettingMutation, useUpdateSettingMutation} = TracetestAPI.instance;
+
   const {showNotification} = useNotification();
   const [createSetting, {isLoading: isLoadingCreate}] = useCreateSettingMutation();
   const [updateSetting, {isLoading: isLoadingUpdate}] = useUpdateSettingMutation();
diff --git a/web/src/providers/SettingsValues/SettingsValues.provider.tsx b/web/src/providers/SettingsValues/SettingsValues.provider.tsx
index d75c8b0d8d..d45b5fa0de 100644
--- a/web/src/providers/SettingsValues/SettingsValues.provider.tsx
+++ b/web/src/providers/SettingsValues/SettingsValues.provider.tsx
@@ -15,15 +15,6 @@ import AnalyticsService from 'services/Analytics/Analytics.service';
 import {ConfigMode} from 'types/DataStore.types';
 import Env from 'utils/Env';
 
-const {
-  useGetDataStoreQuery,
-  useGetConfigQuery,
-  useGetDemoQuery,
-  useGetPollingQuery,
-  useGetLinterQuery,
-  useGetTestRunnerQuery,
-} = TracetestAPI.instance;
-
 interface IContext {
   dataStoreConfig: DataStoreConfig;
   isLoading: boolean;
@@ -63,6 +54,15 @@ interface IProps {
 export const useSettingsValues = () => useContext(Context);
 
 const SettingsValuesProvider = ({children}: IProps) => {
+  const {
+    useGetDataStoreQuery,
+    useGetConfigQuery,
+    useGetDemoQuery,
+    useGetPollingQuery,
+    useGetLinterQuery,
+    useGetTestRunnerQuery,
+  } = TracetestAPI.instance;
+
   // DataStore
   const dispatch = useAppDispatch();
   const {data: dataStoreConfig = DataStoreConfig({}), isLoading, isError, isFetching} = useGetDataStoreQuery({});