Merge pull request #13390 from overleaf/ab-managers-page-styling

[web] Full-row links styling for group subscription links in dash

GitOrigin-RevId: f3b2dd67e9c14cf8fde1df41d74d380c06cc3d4c

services/web/frontend/extracted-translations.json

@@ -559,8 +559,10 @@
   "manage_beta_program_membership": "",
   "manage_files_from_your_dropbox_folder": "",
   "manage_group_managers": "",
+  "manage_group_members_subtext": "",
   "manage_institution_managers": "",
   "manage_labs_program_membership": "",
+  "manage_managers_subtext": "",
   "manage_members": "",
   "manage_newsletter": "",
   "manage_publisher_managers": "",
@@ -1058,9 +1060,12 @@
   "vat_number": "",
   "view_all": "",
   "view_hub": "",
+  "view_hub_subtext": "",
   "view_in_template_gallery": "",
   "view_logs": "",
   "view_metrics": "",
+  "view_metrics_group_subtext": "",
+  "view_metrics_institution_subtext": "",
   "view_pdf": "",
   "view_your_invoices": "",
   "viewing_x": "",

services/web/frontend/js/features/subscription/components/dashboard/managed-group-subscriptions.tsx

@@ -1,5 +1,6 @@
 import { Trans, useTranslation } from 'react-i18next'
 import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context'
+import { RowLink } from './row-link'
 
 export default function ManagedGroupSubscriptions() {
   const { t } = useTranslation()
@@ -36,24 +37,24 @@ export default function ManagedGroupSubscriptions() {
               />
             )}
           </p>
-          <p>
-            <a
-              className="btn btn-primary"
-              href={`/manage/groups/${subscription._id}/members`}
-            >
-              <i className="fa fa-fw fa-users" /> {t('manage_members')}
-            </a>
-          </p>
-          <p>
-            <a href={`/manage/groups/${subscription._id}/managers`}>
-              <i className="fa fa-fw fa-users" /> {t('manage_group_managers')}
-            </a>
-          </p>
-          <p>
-            <a href={`/metrics/groups/${subscription._id}`}>
-              <i className="fa fa-fw fa-line-chart" /> {t('view_metrics')}
-            </a>
-          </p>
+          <RowLink
+            href={`/manage/groups/${subscription._id}/members`}
+            heading={t('manage_members')}
+            subtext={t('manage_group_members_subtext')}
+            icon="groups"
+          />
+          <RowLink
+            href={`/manage/groups/${subscription._id}/managers`}
+            heading={t('manage_group_managers')}
+            subtext={t('manage_managers_subtext')}
+            icon="manage_accounts"
+          />
+          <RowLink
+            href={`/metrics/groups/${subscription._id}`}
+            heading={t('view_metrics')}
+            subtext={t('view_metrics_group_subtext')}
+            icon="insights"
+          />
           <hr />
         </div>
       ))}

services/web/frontend/js/features/subscription/components/dashboard/managed-institution.tsx

@@ -3,6 +3,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import { postJSON } from '../../../../infrastructure/fetch-json'
 import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context'
 import { Institution } from './managed-institutions'
+import { RowLink } from './row-link'
 
 type ManagedInstitutionProps = {
   institution: Institution
@@ -48,24 +49,24 @@ export default function ManagedInstitution({
           }}
         />
       </p>
-      <p>
-        <a
-          className="btn btn-primary"
-          href={`/metrics/institutions/${institution.v1Id}`}
-        >
-          <i className="fa fa-fw fa-line-chart" /> {t('view_metrics')}
-        </a>
-      </p>
-      <p>
-        <a href={`/institutions/${institution.v1Id}/hub`}>
-          <i className="fa fa-fw fa-user-circle" /> {t('view_hub')}
-        </a>
-      </p>
-      <p>
-        <a href={`/manage/institutions/${institution.v1Id}/managers`}>
-          <i className="fa fa-fw fa-users" /> {t('manage_institution_managers')}
-        </a>
-      </p>
+      <RowLink
+        href={`/metrics/institutions/${institution.v1Id}`}
+        heading={t('view_metrics')}
+        subtext={t('view_metrics_institution_subtext')}
+        icon="insights"
+      />
+      <RowLink
+        href={`/institutions/${institution.v1Id}/hub`}
+        heading={t('view_hub')}
+        subtext={t('view_hub_subtext')}
+        icon="account_circle"
+      />
+      <RowLink
+        href={`/manage/institutions/${institution.v1Id}/managers`}
+        heading={t('manage_institution_managers')}
+        subtext={t('manage_managers_subtext')}
+        icon="manage_accounts"
+      />
       <div>
         <p>
           <span>Monthly metrics emails: </span>

services/web/frontend/js/features/subscription/components/dashboard/managed-publisher.tsx

@@ -1,5 +1,6 @@
 import { Trans, useTranslation } from 'react-i18next'
 import { Publisher } from './managed-publishers'
+import { RowLink } from './row-link'
 
 type ManagedPublisherProps = {
   publisher: Publisher
@@ -19,16 +20,18 @@ export default function ManagedPublisher({ publisher }: ManagedPublisherProps) {
           }}
         />
       </p>
-      <p>
-        <a href={`/publishers/${publisher.slug}/hub`}>
-          <i className="fa fa-fw fa-user-circle" /> {t('view_hub')}
-        </a>
-      </p>
-      <p>
-        <a href={`/manage/publishers/${publisher.slug}/managers`}>
-          <i className="fa fa-fw fa-users" /> {t('manage_publisher_managers')}
-        </a>
-      </p>
+      <RowLink
+        href={`/publishers/${publisher.slug}/hub`}
+        heading={t('view_hub')}
+        subtext={t('view_hub_subtext')}
+        icon="account_circle"
+      />
+      <RowLink
+        href={`/manage/publishers/${publisher.slug}/managers`}
+        heading={t('manage_publisher_managers')}
+        subtext={t('manage_managers_subtext')}
+        icon="manage_accounts"
+      />
       <hr />
     </div>
   )

