Pass config to context as an object

ansible · Apr 5, 2021 · 0e4d0c3 · 0e4d0c3
1 parent 9c39b93
commit 0e4d0c3
Show file tree

Hide file tree

Showing 44 changed files with 71 additions and 72 deletions.
diff --git a/awx/ui_next/src/components/AppContainer/AppContainer.jsx b/awx/ui_next/src/components/AppContainer/AppContainer.jsx
@@ -87,8 +87,9 @@ function useStorage(key) {
 
 function AppContainer({ i18n, navRouteConfig = [], children }) {
   const history = useHistory();
-  const [config] = useConfig();
+  const config = useConfig();
 
+  const isReady = !!config.license_info;
   const isSidebarVisible = useAuthorizedPath();
   const [isAboutModalOpen, setIsAboutModalOpen] = useState(false);
 
@@ -153,7 +154,7 @@ function AppContainer({ i18n, navRouteConfig = [], children }) {
     />
   );
 
-  const simpleHeader = (
+  const simpleHeader = config.isLoading ? null : (
     <PageHeader
       logo={<BrandLogo />}
       headerTools={
@@ -197,7 +198,7 @@ function AppContainer({ i18n, navRouteConfig = [], children }) {
         header={isSidebarVisible ? header : simpleHeader}
         sidebar={isSidebarVisible && sidebar}
       >
-        {Object.keys(config).length ? children : null}
+        {isReady ? children : null}
       </Page>
       <About
         version={config?.version}

diff --git a/awx/ui_next/src/components/AppContainer/AppContainer.test.jsx b/awx/ui_next/src/components/AppContainer/AppContainer.test.jsx
@@ -12,10 +12,6 @@ jest.mock('../../api');
 
 describe('<AppContainer />', () => {
   const version = '222';
-  const config = {
-    ansible_version,
-    version,
-  };
 
   beforeEach(() => {
     ConfigAPI.read.mockResolvedValue({
@@ -56,10 +52,7 @@ describe('<AppContainer />', () => {
           {routeConfig.map(({ groupId }) => (
             <div key={groupId} id={groupId} />
           ))}
-        </AppContainer>,
-        {
-          context: { config },
-        }
+        </AppContainer>
       );
     });
     wrapper.update();
@@ -88,7 +81,7 @@ describe('<AppContainer />', () => {
     let wrapper;
     await act(async () => {
       wrapper = mountWithContexts(<AppContainer />, {
-        context: { config },
+        context: { config: { version } },
       });
     });
 
@@ -116,12 +109,7 @@ describe('<AppContainer />', () => {
 
     let wrapper;
     await act(async () => {
-      wrapper = mountWithContexts(<AppContainer />, {
-        context: {
-          ansible_version,
-          version,
-        },
-      });
+      wrapper = mountWithContexts(<AppContainer />);
     });
 
     // open the user menu

diff --git a/awx/ui_next/src/components/InstanceToggle/InstanceToggle.jsx b/awx/ui_next/src/components/InstanceToggle/InstanceToggle.jsx
@@ -15,7 +15,7 @@ function InstanceToggle({
   onToggle,
   i18n,
 }) {
-  const [{ me = {} }] = useConfig();
+  const { me = {} } = useConfig();
   const [isEnabled, setIsEnabled] = useState(instance.enabled);
   const [showError, setShowError] = useState(false);
 

diff --git a/awx/ui_next/src/components/PromptDetail/PromptProjectDetail.jsx b/awx/ui_next/src/components/PromptDetail/PromptProjectDetail.jsx
@@ -95,7 +95,7 @@ function PromptProjectDetail({ i18n, resource }) {
         value={`${scm_update_cache_timeout} ${i18n._(t`Seconds`)}`}
       />
       <Config>
-        {([{ project_base_dir }]) => (
+        {({ project_base_dir }) => (
           <Detail
             label={i18n._(t`Project Base Path`)}
             value={project_base_dir}

diff --git a/awx/ui_next/src/contexts/Config.jsx b/awx/ui_next/src/contexts/Config.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import { useLocation, useRouteMatch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -26,6 +26,7 @@ export const ConfigProvider = withI18n()(({ i18n, children }) => {
 
   const {
     error: configError,
+    isLoading,
     request,
     result: config,
     setValue: setConfig,
@@ -58,8 +59,14 @@ export const ConfigProvider = withI18n()(({ i18n, children }) => {
     }
   }, [error]);
 
+  const value = useMemo(() => ({ ...config, isLoading, setConfig }), [
+    config,
+    isLoading,
+    setConfig,
+  ]);
+
   return (
-    <ConfigContext.Provider value={[config, setConfig]}>
+    <ConfigContext.Provider value={value}>
       {error && (
         <AlertModal
           isOpen={error}
@@ -78,10 +85,9 @@ export const ConfigProvider = withI18n()(({ i18n, children }) => {
 });
 
 export const useAuthorizedPath = () => {
-  const [config] = useConfig();
+  const config = useConfig();
   const subscriptionMgmtRoute = useRouteMatch({
     path: '/subscription_management',
   });
-
   return !!config.license_info?.valid_key && !subscriptionMgmtRoute;
 };
diff --git a/awx/ui_next/src/screens/Credential/CredentialEdit/CredentialEdit.jsx b/awx/ui_next/src/screens/Credential/CredentialEdit/CredentialEdit.jsx
@@ -18,7 +18,7 @@ import { useConfig } from '../../../contexts/Config';
 function CredentialEdit({ credential }) {
   const history = useHistory();
   const { id: credId } = useParams();
-  const [{ me = {} }] = useConfig();
+  const { me = {} } = useConfig();
   const [isOrgLookupDisabled, setIsOrgLookupDisabled] = useState(false);
 
   const { error: submitError, request: submitRequest, result } = useRequest(

diff --git a/awx/ui_next/src/screens/Credential/Credentials.jsx b/awx/ui_next/src/screens/Credential/Credentials.jsx
@@ -40,7 +40,7 @@ function Credentials({ i18n }) {
       />
       <Switch>
         <Route path="/credentials/add">
-          <Config>{([{ me }]) => <CredentialAdd me={me || {}} />}</Config>
+          <Config>{({ me }) => <CredentialAdd me={me || {}} />}</Config>
         </Route>
         <Route path="/credentials/:id">
           <Credential setBreadcrumb={buildBreadcrumbConfig} />

diff --git a/awx/ui_next/src/screens/Host/Hosts.jsx b/awx/ui_next/src/screens/Host/Hosts.jsx
@@ -44,7 +44,7 @@ function Hosts({ i18n }) {
         </Route>
         <Route path="/hosts/:id">
           <Config>
-            {([{ me }]) => (
+            {({ me }) => (
               <Host setBreadcrumb={buildBreadcrumbConfig} me={me || {}} />
             )}
           </Config>

diff --git a/awx/ui_next/src/screens/Inventory/Inventories.jsx b/awx/ui_next/src/screens/Inventory/Inventories.jsx
@@ -137,7 +137,7 @@ function Inventories({ i18n }) {
         </Route>
         <Route path="/inventories/inventory/:id">
           <Config>
-            {([{ me }]) => (
+            {({ me }) => (
               <Inventory setBreadcrumb={setBreadcrumbConfig} me={me || {}} />
             )}
           </Config>

diff --git a/awx/ui_next/src/screens/Inventory/InventorySources/InventorySources.jsx b/awx/ui_next/src/screens/Inventory/InventorySources/InventorySources.jsx
@@ -13,7 +13,7 @@ function InventorySources({ inventory, setBreadcrumb }) {
       </Route>
       <Route path="/inventories/inventory/:id/sources/:sourceId">
         <Config>
-          {([{ me }]) => (
+          {({ me }) => (
             <InventorySource
               inventory={inventory}
               setBreadcrumb={setBreadcrumb}

diff --git a/awx/ui_next/src/screens/Organization/Organizations.jsx b/awx/ui_next/src/screens/Organization/Organizations.jsx
@@ -55,7 +55,7 @@ function Organizations({ i18n }) {
         </Route>
         <Route path={`${match.path}/:id`}>
           <Config>
-            {([{ me }]) => (
+            {({ me }) => (
               <Organization setBreadcrumb={setBreadcrumb} me={me || {}} />
             )}
           </Config>

diff --git a/awx/ui_next/src/screens/Project/Project.jsx b/awx/ui_next/src/screens/Project/Project.jsx
@@ -26,7 +26,7 @@ import ProjectJobTemplatesList from './ProjectJobTemplatesList';
 import { OrganizationsAPI, ProjectsAPI } from '../../api';
 
 function Project({ i18n, setBreadcrumb }) {
-  const [{ me = {} }] = useConfig();
+  const { me = {} } = useConfig();
   const { id } = useParams();
   const location = useLocation();
 

diff --git a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx b/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx
@@ -135,7 +135,7 @@ function ProjectDetail({ project, i18n }) {
           isDefaultEnvironment
         />
         <Config>
-          {([{ project_base_dir }]) => (
+          {({ project_base_dir }) => (
             <Detail
               label={i18n._(t`Project Base Path`)}
               value={project_base_dir}

diff --git a/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx b/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx
@@ -298,7 +298,7 @@ function ProjectFormFields({
 function ProjectForm({ i18n, project, submitError, ...props }) {
   const { handleCancel, handleSubmit } = props;
   const { summary_fields = {} } = project;
-  const [{ project_base_dir, project_local_paths }] = useConfig();
+  const { project_base_dir, project_local_paths } = useConfig();
   const [contentError, setContentError] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [scmSubFormState, setScmSubFormState] = useState({

diff --git a/awx/ui_next/src/screens/Setting/ActivityStream/ActivityStream.jsx b/awx/ui_next/src/screens/Setting/ActivityStream/ActivityStream.jsx
@@ -10,7 +10,7 @@ import ActivityStreamEdit from './ActivityStreamEdit';
 
 function ActivityStream({ i18n }) {
   const baseURL = '/settings/activity_stream';
-  const [{ me }] = useConfig();
+  const { me } = useConfig();
 
   return (
     <PageSection>

diff --git a/awx/ui_next/src/screens/Setting/ActivityStream/ActivityStreamDetail/ActivityStreamDetail.jsx b/awx/ui_next/src/screens/Setting/ActivityStream/ActivityStreamDetail/ActivityStreamDetail.jsx
@@ -16,7 +16,7 @@ import { SettingsAPI } from '../../../../api';
 import { SettingDetail } from '../../shared';
 
 function ActivityStreamDetail({ i18n }) {
-  const [{ me }] = useConfig();
+  const { me } = useConfig();
   const { GET: options } = useSettings();
 
   const { isLoading, error, request, result: activityStream } = useRequest(

diff --git a/awx/ui_next/src/screens/Setting/AzureAD/AzureADDetail/AzureADDetail.jsx b/awx/ui_next/src/screens/Setting/AzureAD/AzureADDetail/AzureADDetail.jsx
@@ -16,7 +16,7 @@ import { SettingsAPI } from '../../../../api';
 import { SettingDetail } from '../../shared';
 
 function AzureADDetail({ i18n }) {
-  const [{ me }] = useConfig();
+  const { me } = useConfig();
   const { GET: options } = useSettings();
 
   const { isLoading, error, request, result: azure } = useRequest(

diff --git a/awx/ui_next/src/screens/Setting/GitHub/GitHubDetail/GitHubDetail.jsx b/awx/ui_next/src/screens/Setting/GitHub/GitHubDetail/GitHubDetail.jsx
@@ -16,7 +16,7 @@ import { SettingsAPI } from '../../../../api';
 import { SettingDetail } from '../../shared';
 
 function GitHubDetail({ i18n }) {
-  const [{ me }] = useConfig();
+  const { me } = useConfig();
   const { GET: options } = useSettings();
 
   const baseURL = '/settings/github';

diff --git a/awx/ui_next/src/screens/Setting/GoogleOAuth2/GoogleOAuth2Detail/GoogleOAuth2Detail.jsx b/awx/ui_next/src/screens/Setting/GoogleOAuth2/GoogleOAuth2Detail/GoogleOAuth2Detail.jsx
@@ -16,7 +16,7 @@ import { useSettings } from '../../../../contexts/Settings';
 import { SettingDetail } from '../../shared';
 
 function GoogleOAuth2Detail({ i18n }) {
-  const [{ me }] = useConfig();
+  const { me } = useConfig();
   const { GET: options } = useSettings();
 
   const { isLoading, error, request, result: googleOAuth2 } = useRequest(

diff --git a/awx/ui_next/src/screens/Setting/Jobs/JobsDetail/JobsDetail.jsx b/awx/ui_next/src/screens/Setting/Jobs/JobsDetail/JobsDetail.jsx
@@ -17,7 +17,7 @@ import { sortNestedDetails } from '../../shared/settingUtils';
 import { SettingDetail } from '../../shared';
 
 function JobsDetail({ i18n }) {
-  const [{ me }] = useConfig();
+  const { me } = useConfig();
   const { GET: options } = useSettings();
 
   const { isLoading, error, request, result: jobs } = useRequest(

diff --git a/awx/ui_next/src/screens/Setting/LDAP/LDAPDetail/LDAPDetail.jsx b/awx/ui_next/src/screens/Setting/LDAP/LDAPDetail/LDAPDetail.jsx
@@ -26,7 +26,7 @@ function filterByPrefix(data, prefix) {
 }
 
 function LDAPDetail({ i18n }) {
-  const [{ me }] = useConfig();
+  const { me } = useConfig();
   const { GET: options } = useSettings();
   const {
     path,

diff --git a/awx/ui_next/src/screens/Setting/Logging/Logging.jsx b/awx/ui_next/src/screens/Setting/Logging/Logging.jsx
@@ -10,7 +10,7 @@ import LoggingEdit from './LoggingEdit';
 
 function Logging({ i18n }) {
   const baseURL = '/settings/logging';
-  const [{ me }] = useConfig();
+  const { me } = useConfig();
 
   return (
     <PageSection>

diff --git a/awx/ui_next/src/screens/Setting/Logging/LoggingDetail/LoggingDetail.jsx b/awx/ui_next/src/screens/Setting/Logging/LoggingDetail/LoggingDetail.jsx
@@ -17,7 +17,7 @@ import { SettingDetail } from '../../shared';
 import { sortNestedDetails, pluck } from '../../shared/settingUtils';
 
 function LoggingDetail({ i18n }) {
-  const [{ me }] = useConfig();
+  const { me } = useConfig();
   const { GET: options } = useSettings();
 
   const { isLoading, error, request, result: logging } = useRequest(

diff --git a/awx/ui_next/src/screens/Setting/MiscSystem/MiscSystem.jsx b/awx/ui_next/src/screens/Setting/MiscSystem/MiscSystem.jsx
@@ -10,7 +10,7 @@ import MiscSystemEdit from './MiscSystemEdit';
 
 function MiscSystem({ i18n }) {
   const baseURL = '/settings/miscellaneous_system';
-  const [{ me }] = useConfig();
+  const { me } = useConfig();
 
   return (
     <PageSection>

diff --git a/awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemDetail/MiscSystemDetail.jsx b/awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemDetail/MiscSystemDetail.jsx
@@ -17,7 +17,7 @@ import { SettingDetail } from '../../shared';
 import { sortNestedDetails, pluck } from '../../shared/settingUtils';
 
 function MiscSystemDetail({ i18n }) {
-  const [{ me }] = useConfig();
+  const { me } = useConfig();
   const { GET: allOptions } = useSettings();
 
   const { isLoading, error, request, result: system } = useRequest(

diff --git a/awx/ui_next/src/screens/Setting/RADIUS/RADIUSDetail/RADIUSDetail.jsx b/awx/ui_next/src/screens/Setting/RADIUS/RADIUSDetail/RADIUSDetail.jsx
@@ -16,7 +16,7 @@ import { useSettings } from '../../../../contexts/Settings';
 import { SettingDetail } from '../../shared';
 
 function RADIUSDetail({ i18n }) {
-  const [{ me }] = useConfig();
+  const { me } = useConfig();
   const { GET: options } = useSettings();
 
   const { isLoading, error, request, result: radius } = useRequest(

diff --git a/awx/ui_next/src/screens/Setting/SAML/SAMLDetail/SAMLDetail.jsx b/awx/ui_next/src/screens/Setting/SAML/SAMLDetail/SAMLDetail.jsx
@@ -16,7 +16,7 @@ import { useSettings } from '../../../../contexts/Settings';
 import { SettingDetail } from '../../shared';
 
 function SAMLDetail({ i18n }) {
-  const [{ me }] = useConfig();
+  const { me } = useConfig();
   const { GET: options } = useSettings();
   options.SOCIAL_AUTH_SAML_SP_PUBLIC_CERT.type = 'certificate';
 

diff --git a/awx/ui_next/src/screens/Setting/SettingList.jsx b/awx/ui_next/src/screens/Setting/SettingList.jsx
@@ -49,7 +49,7 @@ const CardDescription = styled.div`
 `;
 
 function SettingList({ i18n }) {
-  const [config] = useConfig();
+  const config = useConfig();
   const settingRoutes = [
     {
       header: i18n._(t`Authentication`),

diff --git a/awx/ui_next/src/screens/Setting/Settings.jsx b/awx/ui_next/src/screens/Setting/Settings.jsx
@@ -26,7 +26,7 @@ import { SettingsAPI } from '../../api';
 import useRequest from '../../util/useRequest';
 
 function Settings({ i18n }) {
-  const [{ license_info = {}, me }] = useConfig();
+  const { license_info = {}, me } = useConfig();
 
   const { request, result, isLoading, error } = useRequest(
     useCallback(async () => {

diff --git a/awx/ui_next/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.jsx b/awx/ui_next/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.jsx
@@ -19,7 +19,7 @@ import {
 } from '../../../../util/dates';
 
 function SubscriptionDetail({ i18n }) {
-  const [{ license_info, version }] = useConfig();
+  const { license_info, version } = useConfig();
   const baseURL = '/settings/subscription';
   const tabsArray = [
     {

diff --git a/awx/ui_next/src/screens/Setting/Subscription/SubscriptionEdit/AnalyticsStep.jsx b/awx/ui_next/src/screens/Setting/Subscription/SubscriptionEdit/AnalyticsStep.jsx
@@ -13,7 +13,7 @@ import { useConfig } from '../../../../contexts/Config';
 const ANALYTICSLINK = 'https://www.ansible.com/products/automation-analytics';
 
 function AnalyticsStep({ i18n }) {
-  const [config] = useConfig();
+  const config = useConfig();
   const [manifest] = useField({
     name: 'manifest_file',
   });

diff --git a/awx/ui_next/src/screens/Setting/Subscription/SubscriptionEdit/EulaStep.jsx b/awx/ui_next/src/screens/Setting/Subscription/SubscriptionEdit/EulaStep.jsx
@@ -8,7 +8,7 @@ import { useConfig } from '../../../../contexts/Config';
 import { CheckboxField } from '../../../../components/FormField';
 
 function EulaStep({ i18n }) {
-  const [{ eula, me }] = useConfig();
+  const { eula, me } = useConfig();
   const [, meta] = useField('eula');
   const isValid = !(meta.touched && meta.error);
   return (