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

[web] Full-row links styling for group subscription links in dash GitOrigin-RevId: f3b2dd67e9c14cf8fde1df41d74d380c06cc3d4c
2025-04-11 17:35:33 +00:00 · 2023-06-08 14:19:32 +01:00 · 2023-06-08 14:19:32 +01:00 · 88d0254dde
commit 88d0254dde
parent 4991f9cdc7
10 changed files with 155 additions and 108 deletions
--- a/services/web/frontend/extracted-translations.json
+++ b/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": "",
--- a/services/web/frontend/js/features/subscription/components/dashboard/managed-group-subscriptions.tsx
+++ b/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>
      ))}
--- a/services/web/frontend/js/features/subscription/components/dashboard/managed-institution.tsx
+++ b/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>
--- a/services/web/frontend/js/features/subscription/components/dashboard/managed-publisher.tsx
+++ b/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>
  )
--- a/services/web/frontend/js/features/subscription/components/dashboard/row-link.tsx
+++ b/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>
+  )
+}
--- a/services/web/frontend/stylesheets/app/subscription.less
+++ b/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;
+    }
+  }
+}
--- a/services/web/locales/en.json
+++ b/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",
--- a/services/web/test/frontend/features/subscription/components/dashboard/managed-group-subscriptions.test.tsx
+++ b/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(
+    expect(links[3].getAttribute('href')).to.equal('/metrics/groups/bcd567')
+    expect(links[5].getAttribute('href')).to.equal(
+      '/manage/groups/def456/members'
+    )
+    expect(links[6].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(viewMetricsLinks[1].getAttribute('href')).to.equal(
-      '/metrics/groups/def456'
-    )
+    expect(links[7].getAttribute('href')).to.equal('/metrics/groups/def456')
  })

  it('renders nothing when there are no group memberships', function () {
--- a/services/web/test/frontend/features/subscription/components/dashboard/managed-institutions.test.tsx
+++ b/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'
    )

--- a/services/web/test/frontend/features/subscription/components/dashboard/managed-publishers.test.tsx
+++ b/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'
    )
  })