Add subscription wizard and redirect logic

ansible · Apr 6, 2021 · 440bdee · 440bdee
1 parent 868f680
commit 440bdee
Show file tree

Hide file tree

Showing 45 changed files with 2,495 additions and 279 deletions.
diff --git a/awx/ui_next/.eslintrc b/awx/ui_next/.eslintrc
@@ -79,7 +79,8 @@
           "theme",
           "gridColumns",
           "rows",
-          "href"
+          "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