@sanity/dashboard 3.1.6 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/dashboard",
-  "version": "3.1.6",
+  "version": "4.1.0",
   "description": "Tool for rendering dashboard widgets",
   "keywords": [
     "sanity",
@@ -22,19 +22,18 @@
   },
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
+  "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./lib/index.d.ts",
       "source": "./src/index.ts",
-      "import": "./lib/index.esm.js",
+      "import": "./lib/index.mjs",
       "require": "./lib/index.js",
-      "default": "./lib/index.esm.js"
+      "default": "./lib/index.mjs"
     },
     "./package.json": "./package.json"
   },
   "main": "./lib/index.js",
   "module": "./lib/index.esm.js",
-  "source": "./src/index.ts",
   "types": "./lib/index.d.ts",
   "files": [
     "lib",
@@ -44,60 +43,65 @@
   ],
   "scripts": {
     "prebuild": "npm run clean && plugin-kit verify-package --silent && pkg-utils",
-    "build": "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
+    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
     "clean": "rimraf lib",
     "compile": "tsc --noEmit",
+    "dev": "sanity dev",
     "format": "prettier --write --cache --ignore-unknown .",
     "link-watch": "plugin-kit link-watch",
     "lint": "eslint .",
     "prepare": "husky install",
-    "prepublishOnly": "run-s build",
+    "prepublishOnly": "npm run build",
     "watch": "pkg-utils watch --strict"
   },
+  "browserslist": "extends @sanity/browserslist-config",
   "dependencies": {
-    "@sanity/icons": "^2.0.0",
-    "@sanity/image-url": "^1.0.1",
+    "@sanity/icons": "^3.3.0",
+    "@sanity/image-url": "^1.0.2",
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^1.0.0",
+    "@sanity/ui": "^2.6.8",
     "lodash": "^4.17.21",
-    "rxjs": "^7.0.0"
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.8.1",
-    "@commitlint/config-conventional": "^17.8.1",
-    "@sanity/pkg-utils": "^2.4.10",
-    "@sanity/plugin-kit": "^3.1.10",
-    "@sanity/semantic-release-preset": "^2.0.5",
-    "@types/react": "^18.2.33",
-    "@types/styled-components": "^5.1.29",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "eslint": "^8.52.0",
-    "eslint-config-prettier": "^8.10.0",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "@sanity/pkg-utils": "^6.11.2",
+    "@sanity/plugin-kit": "^4.0.18",
+    "@sanity/semantic-release-preset": "^5.0.0",
+    "@types/react": "^18.3.10",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-sanity": "^6.0.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
-    "prettier-plugin-packagejson": "^2.4.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
-    "rimraf": "^3.0.2",
-    "sanity": "^3.19.0",
-    "styled-components": "^6.1.1",
-    "typescript": "^4.9.5"
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.3.0",
+    "npm-run-all2": "^5.0.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-packagejson": "^2.5.2",
+    "semantic-release": "^24.1.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
+    "rimraf": "^6.0.0",
+    "sanity": "^3.59.0",
+    "styled-components": "^6.1.13",
+    "typescript": "^5.6.2"
   },
   "peerDependencies": {
     "react": "^18",
     "sanity": "^3",
-    "styled-components": "^5.2 || ^6.0.0"
+    "styled-components": "^6.1"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=18"
+  },
+  "overrides": {
+    "conventional-changelog-conventionalcommits": ">= 8.0.0"
   },
   "sanityExchangeUrl": "https://www.sanity.io/exchange/dashboard"
 }

package/src/components/DashboardWidgetContainer.tsx

@@ -1,6 +1,6 @@
 import React, {forwardRef} from 'react'
 import {Card, Box, Heading} from '@sanity/ui'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 const Root = styled(Card)`
   display: flex;
@@ -49,7 +49,7 @@ interface DashboardWidgetProps {
 
 export const DashboardWidgetContainer = forwardRef(function DashboardWidgetContainer(
   props: DashboardWidgetProps,
-  ref: React.Ref<HTMLDivElement>
+  ref: React.Ref<HTMLDivElement>,
 ) {
   const {header, children, footer} = props
 

package/src/components/NotFoundWidget.tsx

@@ -1,6 +1,6 @@
 import React, {PropsWithChildren, ReactNode} from 'react'
 import {Card, Stack, Heading, Box} from '@sanity/ui'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 const Root = styled(Card)`
   display: flex;

