fix(ecosystem): Adjust codeowners copy and primary button (#45812)

static/app/views/settings/project/projectOwnership/codeownerErrors.spec.tsx

@@ -30,9 +30,7 @@ describe('CodeownerErrors', () => {
       )
     );
     expect(
-      screen.getByText(
-        `The following teams do not have an association in the organization: ${org.slug}`
-      )
+      screen.getByText(`There’s a problem linking teams and members from an integration`)
     ).toBeInTheDocument();
     expect(screen.getByText('@getsentry/something')).toBeInTheDocument();
   });

static/app/views/settings/project/projectOwnership/codeownerErrors.tsx

@@ -84,7 +84,7 @@ export function CodeOwnerErrors({
       case 'missing_external_teams':
         return (
           <ErrorMessage
-            message={`The following teams do not have an association in the organization: ${orgSlug}`}
+            message="There’s a problem linking teams and members from an integration"
             values={values}
             link={`/settings/${orgSlug}/integrations/${codeMapping?.provider?.slug}/${codeMapping?.integrationId}/?tab=teamMappings`}
             linkValue="Configure Team Mappings"

static/app/views/settings/project/projectOwnership/index.spec.jsx

@@ -97,10 +97,10 @@ describe('Project Ownership', () => {
       );
 
       // Renders button
-      expect(screen.getByRole('button', {name: 'Add CODEOWNERS'})).toBeInTheDocument();
+      expect(screen.getByRole('button', {name: 'Import CODEOWNERS'})).toBeInTheDocument();
 
       // Opens modal
-      userEvent.click(screen.getByRole('button', {name: 'Add CODEOWNERS'}));
+      userEvent.click(screen.getByRole('button', {name: 'Import CODEOWNERS'}));
       expect(openModal).toHaveBeenCalled();
     });
   });

static/app/views/settings/project/projectOwnership/index.tsx

@@ -1,17 +1,16 @@
 import {Fragment} from 'react';
 import {RouteComponentProps} from 'react-router';
-import styled from '@emotion/styled';
 
 import {openEditOwnershipRules, openModal} from 'sentry/actionCreators/modal';
 import Access from 'sentry/components/acl/access';
 import {Button} from 'sentry/components/button';
+import ButtonBar from 'sentry/components/buttonBar';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import Form from 'sentry/components/forms/form';
 import JsonForm from 'sentry/components/forms/jsonForm';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {IconEdit} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import {CodeOwner, IssueOwnership, Organization, Project} from 'sentry/types';
 import routeTitleGen from 'sentry/utils/routeTitle';
 import AsyncView from 'sentry/views/asyncView';
@@ -82,17 +81,6 @@ url:http://example.com/settings/* #product
 tags.sku_class:enterprise #enterprise`;
   }
 
-  getDetail() {
-    return tct(
-      `Auto-assign issues to users and teams. To learn more, [link:read the docs].`,
-      {
-        link: (
-          <ExternalLink href="https://docs.sentry.io/product/error-monitoring/issue-owners/" />
-        ),
-      }
-    );
-  }
-
   handleOwnershipSave = (text: string | null) => {
     this.setState(prevState => ({
       ...(prevState.ownership
@@ -144,12 +132,28 @@ tags.sku_class:enterprise #enterprise`;
         <SettingsPageHeader
           title={this.getOwnershipTitle()}
           action={
-            <Fragment>
-              {hasStreamlineTargetingContext ? (
+            <ButtonBar gap={1}>
+              {hasCodeowners && (
+                <Access access={['org:integrations']}>
+                  {({hasAccess}) =>
+                    hasAccess ? (
+                      <Button
+                        onClick={this.handleAddCodeOwner}
+                        size="sm"
+                        data-test-id="add-codeowner-button"
+                      >
+                        {t('Import CODEOWNERS')}
+                      </Button>
+                    ) : null
+                  }
+                </Access>
+              )}
+              {hasStreamlineTargetingContext && (
                 <Button
                   type="button"
                   size="sm"
                   icon={<IconEdit size="xs" />}
+                  priority="primary"
                   onClick={() =>
                     openEditOwnershipRules({
                       organization,
@@ -162,37 +166,21 @@ tags.sku_class:enterprise #enterprise`;
                 >
                   {t('Edit Rules')}
                 </Button>
-              ) : (
-                <Button
-                  to={{
-                    pathname: `/organizations/${organization.slug}/issues/`,
-                    query: {project: project.id},
-                  }}
-                  size="sm"
-                >
-                  {t('View Issues')}
-                </Button>
               )}
-              {hasCodeowners && (
-                <Access access={['org:integrations']}>
-                  {({hasAccess}) =>
-                    hasAccess ? (
-                      <CodeOwnerButton
-                        onClick={this.handleAddCodeOwner}
-                        size="sm"
-                        priority="primary"
-                        data-test-id="add-codeowner-button"
-                      >
-                        {t('Add CODEOWNERS')}
-                      </CodeOwnerButton>
-                    ) : null
-                  }
-                </Access>
-              )}
-            </Fragment>
+            </ButtonBar>
           }
         />
-        <IssueOwnerDetails>{this.getDetail()}</IssueOwnerDetails>
+
+        <p>
+          {tct(
+            `Auto-assign issues to users and teams. To learn more, [link:read the docs].`,
+            {
+              link: (
+                <ExternalLink href="https://docs.sentry.io/product/error-monitoring/issue-owners/" />
+              ),
+            }
+          )}
+        </p>
 
         <PermissionAlert
           access={!editOwnershipeRulesDisabled ? ['project:read'] : ['project:write']}
@@ -325,11 +313,3 @@ tags.sku_class:enterprise #enterprise`;
 }
 
 export default ProjectOwnership;
-
-const CodeOwnerButton = styled(Button)`
-  margin-left: ${space(1)};
-`;
-
-const IssueOwnerDetails = styled('div')`
-  padding-bottom: ${space(3)};
-`;