From ba2d5db50c4b351169a393403a7bb343d7540345 Mon Sep 17 00:00:00 2001
From: Davinder Singh <davibaweja@gmail.com>
Date: Tue, 14 Feb 2023 10:21:09 +0000
Subject: [PATCH] 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
---
 .../web/frontend/extracted-translations.json  |  1 +
 .../components/group-members.tsx              | 11 ++++++-
 .../components/managers-table.tsx             | 11 ++++++-
 .../js/shared/components/material-icon.tsx    | 31 +++++++++++++++++++
 .../stylesheets/app/subscription.less         | 16 ++++++++++
 services/web/locales/en.json                  |  1 +
 6 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 services/web/frontend/js/shared/components/material-icon.tsx

diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index d6e3b8f29f..d673fd4c4b 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/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>",
diff --git a/services/web/frontend/js/features/group-management/components/group-members.tsx b/services/web/frontend/js/features/group-management/components/group-members.tsx
index 0767a4e427..959bba288e 100644
--- a/services/web/frontend/js/features/group-management/components/group-members.tsx
+++ b/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">
diff --git a/services/web/frontend/js/features/group-management/components/managers-table.tsx b/services/web/frontend/js/features/group-management/components/managers-table.tsx
index 2684f3b7c7..cc17cbf1b2 100644
--- a/services/web/frontend/js/features/group-management/components/managers-table.tsx
+++ b/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">
diff --git a/services/web/frontend/js/shared/components/material-icon.tsx b/services/web/frontend/js/shared/components/material-icon.tsx
new file mode 100644
index 0000000000..b3d38c4494
--- /dev/null
+++ b/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
diff --git a/services/web/frontend/stylesheets/app/subscription.less b/services/web/frontend/stylesheets/app/subscription.less
index b830c1186f..a4d3b48933 100644
--- a/services/web/frontend/stylesheets/app/subscription.less
+++ b/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;
+  }
+}
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 72583abc7e..7f4cf0dc9d 100644
--- a/services/web/locales/en.json
+++ b/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",