Subscription wizard #9496

marshmalien · 2021-03-05T18:01:28Z

SUMMARY

Adds subscriptions routes
Extends Config context to return an array with two items: config state and config setter
- Update components that use Config with the new return pattern
Move mock config into setupTests.js
Return only the routes the user is "authorized" (valid license key) to view

Subscription Details view: /settings/subscription/details

This is our standard details view
Clicking Edit will send the user to subscription wizard view /settings/subscription/edit
Route is not accessible when license type is OPEN

Subscription Add wizard view: /settings/subscription_management

Step 1 - Subscription:

If a user does not have a Red Hat Ansible Automation Platform subscription, they can request a trial subscription via the link
Toggle between uploading a subscription manifest .zip file or retrieving subscriptions using Red Hat credentials (username and password)
Get Subscriptions button fetches subscriptions and displays them in a modal

Step 2 - Tracking and analytics:

Shows two checkboxes to enable User analytics and Automation analytics
If the user has previously selected the RH subscription manifest flow, checking the Automation Analytics box will display required RH username and password fields
If the user has previously selected the RH username/password flow, they will not see this additional username/password field if Automation Analytics is checked

Step 3 - EULA: https://tower-mockups.testing.ansible.com/patternfly/settings/settings-license-step-03/

Submission should show a success message and navigate user to dashboard if this is the initial launch and to the subscription detail view if they are editing the subscription
Failed submission should show a wizard form error

ISSUE TYPE

Feature

COMPONENT NAME

UI

ADDITIONAL INFORMATION

softwarefactory-project-zuul · 2021-03-05T18:13:37Z

Build succeeded.

awx-api-lint : SUCCESS in 2m 12s
awx-api : SUCCESS in 9m 11s
awx-ui : SUCCESS in 11m 44s
awx-swagger : SUCCESS in 8m 10s
awx-detect-schema-change : SUCCESS in 9m 34s (non-voting)
awx-ansible-modules : SUCCESS in 4m 45s

nixocio · 2021-03-05T19:53:09Z

There are some similarities between this PR, and this one #9159.

mabashian · 2021-03-09T15:57:38Z

This UX is sooooooo much better than before 🎉

mabashian · 2021-03-09T17:30:38Z

@wenottingham @marshmalien @trahman73 wondering if you all talked through the invalid credentials flow. Right now we're showing this:

which is our standard error screen. I'm wondering if we should catch the 400/invalid credentials error and show a more elegant message?

mabashian · 2021-03-09T18:25:39Z

awx/ui_next/src/screens/Setting/SettingList.jsx

