@sanity/dashboard 0.136.3-purple-unicorn-patch.5627

package/src/widgets/projectUsers/ProjectUsers.js

@@ -0,0 +1,179 @@
+import React 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 {DefaultPreview} from '@sanity/base'
+import {versionedClient} from '../../versionedClient'
+import {DashboardWidget} from '../../DashboardTool'
+import {userStore} from '../../legacyParts'
+
+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) {
+  return `https://manage.sanity.io/projects/${projectId}/team/invite`
+}
+
+function sortUsersByRobotStatus(userA, userB, 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
+}
+
+class ProjectUsers extends React.PureComponent {
+  static propTypes = {}
+  static defaultProps = {}
+
+  state = {
+    project: null,
+    users: null,
+    error: null,
+  }
+
+  componentDidMount() {
+    this.fetchData()
+  }
+
+  componentWillUnmount() {
+    if (this.subscription) {
+      this.subscription.unsubscribe()
+    }
+  }
+
+  fetchData() {
+    if (this.subscription) {
+      this.subscription.unsubscribe()
+    }
+
+    const {projectId} = versionedClient.config()
+    this.subscription = versionedClient.observable
+      .request({
+        uri: `/projects/${projectId}`,
+      })
+      .pipe(
+        switchMap((project) =>
+          userStore.observable
+            .getUsers(project.members.map((mem) => mem.id))
+            .pipe(map((users) => ({project, users})))
+        )
+      )
+      .subscribe({
+        next: ({users, project}) =>
+          this.setState({
+            project,
+            users: (Array.isArray(users) ? users : [users]).sort((userA, userB) =>
+              sortUsersByRobotStatus(userA, userB, project)
+            ),
+          }),
+        error: (error) => this.setState({error}),
+      })
+  }
+
+  handleRetryFetch = () => {
+    this.fetchData()
+  }
+
+  render() {
+    const {error, project, users} = this.state
+    const isLoading = !users || !project
+
+    if (error) {
+      return (
+        <DashboardWidget header="Project users">
+          <Box padding={4}>
+            <Text>
+              Something went wrong while fetching data. You could{' '}
+              <a
+                onClick={this.handleRetryFetch}
+                title="Retry users fetch"
+                style={{cursor: 'pointer'}}
+              >
+                retry
+              </a>
+              ..?
+            </Text>
+          </Box>
+        </DashboardWidget>
+      )
+    }
+
+    return (
+      <DashboardWidget
+        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>
+        )}
+      </DashboardWidget>
+    )
+  }
+}
+
+export default ProjectUsers

package/src/widgets/projectUsers/index.js

@@ -0,0 +1,6 @@
+import ProjectUsers from './ProjectUsers'
+
+export default {
+  name: 'project-users',
+  component: ProjectUsers,
+}

package/src/widgets/sanityTutorials/SanityTutorials.js

@@ -0,0 +1,91 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {get} from 'lodash'
+import {Flex} from '@sanity/ui'
+import {DashboardWidget} from '../../DashboardTool'
+import Tutorial from './Tutorial'
+import dataAdapter from './dataAdapter'
+
+const {urlBuilder, getFeed} = dataAdapter
+
+function createUrl(slug, type) {
+  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
+}
+
+class SanityTutorials extends React.Component {
+  static propTypes = {
+    templateRepoId: PropTypes.string,
+  }
+
+  static defaultProps = {
+    templateRepoId: null,
+  }
+
+  state = {
+    feedItems: [],
+  }
+
+  componentDidMount() {
+    const {templateRepoId} = this.props
+    this.subscription = getFeed(templateRepoId).subscribe((response) => {
+      this.setState({
+        feedItems: response.items,
+      })
+    })
+  }
+
+  componentWillUnmount() {
+    if (this.subscription) {
+      this.subscription.unsubscribe()
+    }
+  }
+
+  render() {
+    const {feedItems} = this.state
+    const title = 'Learn about Sanity'
+
+    return (
+      <DashboardWidget 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 || get(feedItem, 'guideOrTutorial.presenter') || {}
+            const subtitle = get(feedItem, 'category')
+            const {guideOrTutorial = {}} = feedItem
+            return (
+              <Flex
+                as="li"
+                key={feedItem._id}
+                paddingRight={index < feedItems?.length - 1 ? 1 : 3}
+                paddingLeft={index === 0 ? 3 : 0}
+                align="stretch"
+                flex="0 0 27.5%"
+                style={{minWidth: 272, width: '30%'}}
+              >
+                <Tutorial
+                  title={feedItem.title}
+                  href={
+                    createUrl(guideOrTutorial.slug, guideOrTutorial._type) || feedItem.externalLink
+                  }
+                  presenterName={presenter.name}
+                  presenterSubtitle={subtitle}
+                  showPlayIcon={feedItem.hasVideo}
+                  posterURL={urlBuilder.image(feedItem.poster).height(360).url()}
+                />
+              </Flex>
+            )
+          })}
+        </Flex>
+      </DashboardWidget>
+    )
+  }
+}
+
+export default SanityTutorials

package/src/widgets/sanityTutorials/Tutorial.js

@@ -0,0 +1,120 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+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;
+  }
+`
+
+class Tutorial extends React.PureComponent {
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+    posterURL: PropTypes.string,
+    href: PropTypes.string.isRequired,
+    showPlayIcon: PropTypes.bool,
+    presenterName: PropTypes.string.isRequired,
+    presenterSubtitle: PropTypes.string.isRequired,
+  }
+  static defaultProps = {
+    posterURL: null,
+    showPlayIcon: false,
+  }
+
+  render() {
+    const {title, posterURL, showPlayIcon, href, presenterName, presenterSubtitle} = this.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>
+    )
+  }
+}
+
+export default Tutorial

package/src/widgets/sanityTutorials/dataAdapter.js

@@ -0,0 +1,17 @@
+import imageUrlBuilder from '@sanity/image-url'
+import {versionedClient} from '../../versionedClient'
+
+const tutorialsProjectConfig = {
+  projectId: '3do82whm',
+  dataset: 'next',
+}
+
+export default {
+  getFeed: (templateRepoId) => {
+    const uri = templateRepoId
+      ? `/addons/dashboard?templateRepoId=${templateRepoId}`
+      : '/addons/dashboard'
+    return versionedClient.observable.request({uri, withCredentials: false})
+  },
+  urlBuilder: imageUrlBuilder(tutorialsProjectConfig),
+}

package/src/widgets/sanityTutorials/index.js

@@ -0,0 +1,7 @@
+import SanityTutorials from './SanityTutorials'
+
+export default {
+  name: 'sanity-tutorials',
+  component: SanityTutorials,
+  layout: {width: 'full'},
+}