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

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,171 @@
+import React, {useCallback, useEffect, useState} from 'react'
+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 {useSource} from 'sanity'
+import {DefaultPreview} from 'sanity/_unstable'
+import {useVersionedClient} from '../../versionedClient'
+import {User} from '@sanity/types'
+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;
+  }
+`
+
+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 versionedClient = useVersionedClient()
+  const {
+    __internal: {userStore},
+  } = useSource()
+
+  const fetchData = useCallback(() => {
+    const {projectId} = versionedClient.config()
+    const subscription = versionedClient.observable
+      .request<Project>({
+        uri: `/projects/${projectId}`,
+      })
+      .pipe(
+        switchMap((_project) =>
+          userStore.observable
+            .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>
+  )
+}

package/src/widgets/sanityTutorials/Tutorial.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import {Card, Box, Heading, Flex, Text, Stack} from '@sanity/ui'
+import {PlayIcon} from '@sanity/icons'
+import styled from 'styled-components'
+
+const PlayIconBox = styled(Box)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 2.75em;
+    height: 2.75em;
+    border-radius: 50%;
+    background: ${({theme}) => theme.sanity.color.card.enabled.bg};
+    opacity: 0.75;
+  }
+`
+
+const Root = styled(Flex)`
+  &:hover {
+    ${PlayIconBox} {
+      &:before {
+        opacity: 1;
+      }
+    }
+  }
+`
+
+const PosterCard = styled(Card)`
+  width: 100%;
+  padding-bottom: calc(9 / 16 * 100%);
+  position: relative;
+`
+
+const Poster = styled.img`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  display: block;
+
+  &:not([src]) {
+    display: none;
+  }
+`
+
+export interface TutorialProps {
+  title: string
+  posterURL?: string
+  href: string
+  showPlayIcon?: boolean
+  presenterName?: string
+  presenterSubtitle?: string
+}
+
+export function Tutorial(props: TutorialProps) {
+  const {title, posterURL, showPlayIcon, href, presenterName, presenterSubtitle} = props
+
+  return (
+    <Root flex={1}>
+      <Card
+        sizing="border"
+        flex={1}
+        padding={2}
+        radius={2}
+        as="a"
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{position: 'relative'}}
+      >
+        <Flex direction="column" style={{height: '100%'}}>
+          {posterURL && (
+            <PosterCard marginBottom={1}>
+              <Poster src={posterURL} />
+              {showPlayIcon && (
+                <PlayIconBox display="flex">
+                  <Text align="center">
+                    <PlayIcon />
+                  </Text>
+                </PlayIconBox>
+              )}
+            </PosterCard>
+          )}
+          <Flex direction="column" justify="space-between" paddingY={2} flex={1}>
+            <Heading as="h3" size={1}>
+              {title}
+            </Heading>
+            <Box marginTop={4}>
+              <Stack space={2} flex={1}>
+                <Text size={1}>{presenterName}</Text>
+                <Text size={0} style={{opacity: 0.7}}>
+                  {presenterSubtitle}
+                </Text>
+              </Stack>
+            </Box>
+          </Flex>
+        </Flex>
+      </Card>
+    </Root>
+  )
+}

package/src/widgets/sanityTutorials/dataAdapter.ts

@@ -0,0 +1,48 @@
+import {useMemo} from 'react'
+import {useVersionedClient} from '../../versionedClient'
+import imageUrlBuilder from '@sanity/image-url'
+
+const tutorialsProjectConfig = {
+  projectId: '3do82whm',
+  dataset: 'next',
+}
+
+export interface Guide {
+  _type?: string
+  slug?: {current: string}
+  presenter?: {
+    name?: string
+  }
+}
+
+export interface FeedItem {
+  _id: string
+  title?: string
+  poster?: string
+  category?: string
+  guideOrTutorial?: Guide
+  externalLink?: string
+  presenter?: {
+    name?: string
+  }
+  hasVideo?: boolean
+}
+
+export function useDataAdapter() {
+  const versionedClient = useVersionedClient()
+  return useMemo(
+    () => ({
+      getFeed: (templateRepoId: string) => {
+        const uri = templateRepoId
+          ? `/addons/dashboard?templateRepoId=${templateRepoId}`
+          : '/addons/dashboard'
+        return versionedClient.observable.request<{items: FeedItem[]}>({
+          uri,
+          withCredentials: false,
+        })
+      },
+      urlBuilder: imageUrlBuilder(tutorialsProjectConfig),
+    }),
+    [versionedClient]
+  )
+}

package/src/widgets/sanityTutorials/index.ts

@@ -0,0 +1,10 @@
+import {SanityTutorials} from './SanityTutorials'
+import {LayoutConfig, DashboardWidget} from '../../types'
+
+export function sanityTutorialsWidget(config?: {layout?: LayoutConfig}): DashboardWidget {
+  return {
+    name: 'sanity-tutorials',
+    component: SanityTutorials,
+    layout: config?.layout ?? {width: 'full'},
+  }
+}

package/.babelrc

@@ -1,4 +0,0 @@
-{
-  "extends": "../../../.babelrc",
-  "presets": ["@babel/react", "@babel/typescript"]
-}