@sanity/dashboard 2.30.2-shopify.2 → 3.0.0-studio-v3.1

package/src/index.tsx

@@ -0,0 +1,62 @@
+import React, {CSSProperties} from 'react'
+import {Dashboard} from './containers/Dashboard'
+import {createPlugin} from 'sanity'
+import {DashboardConfig, DashboardWidget, LayoutConfig} from './types'
+
+const strokeStyle: CSSProperties = {
+  stroke: 'currentColor',
+  strokeWidth: 1.2,
+}
+
+const DashboardIcon = () => (
+  <svg
+    data-sanity-icon
+    viewBox="0 0 25 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid"
+    width="1em"
+    height="1em"
+  >
+    <path d="M19.5 19.5H5.5V5.5H19.5V19.5Z" style={strokeStyle} />
+    <path d="M5.5 12.5H19.5" style={strokeStyle} />
+    <path d="M14.5 19.5V12.5M10.5 12.5V5.5" style={strokeStyle} />
+  </svg>
+)
+
+export * from './types'
+export * from './components/DashboardWidgetContainer'
+export * from './widgets/projectInfo'
+export * from './widgets/projectUsers'
+export * from './widgets/sanityTutorials'
+
+export interface DashboardPluginConfig {
+  widgets?: DashboardWidget[]
+
+  /**
+   * Will be used for widgets that do not define a layout directly.
+   */
+  defaultLayout?: LayoutConfig
+}
+
+export const dashboardTool = createPlugin<DashboardPluginConfig>((config = {}) => {
+  const pluginConfig: DashboardConfig = {
+    layout: config.defaultLayout ?? {},
+    widgets: config.widgets ?? [],
+  }
+
+  return {
+    name: 'dashboard',
+    tools: (prev, context) => {
+      return [
+        ...prev,
+        {
+          title: 'Dashboard',
+          name: 'dashboard',
+          icon: DashboardIcon,
+          component: () => <Dashboard config={pluginConfig} />,
+        },
+      ]
+    },
+  }
+})

package/src/types.ts

@@ -0,0 +1,21 @@
+import {ComponentClass, FunctionComponent} from 'react'
+
+export interface DashboardWidget {
+  name: string
+  type?: '__experimental_group'
+  component: FunctionComponent<any> | ComponentClass<any>
+  layout?: LayoutConfig
+  widgets?: DashboardWidget[]
+}
+
+export type LayoutSize = 'auto' | 'small' | 'medium' | 'large' | 'full'
+
+export interface LayoutConfig {
+  width?: LayoutSize
+  height?: LayoutSize
+}
+
+export interface DashboardConfig {
+  widgets: DashboardWidget[]
+  layout?: LayoutConfig
+}

package/src/versionedClient.ts

@@ -0,0 +1,7 @@
+import {useClient} from 'sanity'
+import {useMemo} from 'react'
+
+export function useVersionedClient() {
+  const client = useClient()
+  return useMemo(() => client.withConfig({apiVersion: '1'}), [client])
+}

package/src/widgets/projectInfo/ProjectInfo.tsx

