sanity-plugin-dashboard-widget-netlify 2.0.3 → 3.0.0

package/src/components/SiteItem/index.tsx

@@ -1,79 +0,0 @@
-import React, {FunctionComponent, useCallback, useEffect, useRef, useState} from 'react'
-import {Button, Flex, Box, Card, Text, Stack, Label} from '@sanity/ui'
-import {DeployAction, Site} from '../../types'
-import Links from './Links'
-
-interface Props {
-  site: Site
-  onDeploy: DeployAction
-}
-
-export const IMAGE_PULL_INTERVAL = 10000
-
-const getImageUrl = (siteId: string, branchName?: string) => {
-  const baseUrl = `https://api.netlify.com/api/v1/badges/${siteId}/deploy-status`
-  const time = new Date().getTime()
-  const branch = `branch=${branchName}`
-
-  return branchName ? `${baseUrl}?${time}&${branch}` : `${baseUrl}?${time}`
-}
-
-const useBadgeImage = (siteId: string, branchName?: string ) => {
-  const [src, setSrc] = useState(() => getImageUrl(siteId, branchName))
-  const update = useCallback(() => setSrc(getImageUrl(siteId, branchName)), [siteId])
-
-  useEffect(() => {
-    const interval = window.setInterval(update, IMAGE_PULL_INTERVAL)
-    return () => window.clearInterval(interval)
-  }, [update])
-
-  return [src, update] as const
-}
-
-const useDeploy = (site: Site, onDeploy: DeployAction, updateBadge: () => void) => {
-  const timeoutRef = useRef(-1)
-  useEffect(() => () => window.clearTimeout(timeoutRef.current), [])
-
-  return useCallback(() => {
-    onDeploy(site)
-    timeoutRef.current = window.setTimeout(updateBadge, 1000)
-  }, [site, onDeploy, updateBadge])
-}
-
-const SiteItem: FunctionComponent<Props> = (props) => {
-  const [hasBadgeError, setHasBadgeError] = useState(false)
-  const {site, onDeploy} = props
-  const {id, name, title, url, adminUrl, buildHookId, branch} = site
-
-  const [badge, updateBadge] = useBadgeImage(id, branch)
-  const handleDeploy = useDeploy(site, onDeploy, updateBadge)
-  const handleBadgeError = () => {
-    setHasBadgeError(true)
-  }
-
-  return (
-    <Flex as="li">
-      <Box flex={1} paddingY={2} paddingX={3}>
-        <Stack space={2}>
-          <Text as="h4">
-            {title || name}
-            <Links url={url} adminUrl={adminUrl} />
-          </Text>
-
-          <Flex justify="flex-start">
-            {!hasBadgeError && <img src={badge} onError={handleBadgeError} alt="Badge" />}
-            {hasBadgeError && <Card tone="critical" radius={2} padding={2}><Label size={0} muted>Failed to load badge</Label></Card>}
-          </Flex>
-        </Stack>
-      </Box>
-
-      {buildHookId ? (
-        <Box paddingY={2} paddingX={3}>
-          <Button mode="ghost" onClick={handleDeploy} text="Deploy" />
-        </Box>
-      ) : null}
-    </Flex>
-  )
-}
-
-export default SiteItem

package/src/components/SiteList.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import {DeployAction, Site} from '../types'
-import SiteItem from './SiteItem'
-import {Flex, Box, Card, Text, Spinner, Stack} from '@sanity/ui'
-
-interface Props {
-  isLoading: boolean
-  sites?: Site[]
-  onDeploy: DeployAction
-}
-
-export default function SiteList(props: Props) {
-  const {isLoading, onDeploy, sites} = props
-  if (isLoading) {
-    return (
-      <Card padding={4}>
-        <Flex direction="column" justify="center" align="center">
-          <Spinner muted />
-          <Box marginTop={3}>
-            <Text muted>Loading sites…</Text>
-          </Box>
-        </Flex>
-      </Card>
-    )
-  }
-  if (!sites || (sites && sites.length === 0)) {
-    return (
-      <Card tone="critical" padding={3}>
-        <Text>No sites are defined in the widget options. Please check your config.</Text>
-      </Card>
-    )
-  }
-  return (
-    <Box paddingY={2}>
-      <Stack as="ul" space={2}>
-        {sites.map((site, index) => {
-          return <SiteItem onDeploy={onDeploy} site={site} key={`site-${index}`} />
-        })}
-      </Stack>
-    </Box>
-  )
-}