services/web/frontend/js/features/subscription/components/dashboard/row-link.tsx

@@ -0,0 +1,25 @@
+import MaterialIcon from '../../../../shared/components/material-icon'
+
+type RowLinkProps = {
+  href: string
+  heading: string
+  subtext: string
+  icon: string
+}
+
+export function RowLink({ href, heading, subtext, icon }: RowLinkProps) {
+  return (
+    <a href={href} className="row-link">
+      <div className="icon">
+        <MaterialIcon type={icon} />
+      </div>
+      <div className="text">
+        <div className="heading">{heading}</div>
+        <div className="subtext">{subtext}</div>
+      </div>
+      <div className="icon arrow">
+        <MaterialIcon type="keyboard_arrow_right" />
+      </div>
+    </a>
+  )
+}

services/web/frontend/stylesheets/app/subscription.less

@@ -196,3 +196,50 @@
     background-color: @gray-lighter;
   }
 }
+
+a.row-link {
+  line-height: 24px;
+  color: @neutral-70;
+  display: flex;
+  flex-direction: row;
+  text-decoration: none;
+  padding: 6px 0;
+
+  &:active,
+  &:focus,
+  &:hover {
+    text-decoration: none;
+    outline: none;
+    background-color: @gray-lightest;
+  }
+
+  .icon {
+    display: flex;
+    flex: 1 1 5%;
+    padding: 0 16px;
+    margin-top: 16px;
+    > span {
+      font-size: 16px;
+    }
+
+    &.arrow {
+      margin-top: 12px;
+      > span {
+        font-size: 24px;
+      }
+    }
+  }
+
+  .text {
+    flex: 1 1 90%;
+    display: flex;
+    flex-direction: column;
+
+    .heading {
+      font-weight: @btn-font-weight;
+    }
+    .subtext {
+      font-weight: 400;
+    }
+  }
+}

services/web/locales/en.json

@@ -935,8 +935,10 @@
   "manage_beta_program_membership": "Manage Beta Program Membership",
   "manage_files_from_your_dropbox_folder": "Manage files from your Dropbox folder",
   "manage_group_managers": "Manage group managers",
+  "manage_group_members_subtext": "Add, edit, or remove members from your group subscription",
   "manage_institution_managers": "Manage institution managers",
   "manage_labs_program_membership": "Manage Labs Program Membership",
+  "manage_managers_subtext": "Assign, edit, or revoke manager privileges",
   "manage_members": "Manage members",
   "manage_newsletter": "Manage Your Newsletter Preferences",
   "manage_publisher_managers": "Manage publisher managers",
@@ -1736,9 +1738,12 @@
   "view_all": "View All",
   "view_collab_edits": "View collaborator edits ",
   "view_hub": "View hub",
+  "view_hub_subtext": "Access collaboration and usage data from users of your Commons subscription",
   "view_in_template_gallery": "View it in the template gallery",
   "view_logs": "View logs",
   "view_metrics": "View metrics",
+  "view_metrics_group_subtext": "Monitor and analyse key performance indicators for your group subscription",
+  "view_metrics_institution_subtext": "Monitor and analyse key performance indicators for your Commons subscription",
   "view_other_options_to_log_in": "View other options to log in",
   "view_pdf": "View PDF",
   "view_single_version": "View single version",

services/web/test/frontend/features/subscription/components/dashboard/managed-group-subscriptions.test.tsx

@@ -37,7 +37,7 @@ describe('<ManagedGroupSubscriptions />', function () {
     cleanUpContext()
   })
 