@@ -0,0 +1,233 @@
+import React, {useEffect, useMemo, useState} from 'react'
+import {Box, Card, Stack, Heading, Grid, Label, Text, Code, Button} from '@sanity/ui'
+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
+}
+
+function isUrl(url?: string) {
+  return url && /^https?:\/\//.test(`${url}`)
+}
+
+function getGraphQlUrl(projectId: string, dataset: string) {
+  return `https://${projectId}.api.sanity.io/v1/graphql/${dataset}/default`
+}
+
+function getGroqUrl(projectId: string, dataset: string) {
+  return `https://${projectId}.api.sanity.io/v1/groq/${dataset}`
+}
+
+function getManageUrl(projectId: string) {
+  return `https://manage.sanity.io/projects/${projectId}`
+}
+
+const NO_EXPERIMENTAL: DashboardWidget[] = []
+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 versionedClient = useVersionedClient()
+  const {projectId = 'unknown', dataset = 'unknown'} = versionedClient.config()
+
+  useEffect(() => {
+    const subscriptions: Subscription[] = []
+
+    subscriptions.push(
+      versionedClient.observable
+        .request<{studioHost: string}>({uri: `/projects/${projectId}`})
+        .subscribe({
+          next: (result) => {
+            const {studioHost: host} = result
+            setStudioHost(host ? `https://${host}.sanity.studio` : undefined)
+          },
+          error: (error) => {
+            console.error('Error while looking for studioHost', error)
+            setStudioHost({
+              error: 'Something went wrong while looking up studioHost. See console.',
+            })
+          },
+        })
+    )
+
+    // ping assumed graphql endpoint
+    subscriptions.push(
+      versionedClient.observable
+        .request({
+          method: 'HEAD',
+          uri: `/graphql/${dataset}/default`,
+        })
+        .subscribe({
+          next: () => setGraphQlApi(getGraphQlUrl(projectId, dataset)),
+          error: (error) => {
+            if (error.statusCode === 404) {
+              setGraphQlApi(undefined)
+            } else {
+              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])
+
+  const assembleTableRows = useMemo(() => {
+    let result: App[] = [
+      {
+        title: 'Sanity project',
+        rows: [
+          {title: 'Project ID', value: projectId},
+          {title: 'Dataset', value: dataset},
+        ],
+      },
+    ]
+
+    // Handle any apps
+    const apps: App[] = [
+      studioHost ? {title: 'Studio', value: studioHost} : null,
+      ...data.filter((item) => item.category === 'apps'),
+    ].filter((a): a is App => !!a)
+    if (apps.length > 0) {
+      result = result.concat([{title: 'Apps', rows: apps}])
+    }
+
+    // Handle APIs
+    result = result.concat(
+      [
+        {
+          title: 'APIs',
+          rows: [
+            {title: 'GROQ', value: getGroqUrl(projectId, dataset)},
+            {
+              title: 'GraphQL',
+              value: (typeof graphqlApi === 'object' ? 'Error' : graphqlApi) ?? 'Not deployed',
+            },
+          ],
+        },
+      ],
+      data.filter((item) => item.category === 'apis')
+    )
+
+    // Handle whatever else there might be
+    const otherStuff: Record<string, ProjectData[]> = {}
+    data.forEach((item) => {
+      if (item.category && item.category !== 'apps' && item.category !== 'apis') {
+        if (!otherStuff[item.category]) {
+          otherStuff[item.category] = []
+        }
+        otherStuff[item.category].push(item)
+      }
+    })
+    Object.keys(otherStuff).forEach((category) => {
+      result.push({title: category, rows: otherStuff[category]})
+    })
+
+    return result
+  }, [graphqlApi, studioHost, projectId, dataset, data])
+
+  return (
+    <>
+      {__experimental_before.map((widgetConfig, idx) => (
+        <WidgetContainer key={idx} {...widgetConfig} />
+      ))}
+      <Box height="fill" marginTop={__experimental_before?.length > 0 ? 4 : 0}>
+        <DashboardWidgetContainer
+          footer={
+            <Button
+              style={{width: '100%'}}
+              paddingX={2}
+              paddingY={4}
+              mode="bleed"
+              tone="primary"
+              text="Manage project"
+              as="a"
+              href={getManageUrl(projectId)}
+            />
+          }
+        >
+          <Card
+            paddingY={4}
+            radius={2}
+            role="table"
+            aria-label="Project info"
+            aria-describedby="project_info_table"
+          >
+            <Stack space={4}>
+              <Box paddingX={3} as="header">
+                <Heading size={1} as="h2" id="project_info_table">
+                  Project info
+                </Heading>
+              </Box>
+              {assembleTableRows.map((item) => {
+                if (!item || !item.rows) {
+                  return null
+                }
+
+                return (
+                  <Stack key={item.title} space={3}>
+                    <Card borderBottom padding={3}>
+                      <Label size={0} muted role="columnheader">
+                        {item.title}
+                      </Label>
+                    </Card>
+                    <Stack space={4} paddingX={3} role="rowgroup">
+                      {item.rows.map((row) => {
+                        return (
+                          <Grid key={row.title} columns={2} role="row">
+                            <Text weight="medium" role="rowheader">
+                              {row.title}
+                            </Text>
+                            {typeof row.value === 'object' && (
+                              <Text size={1}>{row.value?.error}</Text>
+                            )}
+                            {typeof row.value === 'string' && (
+                              <>
+                                {isUrl(row.value) ? (
+                                  <Text size={1} role="cell" style={{wordBreak: 'break-word'}}>
+                                    <a href={row.value}>{row.value}</a>
+                                  </Text>
+                                ) : (
+                                  <Code size={1} role="cell" style={{wordBreak: 'break-word'}}>
+                                    {row.value}
+                                  </Code>
+                                )}
+                              </>
+                            )}
+                          </Grid>
+                        )
+                      })}
+                    </Stack>
+                  </Stack>
+                )
+              })}
+            </Stack>
+          </Card>
+        </DashboardWidgetContainer>
+      </Box>
+    </>
+  )
+}

package/src/widgets/projectInfo/index.ts

@@ -0,0 +1,10 @@
+import {ProjectInfo} from './ProjectInfo'
+import {LayoutConfig, DashboardWidget} from '../../types'
+
+export function projectInfoWidget(config?: {layout?: LayoutConfig}): DashboardWidget {
+  return {
+    name: 'project-info',
+    component: ProjectInfo,
+    layout: config?.layout ?? {width: 'medium'},
+  }
+}

package/src/widgets/projectUsers/ProjectUsers.tsx

@@ -0,0 +1,170 @@
+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} from 'sanity/_unstable'
+import {useVersionedClient} from '../../versionedClient'
+import {User} from 'sanity'
+import {DashboardWidgetContainer} from '../../components/DashboardWidgetContainer'
+import {useUserStore} from 'sanity/lib/dts/src/datastores'
+
+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;
+  }
+`
+
+function getInviteUrl(projectId: string) {
+  return `https://manage.sanity.io/projects/${projectId}/team/invite`
+}
+
+interface Member {
+  id: string
+  role: string
+  isRobot: boolean
+}
+
+interface Project {
+  id: string
+  members: Member[]
+}
+
+export function ProjectUsers() {
+  const [project, setProject] = useState<Project | undefined>()
+  const [users, setUsers] = useState<User[] | undefined>()
+  const [error, setError] = useState<Error | undefined>()
+
+  const userStore = useUserStore()
+  const versionedClient = useVersionedClient()
+
+  const fetchData = useCallback(() => {
+    const {projectId} = versionedClient.config()
+    const subscription = versionedClient.observable
+      .request<Project>({
+        uri: `/projects/${projectId}`,
+      })
+      .pipe(
+        switchMap((_project) =>
+          from(userStore.getUsers(_project.members.map((mem) => mem.id))).pipe(
+            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)
+            )
+          )
+        },
+        error: (e: Error) => setError(e),
+      })
+
+    return () => subscription.unsubscribe()
+  }, [userStore, versionedClient])
+
+  useEffect(() => fetchData(), [fetchData])
+
+  const handleRetryFetch = useCallback(() => fetchData(), [fetchData])
+
+  const isLoading = !users || !project
+
+  if (error) {
+    return (
+      <DashboardWidgetContainer header="Project users">
+        <Box padding={4}>
+          <Text>
+            Something went wrong while fetching data. You could{' '}
+            <a onClick={handleRetryFetch} title="Retry users fetch" style={{cursor: 'pointer'}}>
+              retry
+            </a>
+            ..?
+          </Text>
+        </Box>
+      </DashboardWidgetContainer>
+    )
+  }
+
+  return (
+    <DashboardWidgetContainer
+      header="Project users"
+      footer={
+        <Button
+          style={{width: '100%'}}
+          paddingX={2}
+          paddingY={4}
+          mode="bleed"
+          tone="primary"
+          text="Invite members"
+          as="a"
+          loading={isLoading}
+          href={isLoading ? undefined : getInviteUrl(project.id)}
+        />
+      }
+    >
+      {isLoading && (
+        <Box paddingY={5} paddingX={2}>
+          <Stack space={4}>
+            <Text align="center" muted size={1}>
+              <Spinner />
+            </Text>
+            <Text align="center" size={1} muted>
+              Loading items...
+            </Text>
+          </Stack>
+        </Box>
+      )}
+
+      {!isLoading && (
+        <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>
+            )
+          })}
+        </Stack>
+      )}
+    </DashboardWidgetContainer>
+  )
+}
+
+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
+  }
+  return 0
+}

