feat(sanity): Update presence menu button for inviting new collaborators (#7406)

* feat: Update precense menu button for inviting new collaborators

* feat: use query param to automatically open invite modal

* feat: update sanity icons

* Update packages/sanity/src/core/i18n/bundles/studio.ts

Co-authored-by: Jon Eide Johnsen <[email protected]>

* feat: update icon placement and i18n strings

* Update packages/sanity/src/core/studio/components/navbar/navDrawer/ManageMenu.tsx

Co-authored-by: Jon Eide Johnsen <[email protected]>

* fix: add query param to invite link

---------

Co-authored-by: Jon Eide Johnsen <[email protected]>
Co-authored-by: Rico Kahler <[email protected]>

Author: 3 people

dev/design-studio/package.json

@@ -31,7 +31,7 @@
     "start": "../.bin/sanity start --port 4000"
   },
   "dependencies": {
-    "@sanity/icons": "^3.3.1",
+    "@sanity/icons": "^3.4.0",
     "@sanity/ui": "^2.8.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

dev/studio-e2e-testing/package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@sanity/google-maps-input": "^4.0.0",
-    "@sanity/icons": "^3.3.1",
+    "@sanity/icons": "^3.4.0",
     "@sanity/ui": "^2.8.8",
     "@sanity/vision": "3.55.0",
     "react": "^18.3.1",

dev/test-studio/package.json

@@ -23,7 +23,7 @@
     "@sanity/client": "^6.21.2",
     "@sanity/color": "^3.0.0",
     "@sanity/google-maps-input": "^4.0.0",
-    "@sanity/icons": "^3.3.1",
+    "@sanity/icons": "^3.4.0",
     "@sanity/image-url": "^1.0.2",
     "@sanity/locale-ko-kr": "^1.0.1",
     "@sanity/locale-nb-no": "^1.0.1",

packages/sanity/src/core/i18n/bundles/studio.ts

@@ -1099,8 +1099,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'package-version.new-package-available.reload-button': 'Push to reload',
   /** Title of the alert for studio users when packages in their studio are out-of-date */
   'package-version.new-package-available.title': 'Sanity Studio is ready to update!',
-  /** Label for action to manage members of the current studio project */
-  'presence.action.manage-members': 'Manage members',
+  /** Label for action to invite members to the current studio project */
+  'presence.action.manage-members': 'Invite members',
   /** Accessibility label for presence menu button */
   'presence.aria-label': 'Global presence',
   /** Message description for when no one else is currently present */

packages/sanity/src/core/studio/components/navbar/navDrawer/ManageMenu.tsx

@@ -1,4 +1,4 @@
-import {CogIcon, UsersIcon} from '@sanity/icons'
+import {AddUserIcon, CogIcon} from '@sanity/icons'
 import {Card, Stack} from '@sanity/ui'
 
 import {Button} from '../../../../../ui-components'
@@ -39,8 +39,8 @@ export function ManageMenu() {
             <Button
               aria-label={t('user-menu.action.invite-members-aria-label')}
               as="a"
-              href={`https://sanity.io/manage/project/${projectId}/members`}
-              icon={UsersIcon}
+              href={`https://www.sanity.io/manage/project/${projectId}/members?invite=true`}
+              icon={AddUserIcon}
               justify="flex-start"
               mode="bleed"
               size="large"

packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx

@@ -1,4 +1,4 @@
-import {CogIcon, UsersIcon} from '@sanity/icons'
+import {AddUserIcon, UsersIcon} from '@sanity/icons'
 import {Box, Menu, MenuDivider, Stack, Text} from '@sanity/ui'
 import {useCallback, useMemo, useState} from 'react'
 import {styled} from 'styled-components'
@@ -107,8 +107,8 @@ export function PresenceMenu() {
 
             <MenuItem
               as="a"
-              href={`https://sanity.io/manage/project/${projectId}`}
-              iconRight={CogIcon}
+              href={`https://www.sanity.io/manage/project/${projectId}/members?invite=true`}
+              icon={AddUserIcon}
               onFocus={handleClearFocusedItem}
               rel="noopener noreferrer"
               target="_blank"

packages/sanity/src/core/studio/components/navbar/userMenu/ManageMenu.tsx

@@ -1,4 +1,4 @@
-import {CogIcon, UsersIcon} from '@sanity/icons'
+import {AddUserIcon, CogIcon} from '@sanity/icons'
 import {MenuDivider} from '@sanity/ui'
 
 import {MenuItem} from '../../../../../ui-components'
@@ -27,10 +27,10 @@ export function ManageMenu() {
         <MenuItem
           as="a"
           aria-label={t('user-menu.action.invite-members-aria-label')}
-          href={`https://sanity.io/manage/project/${projectId}/members`}
+          href={`https://www.sanity.io/manage/project/${projectId}/members?invite=true`}
           target="_blank"
           text={t('user-menu.action.invite-members')}
-          icon={UsersIcon}
+          icon={AddUserIcon}
         />
       )}
     </>