-  it('renders all managed group subscriptions', function () {
+  it('renders all managed group subscriptions', async function () {
     renderWithSubscriptionDashContext(<ManagedGroupSubscriptions />, {
       metaTags: [
         {
@@ -58,34 +58,21 @@ describe('<ManagedGroupSubscriptions />', function () {
       'You are a manager of the Collaborator group subscription GASWPLC administered by someone@example.com'
     )
 
-    const manageMembersLinks = screen.getAllByText('Manage members')
-    expect(manageMembersLinks.length).to.equal(2)
-    expect(manageMembersLinks[0].getAttribute('href')).to.equal(
+    const links = screen.getAllByRole('link')
+    expect(links[1].getAttribute('href')).to.equal(
       '/manage/groups/bcd567/members'
     )
-    expect(manageMembersLinks[1].getAttribute('href')).to.equal(
-      '/manage/groups/def456/members'
-    )
-
-    const manageGroupManagersLinks = screen.getAllByText(
-      'Manage group managers'
-    )
-    expect(manageGroupManagersLinks.length).to.equal(2)
-    expect(manageGroupManagersLinks[0].getAttribute('href')).to.equal(
+    expect(links[2].getAttribute('href')).to.equal(
       '/manage/groups/bcd567/managers'
     )
-    expect(manageGroupManagersLinks[1].getAttribute('href')).to.equal(
-      '/manage/groups/def456/managers'
-    )
-
-    const viewMetricsLinks = screen.getAllByText('View metrics')
-    expect(viewMetricsLinks.length).to.equal(2)
-    expect(viewMetricsLinks[0].getAttribute('href')).to.equal(
-      '/metrics/groups/bcd567'
+    expect(links[3].getAttribute('href')).to.equal('/metrics/groups/bcd567')
+    expect(links[5].getAttribute('href')).to.equal(
+      '/manage/groups/def456/members'
     )
-    expect(viewMetricsLinks[1].getAttribute('href')).to.equal(
-      '/metrics/groups/def456'
+    expect(links[6].getAttribute('href')).to.equal(
+      '/manage/groups/def456/managers'
     )
+    expect(links[7].getAttribute('href')).to.equal('/metrics/groups/def456')
   })
 
   it('renders nothing when there are no group memberships', function () {

services/web/test/frontend/features/subscription/components/dashboard/managed-institutions.test.tsx

@@ -61,32 +61,15 @@ describe('<ManagedInstitutions />', function () {
       'You are a manager of the Overleaf Commons subscription at Inst 2'
     )
 
-    const viewMetricsLinks = screen.getAllByText('View metrics')
-    expect(viewMetricsLinks.length).to.equal(2)
-    expect(viewMetricsLinks[0].getAttribute('href')).to.equal(
-      '/metrics/institutions/123'
-    )
-    expect(viewMetricsLinks[1].getAttribute('href')).to.equal(
-      '/metrics/institutions/456'
-    )
-
-    const viewHubLinks = screen.getAllByText('View hub')
-    expect(viewHubLinks.length).to.equal(2)
-    expect(viewHubLinks[0].getAttribute('href')).to.equal(
-      '/institutions/123/hub'
-    )
-    expect(viewHubLinks[1].getAttribute('href')).to.equal(
-      '/institutions/456/hub'
-    )
-
-    const manageGroupManagersLinks = screen.getAllByText(
-      'Manage institution managers'
-    )
-    expect(manageGroupManagersLinks.length).to.equal(2)
-    expect(manageGroupManagersLinks[0].getAttribute('href')).to.equal(
+    const links = screen.getAllByRole('link')
+    expect(links[0].getAttribute('href')).to.equal('/metrics/institutions/123')
+    expect(links[1].getAttribute('href')).to.equal('/institutions/123/hub')
+    expect(links[2].getAttribute('href')).to.equal(
       '/manage/institutions/123/managers'
     )
-    expect(manageGroupManagersLinks[1].getAttribute('href')).to.equal(
+    expect(links[3].getAttribute('href')).to.equal('/metrics/institutions/456')
+    expect(links[4].getAttribute('href')).to.equal('/institutions/456/hub')
+    expect(links[5].getAttribute('href')).to.equal(
       '/manage/institutions/456/managers'
     )
 

services/web/test/frontend/features/subscription/components/dashboard/managed-publishers.test.tsx

@@ -48,23 +48,13 @@ describe('<ManagedPublishers />', function () {
     expect(elements[0].textContent).to.equal('You are a manager of Pub 1')
     expect(elements[1].textContent).to.equal('You are a manager of Pub 2')
 
-    const viewHubLinks = screen.getAllByText('View hub')
-    expect(viewHubLinks.length).to.equal(2)
-    expect(viewHubLinks[0].getAttribute('href')).to.equal(
-      '/publishers/pub-1/hub'
-    )
-    expect(viewHubLinks[1].getAttribute('href')).to.equal(
-      '/publishers/pub-2/hub'
-    )
-
-    const manageGroupManagersLinks = screen.getAllByText(
-      'Manage publisher managers'
-    )
-    expect(manageGroupManagersLinks.length).to.equal(2)
-    expect(manageGroupManagersLinks[0].getAttribute('href')).to.equal(
+    const links = screen.getAllByRole('link')
+    expect(links[0].getAttribute('href')).to.equal('/publishers/pub-1/hub')
+    expect(links[1].getAttribute('href')).to.equal(
       '/manage/publishers/pub-1/managers'
     )
-    expect(manageGroupManagersLinks[1].getAttribute('href')).to.equal(
+    expect(links[2].getAttribute('href')).to.equal('/publishers/pub-2/hub')
+    expect(links[3].getAttribute('href')).to.equal(
       '/manage/publishers/pub-2/managers'
     )
   })