Merge pull request #8776 from nixocio/ui_issue_7708

Show access tab when credential does not belong to an organization

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/components/AddRole/AddResourceRole.jsx

@@ -144,7 +144,7 @@ class AddResourceRole extends React.Component {
       currentStepId,
       maxEnabledStep,
     } = this.state;
-    const { onClose, roles, i18n } = this.props;
+    const { onClose, roles, i18n, resource } = this.props;
 
     // Object roles can be user only, so we remove them when
     // showing role choices for team access
@@ -235,18 +235,24 @@ class AddResourceRole extends React.Component {
                 t`Choose the type of resource that will be receiving new roles.  For example, if you'd like to add new roles to a set of users please choose Users and click Next.  You'll be able to select the specific resources in the next step.`
               )}
             </div>
+
             <SelectableCard
               isSelected={selectedResource === 'users'}
               label={i18n._(t`Users`)}
               dataCy="add-role-users"
+              ariaLabel={i18n._(t`Users`)}
               onClick={() => this.handleResourceSelect('users')}
             />
-            <SelectableCard
+            {resource?.type === 'credential' &&
-              isSelected={selectedResource === 'teams'}
+            !resource?.organization ? null : (
-              label={i18n._(t`Teams`)}
+              <SelectableCard
-              dataCy="add-role-teams"
+                isSelected={selectedResource === 'teams'}
-              onClick={() => this.handleResourceSelect('teams')}
+                label={i18n._(t`Teams`)}
-            />
+                dataCy="add-role-teams"
+                ariaLabel={i18n._(t`Teams`)}
+                onClick={() => this.handleResourceSelect('teams')}
+              />
+            )}
           </div>
         ),
         enableNext: selectedResource !== null,
@@ -329,10 +335,12 @@ AddResourceRole.propTypes = {
   onClose: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
   roles: PropTypes.shape(),
+  resource: PropTypes.shape(),
 };
 
 AddResourceRole.defaultProps = {
   roles: {},
+  resource: {},
 };
 
 export { AddResourceRole as _AddResourceRole };

awx/ui_next/src/components/AddRole/AddResourceRole.test.jsx

@@ -221,4 +221,22 @@ describe('<_AddResourceRole />', () => {
     expect(TeamsAPI.associateRole).toHaveBeenCalledTimes(2);
     expect(handleSave).toHaveBeenCalled();
   });
+
+  test('should not display team as a choice in case credential does not have organization', () => {
+    const spy = jest.spyOn(_AddResourceRole.prototype, 'handleResourceSelect');
+    const wrapper = mountWithContexts(
+      <AddResourceRole
+        onClose={() => {}}
+        onSave={() => {}}
+        roles={roles}
+        resource={{ type: 'credential', organization: null }}
+      />,
+      { context: { network: { handleHttpError: () => {} } } }
+    ).find('AddResourceRole');
+    const selectableCardWrapper = wrapper.find('SelectableCard');
+    expect(selectableCardWrapper.length).toBe(1);
+    selectableCardWrapper.first().simulate('click');
+    expect(spy).toHaveBeenCalledWith('users');
+    expect(wrapper.state('selectedResource')).toBe('users');
+  });
 });

awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx

@@ -155,6 +155,7 @@ function ResourceAccessList({ i18n, apiModel, resource }) {
             fetchAccessRecords();
           }}
           roles={resource.summary_fields.object_roles}
+          resource={resource}
         />
       )}
       {showDeleteModal && (

awx/ui_next/src/components/SelectableCard/SelectableCard.jsx

@@ -31,7 +31,14 @@ const Description = styled.p`
   font-size: 14px;
 `;
 
-function SelectableCard({ label, description, onClick, isSelected, dataCy }) {
+function SelectableCard({
+  label,
+  description,
+  onClick,
+  isSelected,
+  dataCy,
+  ariaLabel,
+}) {
   return (
     <SelectableItem
       onClick={onClick}
@@ -40,6 +47,7 @@ function SelectableCard({ label, description, onClick, isSelected, dataCy }) {
       tabIndex="0"
       data-cy={dataCy}
       isSelected={isSelected}
+      aria-label={ariaLabel}
     >
       <Indicator isSelected={isSelected} />
       <Contents>
@@ -55,12 +63,14 @@ SelectableCard.propTypes = {
   description: PropTypes.string,
   onClick: PropTypes.func.isRequired,
   isSelected: PropTypes.bool,
+  ariaLabel: PropTypes.string,
 };
 
 SelectableCard.defaultProps = {
   label: '',
   description: '',
   isSelected: false,
+  ariaLabel: '',
 };
 
 export default SelectableCard;

awx/ui_next/src/screens/Credential/Credential.jsx

@@ -56,15 +56,12 @@ function Credential({ i18n, setBreadcrumb }) {
       id: 99,
     },
     { name: i18n._(t`Details`), link: `/credentials/${id}/details`, id: 0 },
-  ];
+    {
-
-  if (credential && credential.organization) {
-    tabsArray.push({
       name: i18n._(t`Access`),
       link: `/credentials/${id}/access`,
       id: 1,
-    });
+    },
-  }
+  ];
 
   let showCardHeader = true;
 
@@ -108,14 +105,12 @@ function Credential({ i18n, setBreadcrumb }) {
             <Route key="edit" path="/credentials/:id/edit">
               <CredentialEdit credential={credential} />
             </Route>,
-            credential.organization && (
+            <Route key="access" path="/credentials/:id/access">
-              <Route key="access" path="/credentials/:id/access">
+              <ResourceAccessList
-                <ResourceAccessList
+                resource={credential}
-                  resource={credential}
+                apiModel={CredentialsAPI}
-                  apiModel={CredentialsAPI}
+              />
-                />
+            </Route>,
-              </Route>
-            ),
             <Route key="not-found" path="*">
               {!hasContentLoading && (
                 <ContentError isNotFound>

awx/ui_next/src/screens/Credential/Credential.test.jsx

@@ -31,7 +31,7 @@ describe('<Credential />', () => {
       wrapper = mountWithContexts(<Credential setBreadcrumb={() => {}} />);
     });
     await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
-    await waitForElement(wrapper, '.pf-c-tabs__item', el => el.length === 2);
+    await waitForElement(wrapper, '.pf-c-tabs__item', el => el.length === 3);
   });
 
   test('initially renders org-based credential succesfully', async () => {

awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx

@@ -78,7 +78,7 @@ function CredentialDetail({ i18n, credential }) {
           {}
         ),
       };
-    }, [credentialId, credential_type]),
+    }, [credentialId, credential_type.id]),
     {
       fields: [],
       managedByTower: true,