package/src/components/WidgetGroup.tsx

@@ -1,22 +1,20 @@
 import React from 'react'
-import styled, {css} from 'styled-components'
+import {styled, css} from 'styled-components'
 import {Box, Card, Grid, Text} from '@sanity/ui'
 import {WidgetContainer} from '../containers/WidgetContainer'
 import {DashboardConfig, LayoutConfig, DashboardWidget} from '../types'
 
 const media = {
-  small: (...args: Parameters<typeof css>) =>
-    css`
-      @media (min-width: ${({theme}) => theme.sanity.media[0]}px) {
-        ${css(...args)}
-      }
-    `,
-  medium: (...args: Parameters<typeof css>) =>
-    css`
-      @media (min-width: ${({theme}) => theme.sanity.media[2]}px) {
-        ${css(...args)}
-      }
-    `,
+  small: (...args: Parameters<typeof css>) => css`
+    @media (min-width: ${({theme}) => theme.sanity.media[0]}px) {
+      ${css(...args)}
+    }
+  `,
+  medium: (...args: Parameters<typeof css>) => css`
+    @media (min-width: ${({theme}) => theme.sanity.media[2]}px) {
+      ${css(...args)}
+    }
+  `,
 }
 
 const Root = styled(Grid)`

package/src/containers/WidgetContainer.tsx

@@ -10,7 +10,7 @@ export function WidgetContainer(props: DashboardWidget) {
       ...(props.layout || {}),
       ...(config.layout || {}),
     }),
-    [props.layout, config.layout]
+    [props.layout, config.layout],
   )
 
   return (

package/src/versionedClient.ts

@@ -1,5 +1,5 @@
 import {useClient} from 'sanity'
 
 export function useVersionedClient() {
-  return useClient({apiVersion: '1'})
+  return useClient({apiVersion: '2024-08-01'})
 }

package/src/widgets/projectInfo/ProjectInfo.tsx

@@ -4,29 +4,14 @@ import {useVersionedClient} from '../../versionedClient'
 import {Subscription} from 'rxjs'
 import {WidgetContainer} from '../../containers/WidgetContainer'
 import {DashboardWidgetContainer} from '../../components/DashboardWidgetContainer'
-import {DashboardWidget} from '../../types'
-
-export interface ProjectInfoProps {
-  __experimental_before?: DashboardWidget[]
-  data: ProjectData[]
-}
-
-interface App {
-  title: string
-  rows?: App[]
-  value?: string | {error: string}
-}
-
-interface ProjectData {
-  title: string
-  category?: string
-}
+import {type DashboardWidget} from '../../types'
+import {type App, type ProjectInfoProps, type ProjectData, UserApplication} from './types'
 
 function isUrl(url?: string) {
   return url && /^https?:\/\//.test(`${url}`)
 }
 
-function getGraphQlUrl(projectId: string, dataset: string) {
+function getGraphQLUrl(projectId: string, dataset: string) {
   return `https://${projectId}.api.sanity.io/v1/graphql/${dataset}/default`
 }
 