package/src/datastores/deploy.ts

@@ -1,14 +0,0 @@
-import {Observable, of} from 'rxjs'
-import {map} from 'rxjs/operators'
-import {statusCodeRequest} from '../http/statusCodeRequest'
-import {Site} from '../types'
-
-export function deploy(site: Site): Observable<{result: number; site: Site} | Error> {
-  if (!site.buildHookId) {
-    return of(new Error('Site missing buildHookId'))
-  }
-
-  return statusCodeRequest(`https://api.netlify.com/build_hooks/${site.buildHookId}`, {
-    method: 'POST',
-  }).pipe(map((result) => ({result, site})))
-}

package/src/http/jsonRequest.ts

@@ -1,33 +0,0 @@
-import {Observable} from 'rxjs'
-import {createAbortController} from './utils/createAbortController'
-
-// eslint-disable-next-line no-undef
-export const jsonRequest = <T>(input: RequestInfo, init?: RequestInit): Observable<T> => {
-  return new Observable((subscriber) => {
-    const controller = createAbortController()
-    const onResponse = (res: T) => {
-      subscriber.next(res)
-      subscriber.complete()
-    }
-    const onError = (err: Error) => {
-      if (err.name === 'AbortError') {
-        subscriber.complete()
-      } else {
-        subscriber.error(err)
-      }
-    }
-
-    fetch(input, {...init, signal: controller.signal})
-      .then((res: Response) => {
-        if (res.status < 200 || res.status > 299) {
-          throw new Error(`HTTP Error ${res.status}: ${res.statusText}`)
-        }
-        return res.json()
-      })
-      .then(onResponse, onError)
-
-    return () => {
-      controller.abort()
-    }
-  })
-}

package/src/http/statusCodeRequest.ts

@@ -1,33 +0,0 @@
-import {Observable} from 'rxjs'
-import {createAbortController} from './utils/createAbortController'
-
-// eslint-disable-next-line no-undef
-export const statusCodeRequest = (input: RequestInfo, init?: RequestInit): Observable<number> => {
-  return new Observable((subscriber) => {
-    const controller = createAbortController()
-    const onResponse = (res: number) => {
-      subscriber.next(res)
-      subscriber.complete()
-    }
-    const onError = (err: Error) => {
-      if (err.name === 'AbortError') {
-        subscriber.complete()
-      } else {
-        subscriber.error(err)
-      }
-    }
-
-    fetch(input, {...init, signal: controller.signal})
-      .then((res: Response) => {
-        if (res.status < 200 || res.status > 299) {
-          throw new Error(`HTTP Error ${res.status}: ${res.statusText}`)
-        }
-        return res.status
-      })
-      .then(onResponse, onError)
-
-    return () => {
-      controller.abort()
-    }
-  })
-}

package/src/http/utils/createAbortController.ts

@@ -1,8 +0,0 @@
-import AbortControllerPolyfill from 'abort-controller'
-
-export const createAbortController = (): AbortController => {
-  if (!('AbortController' in window)) {
-    return new AbortControllerPolyfill() as AbortController
-  }
-  return new AbortController()
-}

package/src/index.ts

@@ -1,7 +0,0 @@
-/**
- * Plugin widget for @sanity/dashboard
- */
-export {netlifyWidget} from './plugin'
-export type {NetlifyWidgetConfig} from './plugin'
-
-export * from './types'

package/src/plugin.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import Widget from './widget'
-import {WidgetOptions} from './types'
-import {DashboardWidget, LayoutConfig} from '@sanity/dashboard'
-
-export type NetlifyWidgetConfig = WidgetOptions & {layout?: LayoutConfig}
-
-export function netlifyWidget(config: NetlifyWidgetConfig): DashboardWidget {
-  return {
-    name: 'netlify-widget',
-    component: () => {
-      return <Widget {...config} />
-    },
-    layout: config.layout ?? {width: 'medium'},
-  }
-}

package/src/props.ts

