Refactor config context to return an array of two items: state and se…

…tter Add subscription wizard and redirect logic sub step stage sub modal analytics step Add ouiaId props, Trans tags, and Insight Analytics dashboard img Pass config to context as an object Add "modifier" to list of rules to ignore
ansible · Apr 6, 2021 · 476cfd7 · 476cfd7
1 parent 62be410
commit 476cfd7
Show file tree

Hide file tree

Showing 45 changed files with 2,496 additions and 279 deletions.
diff --git a/awx/ui_next/.eslintrc b/awx/ui_next/.eslintrc
@@ -78,7 +78,9 @@
           "src",
           "theme",
           "gridColumns",
-          "rows"
+          "rows",
+          "href",
+          "modifier"
         ],
         "ignore": ["Ansible", "Tower", "JSON", "YAML", "lg"],
         "ignoreComponent": [

diff --git a/awx/ui_next/public/static/media/insights-analytics-dashboard.jpeg b/awx/ui_next/public/static/media/insights-analytics-dashboard.jpeg
diff --git a/awx/ui_next/src/App.jsx b/awx/ui_next/src/App.jsx
@@ -8,7 +8,9 @@ import {
   Redirect,
 } from 'react-router-dom';
 import { I18n, I18nProvider } from '@lingui/react';
+import { Card, PageSection } from '@patternfly/react-core';
 
+import { ConfigProvider, useAuthorizedPath } from './contexts/Config';
 import AppContainer from './components/AppContainer';
 import Background from './components/Background';
 import NotFound from './screens/NotFound';
@@ -20,6 +22,49 @@ import { isAuthenticated } from './util/auth';
 import { getLanguageWithoutRegionCode } from './util/language';
 
 import getRouteConfig from './routeConfig';
+import SubscriptionEdit from './screens/Setting/Subscription/SubscriptionEdit';
+
+const AuthorizedRoutes = ({ routeConfig }) => {
+  const isAuthorized = useAuthorizedPath();
+  const match = useRouteMatch();
+
+  if (!isAuthorized) {
+    return (
+      <Switch>
+        <ProtectedRoute
+          key="/subscription_management"
+          path="/subscription_management"
+        >
+          <PageSection>
+            <Card>
+              <SubscriptionEdit />
+            </Card>
+          </PageSection>
+        </ProtectedRoute>
+        <Route path="*">
+          <Redirect to="/subscription_management" />
+        </Route>
+      </Switch>
+    );
+  }
+
+  return (
+    <Switch>
+      {routeConfig
+        .flatMap(({ routes }) => routes)
+        .map(({ path, screen: Screen }) => (
+          <ProtectedRoute key={path} path={path}>
+            <Screen match={match} />
+          </ProtectedRoute>
+        ))
+        .concat(
+          <ProtectedRoute key="not-found" path="*">
+            <NotFound />
+          </ProtectedRoute>
+        )}
+    </Switch>
+  );
+};
 
 const ProtectedRoute = ({ children, ...rest }) =>
   isAuthenticated(document.cookie) ? (
@@ -36,7 +81,6 @@ function App() {
     // preferred language, default to one that has strings.
     language = 'en';
   }
-  const match = useRouteMatch();
   const { hash, search, pathname } = useLocation();
 
   return (
@@ -55,22 +99,11 @@ function App() {
                 <Redirect to="/home" />
               </Route>
               <ProtectedRoute>
-                <AppContainer navRouteConfig={getRouteConfig(i18n)}>
-                  <Switch>
-                    {getRouteConfig(i18n)
-                      .flatMap(({ routes }) => routes)
-                      .map(({ path, screen: Screen }) => (
-                        <ProtectedRoute key={path} path={path}>
-                          <Screen match={match} />
-                        </ProtectedRoute>
-                      ))
-                      .concat(
-                        <ProtectedRoute key="not-found" path="*">
-                          <NotFound />
-                        </ProtectedRoute>
-                      )}
-                  </Switch>
-                </AppContainer>
+                <ConfigProvider>
+                  <AppContainer navRouteConfig={getRouteConfig(i18n)}>
+                    <AuthorizedRoutes routeConfig={getRouteConfig(i18n)} />
+                  </AppContainer>
+                </ConfigProvider>
               </ProtectedRoute>
             </Switch>
           </Background>

diff --git a/awx/ui_next/src/api/models/Config.js b/awx/ui_next/src/api/models/Config.js
@@ -6,6 +6,17 @@ class Config extends Base {
     this.baseUrl = '/api/v2/config/';
     this.read = this.read.bind(this);
   }
+
+  readSubscriptions(username, password) {
+    return this.http.post(`${this.baseUrl}subscriptions/`, {
+      subscriptions_username: username,
+      subscriptions_password: password,
+    });
+  }
+
+  attach(data) {
+    return this.http.post(`${this.baseUrl}attach/`, data);
+  }
 }
 
 export default Config;
diff --git a/awx/ui_next/src/api/models/Settings.js b/awx/ui_next/src/api/models/Settings.js
@@ -14,6 +14,10 @@ class Settings extends Base {
     return this.http.patch(`${this.baseUrl}all/`, data);
   }
 
+  updateCategory(category, data) {
+    return this.http.patch(`${this.baseUrl}${category}/`, data);
+  }
+
   readCategory(category) {
     return this.http.get(`${this.baseUrl}${category}/`);
   }

diff --git a/awx/ui_next/src/components/AppContainer/AppContainer.jsx b/awx/ui_next/src/components/AppContainer/AppContainer.jsx
@@ -1,24 +1,26 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
-import { useHistory, useLocation, withRouter } from 'react-router-dom';
+import { useHistory, withRouter } from 'react-router-dom';
 import {
   Button,
   Nav,
   NavList,
   Page,
   PageHeader as PFPageHeader,
+  PageHeaderTools,
+  PageHeaderToolsGroup,
+  PageHeaderToolsItem,
   PageSidebar,
 } from '@patternfly/react-core';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
 import styled from 'styled-components';
 
-import { ConfigAPI, MeAPI, RootAPI } from '../../api';
-import { ConfigProvider } from '../../contexts/Config';
+import { MeAPI, RootAPI } from '../../api';
+import { useConfig, useAuthorizedPath } from '../../contexts/Config';
 import { SESSION_TIMEOUT_KEY } from '../../constants';
 import { isAuthenticated } from '../../util/auth';
 import About from '../About';
 import AlertModal from '../AlertModal';
-import ErrorDetail from '../ErrorDetail';
 import BrandLogo from './BrandLogo';
 import NavExpandableGroup from './NavExpandableGroup';
 import PageHeaderToolbar from './PageHeaderToolbar';
@@ -85,11 +87,11 @@ function useStorage(key) {
 
 function AppContainer({ i18n, navRouteConfig = [], children }) {
   const history = useHistory();
-  const { pathname } = useLocation();
-  const [config, setConfig] = useState({});
-  const [configError, setConfigError] = useState(null);
+  const config = useConfig();
+
+  const isReady = !!config.license_info;
+  const isSidebarVisible = useAuthorizedPath();
   const [isAboutModalOpen, setIsAboutModalOpen] = useState(false);
-  const [isReady, setIsReady] = useState(false);
 
   const sessionTimeoutId = useRef();
   const sessionIntervalId = useRef();
@@ -99,7 +101,6 @@ function AppContainer({ i18n, navRouteConfig = [], children }) {
 
   const handleAboutModalOpen = () => setIsAboutModalOpen(true);
   const handleAboutModalClose = () => setIsAboutModalOpen(false);
-  const handleConfigErrorClose = () => setConfigError(null);
   const handleSessionTimeout = () => setTimeoutWarning(true);
 
   const handleLogout = useCallback(async () => {
@@ -137,31 +138,6 @@ function AppContainer({ i18n, navRouteConfig = [], children }) {
     }
   }, [handleLogout, timeRemaining]);
 
-  useEffect(() => {
-    const loadConfig = async () => {
-      if (config?.version) return;
-      try {
-        const [
-          { data },
-          {
-            data: {
-              results: [me],
-            },
-          },
-        ] = await Promise.all([ConfigAPI.read(), MeAPI.read()]);
-        setConfig({ ...data, me });
-        setIsReady(true);
-      } catch (err) {
-        if (err.response.status === 401) {
-          handleLogout();
-          return;
-        }
-        setConfigError(err);
-      }
-    };
-    loadConfig();
-  }, [config, pathname, handleLogout]);
-
   const header = (
     <PageHeader
       showNavToggle
@@ -178,6 +154,23 @@ function AppContainer({ i18n, navRouteConfig = [], children }) {
     />
   );
 
+  const simpleHeader = config.isLoading ? null : (
+    <PageHeader
+      logo={<BrandLogo />}
+      headerTools={
+        <PageHeaderTools>
+          <PageHeaderToolsGroup>
+            <PageHeaderToolsItem>
+              <Button onClick={handleLogout} variant="tertiary" ouiaId="logout">
+                {i18n._(t`Logout`)}
+              </Button>
+            </PageHeaderToolsItem>
+          </PageHeaderToolsGroup>
+        </PageHeaderTools>
+      }
+    />
+  );
+
   const sidebar = (
     <PageSidebar
       theme="dark"
@@ -200,23 +193,18 @@ function AppContainer({ i18n, navRouteConfig = [], children }) {
 
   return (
     <>
-      <Page isManagedSidebar header={header} sidebar={sidebar}>
-        {isReady && <ConfigProvider value={config}>{children}</ConfigProvider>}
+      <Page
+        isManagedSidebar={isSidebarVisible}
+        header={isSidebarVisible ? header : simpleHeader}
+        sidebar={isSidebarVisible && sidebar}
+      >
+        {isReady ? children : null}
       </Page>
       <About
         version={config?.version}
         isOpen={isAboutModalOpen}
         onClose={handleAboutModalClose}
       />
-      <AlertModal
-        isOpen={configError}
-        variant="error"
-        title={i18n._(t`Error!`)}
-        onClose={handleConfigErrorClose}
-      >
-        {i18n._(t`Failed to retrieve configuration.`)}
-        <ErrorDetail error={configError} />
-      </AlertModal>
       <AlertModal
         ouiaId="session-expiration-modal"
         title={i18n._(t`Your session is about to expire`)}

diff --git a/awx/ui_next/src/components/AppContainer/AppContainer.test.jsx b/awx/ui_next/src/components/AppContainer/AppContainer.test.jsx
@@ -5,6 +5,7 @@ import {
   waitForElement,
 } from '../../../testUtils/enzymeHelpers';
 import { ConfigAPI, MeAPI, RootAPI } from '../../api';
+import { useAuthorizedPath } from '../../contexts/Config';
 import AppContainer from './AppContainer';
 
 jest.mock('../../api');
@@ -19,10 +20,12 @@ describe('<AppContainer />', () => {
       },
     });
     MeAPI.read.mockResolvedValue({ data: { results: [{}] } });
+    useAuthorizedPath.mockImplementation(() => true);
   });
 
   afterEach(() => {
     jest.clearAllMocks();
+    jest.restoreAllMocks();
   });
 
   test('expected content is rendered', async () => {
@@ -77,7 +80,9 @@ describe('<AppContainer />', () => {
 
     let wrapper;
     await act(async () => {
-      wrapper = mountWithContexts(<AppContainer />);
+      wrapper = mountWithContexts(<AppContainer />, {
+        context: { config: { version } },
+      });
     });
 
     // open about dropdown menu