@@ -43,8 +28,8 @@ const NO_DATA: ProjectData[] = []
 
 export function ProjectInfo(props: ProjectInfoProps) {
   const {__experimental_before = NO_EXPERIMENTAL, data = NO_DATA} = props
-  const [studioHost, setStudioHost] = useState<string | {error: string} | undefined>()
-  const [graphqlApi, setGraphQlApi] = useState<string | {error: string} | undefined>()
+  const [studioApps, setStudioApps] = useState<UserApplication[] | {error: string} | undefined>()
+  const [graphQLApi, setGraphQLApi] = useState<string | {error: string} | undefined>()
   const versionedClient = useVersionedClient()
   const {projectId = 'unknown', dataset = 'unknown'} = versionedClient.config()
 
@@ -53,19 +38,16 @@ export function ProjectInfo(props: ProjectInfoProps) {
 
     subscriptions.push(
       versionedClient.observable
-        .request<{studioHost: string}>({uri: `/projects/${projectId}`})
+        .request<UserApplication[]>({uri: '/user-applications', tag: 'dashboard.project-info'})
         .subscribe({
-          next: (result) => {
-            const {studioHost: host} = result
-            setStudioHost(host ? `https://${host}.sanity.studio` : undefined)
-          },
+          next: (result) => setStudioApps(result.filter((app) => app.type === 'studio')),
           error: (error) => {
-            console.error('Error while looking for studioHost', error)
-            setStudioHost({
-              error: 'Something went wrong while looking up studioHost. See console.',
+            console.error('Error while resolving user applications', error)
+            setStudioApps({
+              error: 'Something went wrong while resolving user applications. See console.',
             })
           },
-        })
+        }),
     )
 
     // ping assumed graphql endpoint
@@ -74,26 +56,27 @@ export function ProjectInfo(props: ProjectInfoProps) {
         .request({
           method: 'HEAD',
           uri: `/graphql/${dataset}/default`,
+          tag: 'dashboard.project-info.graphql-api',
         })
         .subscribe({
-          next: () => setGraphQlApi(getGraphQlUrl(projectId, dataset)),
+          next: () => setGraphQLApi(getGraphQLUrl(projectId, dataset)),
           error: (error) => {
             if (error.statusCode === 404) {
-              setGraphQlApi(undefined)
+              setGraphQLApi(undefined)
             } else {
-              console.error('Error while looking for graphqlApi', error)
-              setGraphQlApi({
-                error: 'Something went wrong while looking up graphqlApi. See console.',
+              console.error('Error while looking for graphQLApi', error)
+              setGraphQLApi({
+                error: 'Something went wrong while looking up graphQLApi. See console.',
               })
             }
           },
-        })
+        }),
     )
 
     return () => {
       subscriptions.forEach((s) => s.unsubscribe())
     }
-  }, [dataset, projectId, versionedClient, setGraphQlApi, setStudioHost])
+  }, [dataset, projectId, versionedClient, setGraphQLApi])
 
   const assembleTableRows = useMemo(() => {
     let result: App[] = [
@@ -106,11 +89,16 @@ export function ProjectInfo(props: ProjectInfoProps) {
       },
     ]
 
-    // Handle any apps
-    const apps: App[] = [
-      studioHost ? {title: 'Studio', value: studioHost} : null,
-      ...data.filter((item) => item.category === 'apps'),
-    ].filter((a): a is App => !!a)
+    const apps: App[] = data.filter((item) => item.category === 'apps')
+
+    // Handle studios
+    ;(Array.isArray(studioApps) ? studioApps : []).forEach((app) => {
+      apps.push({
+        title: app.title || 'Studio',
+        value: app.urlType === 'internal' ? `https://${app.appHost}.sanity.studio` : app.appHost,
+      })
+    })
+
     if (apps.length > 0) {
       result = result.concat([{title: 'Apps', rows: apps}])
     }
@@ -124,12 +112,12 @@ export function ProjectInfo(props: ProjectInfoProps) {
             {title: 'GROQ', value: getGroqUrl(projectId, dataset)},
             {
               title: 'GraphQL',
-              value: (typeof graphqlApi === 'object' ? 'Error' : graphqlApi) ?? 'Not deployed',
+              value: (typeof graphQLApi === 'object' ? 'Error' : graphQLApi) ?? 'Not deployed',
             },
           ],
         },
       ],
-      data.filter((item) => item.category === 'apis')
+      data.filter((item) => item.category === 'apis'),
     )
 
     // Handle whatever else there might be
@@ -147,7 +135,7 @@ export function ProjectInfo(props: ProjectInfoProps) {
     })
 
     return result
