Merge pull request #19181 from overleaf/rh-share-modal-collab-view

[web] Styling tweaks in new share modal

GitOrigin-RevId: 2b69612aff518ae0cb4f08851adc73971e5ac983

services/web/frontend/extracted-translations.json

@@ -133,6 +133,7 @@
   "can_link_institution_email_acct_to_institution_acct": "",
   "can_link_your_institution_acct_2": "",
   "can_now_relink_dropbox": "",
+  "can_view": "",
   "cancel": "",
   "cancel_anytime": "",
   "cancel_my_account": "",

services/web/frontend/js/features/share-project-modal/components/restricted-link-sharing/add-collaborators.jsx

@@ -1,6 +1,6 @@
 import { useState, useMemo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Col, Form, Button } from 'react-bootstrap'
+import { Form, FormGroup, FormControl, Button } from 'react-bootstrap'
 import { useMultipleSelection } from 'downshift'
 import { useShareProjectContext } from './share-project-modal'
 import SelectCollaborators from './select-collaborators'
@@ -141,7 +141,7 @@ export default function AddCollaborators({ readOnly }) {
 
   return (
     <Form className="add-collabs">
-      <Col xs={10}>
+      <FormGroup>
         <SelectCollaborators
           loading={!nonMemberContacts}
           options={nonMemberContacts || []}
@@ -151,11 +151,21 @@ export default function AddCollaborators({ readOnly }) {
           setPrivileges={setPrivileges}
           readOnly={readOnly}
         />
-      </Col>
-
-      <Col xs={2}>
-        <div>
-          <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
+      </FormGroup>
+
+      <FormGroup>
+        <div className="pull-right">
+          <FormControl
+            componentClass="select"
+            className="privileges"
+            bsSize="sm"
+            value={privileges}
+            onChange={event => setPrivileges(event.target.value)}
+          >
+            <option value="readAndWrite">{t('can_edit')}</option>
+            <option value="readOnly">{t('can_view')}</option>
+          </FormControl>
+          <span>&nbsp;&nbsp;</span>
           <ClickableElementEnhancer
             as={Button}
             onClick={handleSubmit}
@@ -164,7 +174,7 @@ export default function AddCollaborators({ readOnly }) {
             {t('invite')}
           </ClickableElementEnhancer>
         </div>
-      </Col>
+      </FormGroup>
     </Form>
   )
 }

services/web/frontend/js/features/share-project-modal/components/restricted-link-sharing/collaborators-limit-upgrade.tsx

@@ -9,7 +9,7 @@ export default function CollaboratorsLimitUpgrade() {
   const { features } = useProjectContext()
 
   return (
-    <div>
+    <div className="invite-warning">
       <Notification
         type="info"
         customIcon={<div />}

services/web/frontend/js/features/share-project-modal/components/restricted-link-sharing/link-sharing.jsx

@@ -53,6 +53,7 @@ export default function LinkSharing() {
           setAccessLevel={setAccessLevel}
           inflight={inflight}
           projectId={projectId}
+          setShowLinks={setShowLinks}
         />
       )
 
@@ -83,7 +84,7 @@ export default function LinkSharing() {
   }
 }
 
-function PrivateSharing({ setAccessLevel, inflight, projectId }) {
+function PrivateSharing({ setAccessLevel, inflight, projectId, setShowLinks }) {
   const { t } = useTranslation()
   return (
     <Row className="public-access-level">
@@ -97,6 +98,7 @@ function PrivateSharing({ setAccessLevel, inflight, projectId }) {
           onClick={() => {
             setAccessLevel('tokenBased')
             eventTracking.sendMB('link-sharing-click', { projectId })
+            setShowLinks(true)
           }}
           disabled={inflight}
         >
@@ -113,6 +115,7 @@ PrivateSharing.propTypes = {
   setAccessLevel: PropTypes.func.isRequired,
   inflight: PropTypes.bool,
   projectId: PropTypes.string,
+  setShowLinks: PropTypes.func.isRequired,
 }
 
 function TokenBasedSharing({

services/web/frontend/js/features/share-project-modal/components/restricted-link-sharing/select-collaborators.jsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
 import { matchSorter } from 'match-sorter'
 import { useCombobox } from 'downshift'
 import classnames from 'classnames'
-import { FormControl } from 'react-bootstrap'
 
 import Icon from '@/shared/components/icon'
 
@@ -158,8 +157,7 @@ export default function SelectCollaborators({
 
       <div className="host">
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
-
-        <div {...getComboboxProps()} className="tags">
+        <div {...getComboboxProps()} className="tags" onClick={focusInput}>
           <div className="tags-main">
             {selectedItems.map((selectedItem, index) => (
               <SelectedItem
@@ -242,16 +240,6 @@ export default function SelectCollaborators({
               )}
             />
           </div>
-          <FormControl
-            componentClass="select"
-            className="privileges"
-            bsSize="sm"
-            value={privileges}
-            onChange={event => setPrivileges(event.target.value)}
-          >
-            {!readOnly && <option value="readAndWrite">{t('can_edit')}</option>}
-            <option value="readOnly">{t('read_only')}</option>
-          </FormControl>
         </div>
 
         <div className={classnames({ autocomplete: isOpen })}>

services/web/frontend/js/features/share-project-modal/components/restricted-link-sharing/view-member.jsx

@@ -1,12 +1,18 @@
 import PropTypes from 'prop-types'
 import { Col, Row } from 'react-bootstrap'
 import MemberPrivileges from './member-privileges'
+import Icon from '@/shared/components/icon'
 
 export default function ViewMember({ member }) {
   return (
     <Row className="project-member">
-      <Col xs={7}>{member.email}</Col>
-      <Col xs={3}>
+      <Col xs={9}>
+        <div className="project-member-email-icon">
+          <Icon type="user" fw />
+          <div className="email-warning">{member.email}</div>
+        </div>
+      </Col>
+      <Col xs={3} className="text-left">
         <MemberPrivileges privileges={member.privileges} />
       </Col>
     </Row>

services/web/frontend/stylesheets/app/editor/share.less

@@ -120,9 +120,6 @@
     padding: @line-height-computed / 2;
     background-color: @gray-lightest;
     margin-top: @line-height-computed / 2;
-    .add-collabs {
-      margin-top: @line-height-computed / 2;
-    }
     form {
       .form-group {
         margin-bottom: @line-height-computed / 2;
@@ -187,7 +184,10 @@
     margin-top: 0;
   }
   .public-access-level {
-    padding: 0;
     border: none;
   }
+
+  .invite-warning {
+    margin-bottom: @line-height-computed / 2;
+  }
 }

services/web/frontend/stylesheets/components/tags-input.less

@@ -30,8 +30,7 @@
   background-color: #fff;
   height: 100%;
   display: flex;
-  justify-content: space-between;
-  flex-direction: row;
+  flex-wrap: wrap;
 }
 .tags-input .tags:focus-within {
   &:extend(.input-focus-style);
@@ -160,9 +159,3 @@
   font-weight: bold;
   font-style: normal;
 }
-
-.modal-link-share-new {
-  .tags-input .tags {
-    padding: 0 0 0 5px;
-  }
-}

services/web/locales/en.json

@@ -196,12 +196,13 @@
   "by_joining_labs": "By joining Labs, you agree to receive occasional emails and updates from Overleaf—for example, to request your feedback. You also agree to our <0>terms of service</0> and <1>privacy notice</1>.",
   "by_registering_you_agree_to_our_terms_of_service": "By registering, you agree to our <0>terms of service</0> and <1>privacy notice</1>.",
   "by_subscribing_you_agree_to_our_terms_of_service": "By subscribing, you agree to our <0>terms of service</0>.",
-  "can_edit": "Can Edit",
+  "can_edit": "Can edit",
   "can_link_institution_email_acct_to_institution_acct": "You can now link your <b>__email__</b> <b>__appName__</b> account to your <b>__institutionName__</b> institutional account.",
   "can_link_institution_email_by_clicking": "You can link your <b>__email__</b> <b>__appName__</b> account to your  <b>__institutionName__</b> account by clicking <b>__clickText__</b>.",
   "can_link_institution_email_to_login": "You can link your <b>__email__</b> <b>__appName__</b> account to your <b>__institutionName__</b> account, which will allow you to log in to <b>__appName__</b> through your institution and will reconfirm your institutional email address.",
   "can_link_your_institution_acct_2": "You can now <0>link</0> your <0>__appName__</0> account to your <0>__institutionName__</0> institutional account.",
   "can_now_relink_dropbox": "You can now <0>relink your Dropbox account</0>.",
+  "can_view": "Can view",
   "cancel": "Cancel",
   "cancel_anytime": "We’re confident that you’ll love __appName__, but if not you can cancel anytime. We’ll give you your money back, no questions asked, if you let us know within 30 days.",
   "cancel_my_account": "Cancel my subscription",

services/web/test/frontend/features/share-project-modal/components/share-project-modal.test.jsx

@@ -615,7 +615,7 @@ describe('<ShareProjectModal/>', function () {
       },
     })
 
-    const privilegesElement = screen.getByDisplayValue('Can Edit')
+    const privilegesElement = screen.getByDisplayValue('Can edit')
     fireEvent.change(privilegesElement, { target: { value: 'readOnly' } })
 
     const submitButton = screen.getByRole('button', { name: 'Share' })