Merge pull request #11670 from overleaf/ab-manage-members-back-button

[web] Add a back button on the members/managers management pages

GitOrigin-RevId: 7a723853683438ebac91eb534f9fb9a445a306c9

services/web/frontend/extracted-translations.json

@@ -57,6 +57,7 @@
   "autocompile_disabled_reason": "",
   "autocomplete": "",
   "autocomplete_references": "",
+  "back_to_subscription": "",
   "back_to_your_projects": "",
   "beta_program_already_participating": "",
   "beta_program_benefits": "<0></0>",

services/web/frontend/js/features/group-management/components/group-members.tsx

@@ -7,6 +7,7 @@ import {
   FetchError,
   postJSON,
 } from '../../../infrastructure/fetch-json'
+import MaterialIcon from '../../../shared/components/material-icon'
 import Tooltip from '../../../shared/components/tooltip'
 import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n'
 import getMeta from '../../../utils/meta'
@@ -145,7 +146,15 @@ export default function GroupMembers() {
     <div className="container">
       <Row>
         <Col md={10} mdOffset={1}>
-          <h1>{groupName || t('group_subscription')}</h1>
+          <h1>
+            <a href="/user/subscription" className="back-btn">
+              <MaterialIcon
+                type="arrow_back"
+                accessibilityLabel={t('back_to_subscription')}
+              />
+            </a>{' '}
+            {groupName || t('group_subscription')}
+          </h1>
           <div className="card">
             <div className="page-header">
               <div className="pull-right">

services/web/frontend/js/features/group-management/components/managers-table.tsx

@@ -6,6 +6,7 @@ import {
   FetchError,
   postJSON,
 } from '../../../infrastructure/fetch-json'
+import MaterialIcon from '../../../shared/components/material-icon'
 import Tooltip from '../../../shared/components/tooltip'
 import getMeta from '../../../utils/meta'
 import { parseEmails } from '../utils/emails'
@@ -136,7 +137,15 @@ export function ManagersTable({
     <div className="container">
       <Row>
         <Col md={10} mdOffset={1}>
-          <h1>{groupName || translations.title}</h1>
+          <h1>
+            <a href="/user/subscription" className="back-btn">
+              <MaterialIcon
+                type="arrow_back"
+                accessibilityLabel={t('back_to_subscription')}
+              />
+            </a>{' '}
+            {groupName || translations.title}
+          </h1>
           <div className="card">
             <div className="page-header">
               <div className="pull-right">

services/web/frontend/js/shared/components/material-icon.tsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames'
+
+type IconOwnProps = {
+  type: string
+  accessibilityLabel?: string
+}
+
+type IconProps = IconOwnProps &
+  Omit<React.ComponentProps<'i'>, keyof IconOwnProps>
+
+function MaterialIcon({
+  type,
+  className,
+  accessibilityLabel,
+  ...rest
+}: IconProps) {
+  const iconClassName = classNames('material-symbols-rounded', className)
+
+  return (
+    <>
+      <span className={iconClassName} aria-hidden="true" {...rest}>
+        {type}
+      </span>
+      {accessibilityLabel && (
+        <span className="sr-only">{accessibilityLabel}</span>
+      )}
+    </>
+  )
+}
+
+export default MaterialIcon

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

@@ -180,3 +180,19 @@
 .recurly-hosted-field-input when (@is-new-css = true) {
   &:extend(.form-control);
 }
+
+.back-btn {
+  padding: 0 10px 2px 12px;
+  border-radius: 50%;
+  border: none;
+  color: @gray-dark;
+
+  &:hover {
+    background-color: @neutral-20;
+    color: @gray-dark;
+  }
+
+  &:active {
+    background-color: @gray-lighter;
+  }
+}

services/web/locales/en.json

@@ -119,6 +119,7 @@
   "back_to_account_settings": "Back to account settings",
   "back_to_editor": "Back to the editor",
   "back_to_log_in": "Back to log in",
+  "back_to_subscription": "Back to Subscription",
   "back_to_your_projects": "Back to your projects",
   "become_an_advisor": "Become an __appName__ advisor",
   "best_choices_companies_universities_non_profits": "Best choice for companies, universities and non-profits",