@@ -32,15 +32,15 @@ const SplitLayout = styled(PageSection)`
 `;
 const Card = styled(_Card)`
  display: inline-block;
+  break-inside: avoid;


🙏 this bug has bothered me for a while. Thank you!

mabashian · 2021-03-09T18:27:27Z

awx/ui_next/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.jsx

+    },
+  ];
+
+  function secondsToDays(seconds) {


I wonder if this would fit well in https://github.com/ansible/awx/blob/devel/awx/ui_next/src/util/dates.jsx. Might make it easier to test out a bunch of scenarios.

mabashian · 2021-03-09T18:36:18Z

awx/ui_next/src/screens/Setting/Subscription/SubscriptionEdit/AnalyticsStep.jsx

+        </>
+      )}
+      <Flex alignItems={{ default: 'alignItemsCenter' }}>
+        {/* TODO: Add AA dashboard image */}


Is this todo still valid?

mabashian

Left a few comments but this lgtm

wenottingham · 2021-03-09T20:00:04Z

which is our standard error screen. I'm wondering if we should catch the 400/invalid credentials error and show a more elegant message?

Cc @rooftopcellist @ryanpetrello

I think we return 400 with a description in the error message for all issues talking to RHSM. We'd need to catch all the subcases (401 - invalid username/password; 500 - RHSM blew up; whatever we return for a connection error, etc) if we did this. I don't know how complex that would be.

nixocio · 2021-03-11T14:18:55Z

awx/ui_next/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionStep.jsx

+  });
+
+  return (
+    <Flex


nixocio · 2021-03-11T14:22:04Z

awx/ui_next/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionStep.jsx

+              />
+            }
+          >
+            <FileUpload


Do we need to specify the file type?

nixocio · 2021-03-11T14:40:32Z

awx/ui_next/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.jsx

+            label={i18n._(t`Expires on`)}
+            value={
+              license_info.license_date &&
+              formatDateStringUTC(


Do we want to show UTC time here? Majority of dates on the UI are formatDateString. If we want UTC, perhaps add a note.

nixocio · 2021-03-11T14:48:13Z

awx/ui_next/src/contexts/Config.jsx

+  const { pathname } = useLocation();
+  const [configState, setConfigState] = useState({});
+
+  const { error: configError, request } = useRequest(


Do we need to display isLoading?

nixocio · 2021-03-11T14:54:47Z

awx/ui_next/src/components/AppContainer/AppContainer.jsx

@@ -178,6 +153,23 @@ function AppContainer({ i18n, navRouteConfig = [], children }) {
    />
  );

+  const simpleHeader = (


It seems like the simpleHeader is being rendering for a moment after the user logged in. Then header is being displayed. Having issues to add a .gif.

tiagodread

Is there any way to add ouiaId on WizardNavItem ?

tiagodread · 2021-03-18T20:56:24Z

awx/ui_next/src/components/AppContainer/AppContainer.jsx

+        <PageHeaderTools>
+          <PageHeaderToolsGroup>
+            <PageHeaderToolsItem>
+              <Button onClick={handleLogout} variant="tertiary">


Suggested change

<Button onClick={handleLogout} variant="tertiary">

<Button onClick={handleLogout} variant="tertiary" ouiaId="logout">

tiagodread · 2021-03-18T20:58:40Z

awx/ui_next/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionEdit.jsx

+              </Button>
+            )}
+            <Button
+              id="subscription-wizard-back"


Suggested change

id="subscription-wizard-back"

ouiaId="subscription-wizard-back"

id="subscription-wizard-back"

tiagodread · 2021-03-18T20:59:16Z

awx/ui_next/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionEdit.jsx

+              </Button>
+            ) : (
+              <Button
+                id="subscription-wizard-next"


Suggested change

id="subscription-wizard-next"

ouiaId="subscription-wizard-next"

id="subscription-wizard-next"

tiagodread · 2021-03-18T20:59:47Z

awx/ui_next/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionEdit.jsx

+            </Button>
+            {license_info?.valid_key && (
+              <Button
+                id="subscription-wizard-cancel"


Suggested change

id="subscription-wizard-cancel"

ouiaId="subscription-wizard-cancel"

id="subscription-wizard-cancel"

tiagodread · 2021-03-18T21:07:16Z

awx/ui_next/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionStep.jsx

+      </p>
+      <ToggleGroup>
+        <ToggleGroupItem
+          text={i18n._(t`Subscription manifest`)}


Suggested change

text={i18n._(t`Subscription manifest`)}

text={i18n._(t`Subscription manifest`)}

ouiaId="subscription-manifest"

aria-label={i18n._(t`Subscription manifest`)}

tiagodread · 2021-03-18T21:08:05Z

awx/ui_next/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionStep.jsx

+          onChange={() => setIsSelected('uploadManifest')}
+        />
+        <ToggleGroupItem
+          text={i18n._(t`Username / password`)}


Suggested change

text={i18n._(t`Username / password`)}

text={i18n._(t`Username / password`)}

ouiaId="username-password"

aria-label={i18n._(t`Username / password`)}

nixocio · 2021-03-19T20:05:11Z

awx/ui_next/src/screens/Project/shared/ProjectForm.jsx

-              labelIcon={
-                <Popover
-                  content={i18n._(t`Select the playbook to be executed by
+      {custom_virtualenvs && custom_virtualenvs.length > 1 && (


We removed custom_virtualenvs fields from displayed on the UI

unlikelyzero · 2021-03-23T13:59:12Z

@marshmalien can you rebase this please :)

unlikelyzero · 2021-03-23T18:58:06Z

@marshmalien , we completed a bug bash for this PR and here the result. Please make sure you sync with @tiagodread to go over what can be addressed post-merge

Results

Invalid Red Hat credentials could give user more immediate feedback on failure
We should make it more clear where the Red Hat username and Log in come from on the second step of the wizard
All hyperlinks should have a popout behavior. There are several examples of hyperlinks which use the existing browser page and others which open another tab.
EULA is 2019
Request subscription button cannot receive tab-focus for a11y
On the subscription details the Time remaining is displaying {duration} days
Clicking on the Activity Stream from the license settings page then clicking back on the License link on activity stream the user is redirected to the main settings page instead of the license settings page.
Rename Trial header

- Consider re-ordering the dt's within the details view

- Links to documentation on the wizard should point to ansible 4.0 instead of latest - Should allow users to change the credentials for automation analytics, but still populate from the creds used for subscription in case they are the same - testability - only allow zip? - After applying DELETE request, Username / Password fields are still saved? - What should auditor/normal user see?

softwarefactory-project-zuul · 2021-04-01T21:10:40Z

Build succeeded.

awx-api-lint : SUCCESS in 2m 23s
awx-api : SUCCESS in 7m 23s
awx-ui : SUCCESS in 10m 35s
awx-swagger : SUCCESS in 6m 58s
awx-detect-schema-change : SUCCESS in 8m 10s (non-voting)
awx-ansible-modules : SUCCESS in 4m 15s

softwarefactory-project-zuul · 2021-04-05T19:54:50Z

Build succeeded.

awx-api-lint : SUCCESS in 2m 15s
awx-api : SUCCESS in 6m 28s
awx-ui : SUCCESS in 10m 46s
awx-swagger : SUCCESS in 6m 52s
awx-detect-schema-change : SUCCESS in 7m 07s (non-voting)
awx-ansible-modules : SUCCESS in 4m 23s

nixocio

Great job @marshmalien.

softwarefactory-project-zuul · 2021-04-05T20:48:56Z

Build succeeded.

awx-api-lint : SUCCESS in 2m 19s
awx-api : SUCCESS in 5m 57s
awx-ui : SUCCESS in 10m 50s
awx-swagger : SUCCESS in 7m 06s
awx-detect-schema-change : SUCCESS in 6m 57s (non-voting)
awx-ansible-modules : SUCCESS in 4m 13s

softwarefactory-project-zuul · 2021-04-06T13:36:24Z

Build succeeded.

awx-api-lint : SUCCESS in 2m 02s
awx-api : SUCCESS in 6m 54s
awx-ui : SUCCESS in 10m 48s
awx-swagger : SUCCESS in 7m 28s
awx-detect-schema-change : SUCCESS in 7m 20s (non-voting)
awx-ansible-modules : SUCCESS in 4m 31s

tiagodread

🎉

Checked that:

apply license with a manifest file
apply the license with credentials
if the options for analytics and insights is working
not navigate directly to a different route when no license was applied
auditor or normal users can not apply license
the user can edit the subscription from settings

Added e2e tests on 6130

softwarefactory-project-zuul · 2021-04-06T19:47:12Z

Merge Failed.