package/src/widgets/projectUsers/index.ts

@@ -0,0 +1,10 @@
+import {ProjectUsers} from './ProjectUsers'
+import {LayoutConfig, DashboardWidget} from '../../types'
+
+export function projectUsersWidget(config?: {layout?: LayoutConfig}): DashboardWidget {
+  return {
+    name: 'project-info',
+    component: ProjectUsers,
+    layout: config?.layout,
+  }
+}

package/src/widgets/sanityTutorials/SanityTutorials.tsx

@@ -0,0 +1,77 @@
+import React, {useEffect, useState} from 'react'
+import {Flex} from '@sanity/ui'
+import {Tutorial} from './Tutorial'
+import {FeedItem, Guide, useDataAdapter} from './dataAdapter'
+import {DashboardWidgetContainer} from '../../components/DashboardWidgetContainer'
+
+function createUrl(slug: {current: string}, type?: string) {
+  if (type === 'tutorial') {
+    return `https://www.sanity.io/docs/tutorials/${slug.current}`
+  } else if (type === 'guide') {
+    return `https://www.sanity.io/docs/guides/${slug.current}`
+  }
+  return false
+}
+
+export interface SanityTutorialsProps {
+  templateRepoId: string
+}
+
+export function SanityTutorials(props: SanityTutorialsProps) {
+  const {templateRepoId} = props
+  const [feedItems, setFeedItems] = useState<FeedItem[]>([])
+
+  const {getFeed, urlBuilder} = useDataAdapter()
+
+  useEffect(() => {
+    const subscription = getFeed(templateRepoId).subscribe((response) => {
+      setFeedItems(response.items)
+    })
+    return () => {
+      subscription.unsubscribe()
+    }
+  }, [setFeedItems, getFeed, templateRepoId])
+
+  const title = 'Learn about Sanity'
+
+  return (
+    <DashboardWidgetContainer header={title}>
+      <Flex as="ul" overflow="auto" align="stretch" paddingY={2}>
+        {feedItems?.map((feedItem, index) => {
+          if (!feedItem.title || (!feedItem.guideOrTutorial && !feedItem.externalLink)) {
+            return null
+          }
+          const presenter = feedItem.presenter || feedItem.guideOrTutorial?.presenter || {}
+          const subtitle = feedItem.category
+          const {guideOrTutorial = {} as Guide} = feedItem
+          const href =
+            (guideOrTutorial.slug
+              ? createUrl(guideOrTutorial.slug, guideOrTutorial._type)
+              : feedItem.externalLink) || feedItem.externalLink
+
+          return (
+            <Flex
+              as="li"
+              key={feedItem._id}
+              paddingRight={index < feedItems?.length - 1 ? 1 : 3}
+              paddingLeft={index === 0 ? 3 : 0}
+              align="stretch"
+              style={{minWidth: 272, width: '30%'}}
+            >
+              <Tutorial
+                title={feedItem.title}
+                href={href ?? ''}
+                presenterName={presenter.name}
+                presenterSubtitle={subtitle}
+                showPlayIcon={feedItem.hasVideo}
+                posterURL={
+                  feedItem.poster ? urlBuilder.image(feedItem.poster).height(360).url() : undefined
+                }
+              />
+            </Flex>
+          )
+        })}
+      </Flex>
+    </DashboardWidgetContainer>
+  )
+}