@@ -1,55 +0,0 @@
-import {merge, of} from 'rxjs'
-import {createEventHandler} from 'react-props-stream'
-import {catchError, map, startWith, switchMap} from 'rxjs/operators'
-import {deploy} from './datastores/deploy'
-import {Site, WidgetOptions} from './types'
-import {stateReducer$} from './reducers'
-
-const noop = () => undefined
-
-const INITIAL_PROPS = {
-  title: 'Netlify sites',
-  sites: [],
-  isLoading: true,
-  onDeploy: noop,
-}
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const props$ = (options: WidgetOptions) => {
-  const configuredSites = (options.sites || []).map((site) => ({
-    id: site.apiId,
-    name: site.name,
-    title: site.title,
-    buildHookId: site.buildHookId,
-    url:
-      site.url ||
-      (site.branch && `https://${site.branch}--${site.name}.netlify.app/`) ||
-      (site.name && `https://${site.name}.netlify.app/`),
-    adminUrl: site.name && `https://app.netlify.com/sites/${site.name}`,
-    branch: site.branch,
-  }))
-
-  const [onDeploy$, onDeploy] = createEventHandler<Site>()
-  const setSitesAction$ = of(configuredSites).pipe(map((sites) => ({type: 'setSites', sites})))
-  const deployAction$ = onDeploy$.pipe(map((site) => ({type: 'deploy/started', site})))
-  const deployResult$ = onDeploy$.pipe(switchMap((site) => deploy(site)))
-  const deployCompletedAction$ = deployResult$.pipe(
-    map(
-      (result) => ({type: 'deploy/completed', ...result}),
-      catchError((error) => of({type: 'deploy/failed', error}))
-    )
-  )
-
-  merge(setSitesAction$, deployAction$, deployCompletedAction$).pipe(stateReducer$).subscribe()
-
-  return of(configuredSites).pipe(
-    map((sites) => ({
-      sites,
-      title: options.title || INITIAL_PROPS.title,
-      description: options.description,
-      isLoading: false,
-      onDeploy,
-    })),
-    startWith(INITIAL_PROPS)
-  )
-}

package/src/reducers.ts

@@ -1,53 +0,0 @@
-import {scan} from 'rxjs/operators'
-import {Site} from './types'
-
-interface Deployment {
-  id: string
-}
-
-interface Action {
-  type: string
-  sites?: Site[]
-  site?: Site
-  error?: Error
-  deployments?: Deployment[]
-}
-
-interface State {
-  sites: Site[]
-  action: Action
-}
-
-export const stateReducer$ = scan((state: State, action: Action) => {
-  switch (action.type) {
-    case 'setSites':
-      return {...state, sites: action.sites || []}
-    case 'deploy/started':
-      return {
-        ...state,
-        sites: state.sites.map((site: Site) => {
-          if (action.site && site.id === action.site.id) {
-            return {...site}
-          }
-          return site
-        }),
-      }
-    case 'deploy/failed':
-      return {
-        ...state,
-        error: action.error,
-      }
-    case 'deploy/completed':
-      return {
-        ...state,
-        sites: state.sites.map((site: Site) => {
-          if (action.site && site.id === action.site.id) {
-            return {...site, error: action.error}
-          }
-          return site
-        }),
-      }
-    default:
-      return state
-  }
-})

package/src/types.ts

@@ -1,33 +0,0 @@
-export interface SiteWidgetOption {
-  apiId: string
-  name?: string
-  title: string
-  buildHookId: string
-  url?: string
-  branch?: string
-}
-export interface WidgetOptions {
-  title?: string
-  description?: string
-  sites: SiteWidgetOption[]
-}
-
-export interface Site {
-  title: string
-  name?: string
-  id: string
-  url?: string
-  adminUrl?: string
-  buildHookId: string
-  branch?: string
-}
-
-export type DeployAction = (site: Site) => void
-
-export interface NetlifyWidgetProps {
-  title?: string
-  description?: string
-  sites?: Site[]
-  isLoading: boolean
-  onDeploy: DeployAction
-}

package/src/widget.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import {streamingComponent} from 'react-props-stream'
-import {map, switchMap} from 'rxjs/operators'
-import {WidgetOptions} from './types'
-import {props$} from './props'
-import NetlifyWidget from './components/NetlifyWidget'
-
-export default streamingComponent<WidgetOptions>((options$) =>
-  options$.pipe(
-    switchMap((options) =>
-      props$(options).pipe(
-        map((props) => {
-          return <NetlifyWidget {...props} />
-        })
-      )
-    )
-  )
-)

package/v2-incompatible.js

@@ -1,11 +0,0 @@
-const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
-const {name, version, sanityExchangeUrl} = require('./package.json')
-
-export default showIncompatiblePluginDialog({
-  name: name,
-  versions: {
-    v3: version,
-    v2: '^1.3.1',
-  },
-  sanityExchangeUrl,
-})