-  }, [graphqlApi, studioHost, projectId, dataset, data])
+  }, [graphQLApi, studioApps, projectId, dataset, data])
 
   return (
     <>
@@ -197,7 +185,7 @@ export function ProjectInfo(props: ProjectInfoProps) {
                     <Stack space={4} paddingX={3} role="rowgroup">
                       {item.rows.map((row) => {
                         return (
-                          <Grid key={row.title} columns={2} role="row">
+                          <Grid key={`${row.value}-${row.title}`} columns={2} role="row">
                             <Text weight="medium" role="rowheader">
                               {row.title}
                             </Text>

package/src/widgets/projectInfo/index.ts

@@ -1,5 +1,5 @@
 import {ProjectInfo} from './ProjectInfo'
-import {LayoutConfig, DashboardWidget} from '../../types'
+import {type LayoutConfig, type DashboardWidget} from '../../types'
 
 export function projectInfoWidget(config?: {layout?: LayoutConfig}): DashboardWidget {
   return {

package/src/widgets/projectInfo/types.ts

@@ -0,0 +1,28 @@
+import {type DashboardWidget} from '../../types'
+
+export interface ProjectInfoProps {
+  __experimental_before?: DashboardWidget[]
+  data: ProjectData[]
+}
+
+export interface App {
+  title: string
+  rows?: App[]
+  value?: string | {error: string}
+}
+
+export interface ProjectData {
+  title: string
+  category?: string
+}
+
+export interface UserApplication {
+  id: string
+  projectId: string
+  title: string | null
+  type: string
+  urlType: 'internal' | 'external'
+  appHost: string
+
+  // … there are other props here, but we don't really care about them for our use case
+}

package/src/widgets/projectUsers/ProjectUser.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import {Box, Flex, rem, Stack, Text} from '@sanity/ui'
+import {styled} from 'styled-components'
+import {useListFormat, type User, UserAvatar} from 'sanity'
+import {RobotIcon} from '@sanity/icons'
+
+const Root = styled(Flex)`
+  height: ${rem(33)}; // 33 = PREVIEW_SIZES.default.media.height
+  box-sizing: content-box;
+`
+
+export interface ProjectUserProps {
+  user: User
+  isRobot: boolean
+  roles: string[]
+}
+
+export function ProjectUser({user, isRobot, roles}: ProjectUserProps) {
+  const listFormat = useListFormat({style: 'narrow'})
+  return (
+    <Root align="center">
+      <Flex align="center" flex={1} gap={2}>
+        <Box flex="none">
+          {isRobot ? (
+            <Text size={2}>
+              <RobotIcon />
+            </Text>
+          ) : (
+            <UserAvatar user={user} />
+          )}
+        </Box>
+
+        <Stack flex={1} space={2}>
+          <Text size={1} style={{color: 'inherit'}} textOverflow="ellipsis" weight="medium">
+            {user.displayName}
+          </Text>
+
+          <Text muted size={1} textOverflow="ellipsis">
+            {listFormat.format(roles)}
+          </Text>
+        </Stack>
+      </Flex>
+    </Root>
+  )
+}

package/src/widgets/projectUsers/ProjectUsers.tsx

@@ -1,36 +1,23 @@
 import React, {useCallback, useEffect, useState} from 'react'
 import {from} from 'rxjs'
 import {map, switchMap} from 'rxjs/operators'
-import {Stack, Spinner, Card, Box, Text, Button} from '@sanity/ui'
-import {RobotIcon} from '@sanity/icons'
-import styled from 'styled-components'
-import {DefaultPreview, useUserStore} from 'sanity'
+import {Stack, Spinner, Box, Text, Button} from '@sanity/ui'
+import {Role, useUserStore} from 'sanity'
 import {useVersionedClient} from '../../versionedClient'
 import {User} from 'sanity'
 import {DashboardWidgetContainer} from '../../components/DashboardWidgetContainer'
-
-const AvatarWrapper = styled(Card)`
-  box-sizing: border-box;
-  border-radius: 50%;
-  border-color: transparent;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-
-  & > img {
-    width: 100%;
-    height: auto;
-  }
-`
+import {ProjectUser} from './ProjectUser'
 
 function getInviteUrl(projectId: string) {
-  return `https://manage.sanity.io/projects/${projectId}/team/invite`
+  return `https://manage.sanity.io/projects/${projectId}/members`
 }
 
 interface Member {
   id: string
-  role: string
+  roles: Role[]
   isRobot: boolean
+  isCurrentUser: boolean
+  createdAt: string
 }
 
 interface Project {
@@ -51,21 +38,22 @@ export function ProjectUsers() {
     const subscription = versionedClient.observable
       .request<Project>({
         uri: `/projects/${projectId}`,
+        tag: 'dashboard.project-users',
       })
       .pipe(
         switchMap((_project) =>
           from(userStore.getUsers(_project.members.map((mem) => mem.id))).pipe(
-            map((_users) => ({project: _project, users: _users}))
-          )
-        )
+            map((_users) => ({project: _project, users: _users})),
+          ),
+        ),
       )
       .subscribe({
         next: ({users: _users, project: _project}) => {
           setProject(_project)
           setUsers(
             (Array.isArray(_users) ? _users : [_users]).sort((userA, userB) =>
-              sortUsersByRobotStatus(userA, userB, _project)
-            )
+              sortUsersByRobotStatus(userA, userB, _project),
+            ),
           )
         },
         error: (e: Error) => setError(e),
@@ -106,7 +94,7 @@ export function ProjectUsers() {
           paddingY={4}
           mode="bleed"
           tone="primary"
-          text="Invite members"
+          text="Manage members"
           as="a"
           loading={isLoading}
           href={isLoading ? undefined : getInviteUrl(project.id)}
@@ -120,7 +108,7 @@ export function ProjectUsers() {
               <Spinner />
             </Text>
             <Text align="center" size={1} muted>
-              Loading items...
+              Loading items…
             </Text>
           </Stack>
         </Box>
@@ -130,23 +118,13 @@ export function ProjectUsers() {
         <Stack space={3} padding={3}>
           {users?.map((user) => {
             const membership = project.members.find((member) => member.id === user.id)
-            const media = membership?.isRobot ? (
-              <Text size={3}>
-                <RobotIcon />
-              </Text>
-            ) : (
-              <AvatarWrapper tone="transparent">
-                {user?.imageUrl && <img src={user.imageUrl} alt={user?.displayName} />}
-              </AvatarWrapper>
-            )
             return (
-              <Box key={user.id}>
-                <DefaultPreview
-                  title={user.displayName}
-                  subtitle={membership?.role}
-                  media={media}
-                />
-              </Box>
+              <ProjectUser
+                key={user.id}
+                user={user}
+                isRobot={membership?.isRobot ?? false}
+                roles={membership?.roles.map((role) => role.title) || []}
+              />
             )
           })}
         </Stack>
@@ -159,11 +137,12 @@ function sortUsersByRobotStatus(userA: User, userB: User, project: Project) {
   const {members} = project
   const membershipA = members.find((member) => member.id === userA?.id)
   const membershipB = members.find((member) => member.id === userB?.id)
-  if (membershipA?.isRobot) {
-    return 1
-  }
-  if (membershipB?.isRobot) {
-    return -1
+
+  // On ties, sort by when the user was added
+  if (membershipA?.isRobot === membershipB?.isRobot) {
+    return (membershipA?.createdAt || '') > (membershipB?.createdAt || '') ? 1 : -1
   }
-  return 0
+
+  // Robots go to the bottom
+  return membershipA?.isRobot ? 1 : -1
 }

package/src/widgets/sanityTutorials/Tutorial.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {Card, Box, Heading, Flex, Text, Stack} from '@sanity/ui'
 import {PlayIcon} from '@sanity/icons'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 const PlayIconBox = styled(Box)`
   position: absolute;

package/src/widgets/sanityTutorials/dataAdapter.ts

@@ -38,11 +38,12 @@ export function useDataAdapter() {
           : '/addons/dashboard'
         return versionedClient.observable.request<{items: FeedItem[]}>({
           uri,
+          tag: 'dashboard.sanity-tutorials',
           withCredentials: false,
         })
       },
       urlBuilder: imageUrlBuilder(tutorialsProjectConfig),
     }),
-    [versionedClient]
+    [versionedClient],
   )
 }