UX-496 Add minimal workflow and badges to sanity studio (#1)

* Add minimal workflow and badges to sanity studio

* UX-496 use Visibility Icon

* Add back to draft action

package.json

@@ -36,6 +36,9 @@
   "homepage": "design.sparkpost.com",
   "dependencies": {
     "@sanity/client": "^2.7.1",
+    "@sparkpost/design-tokens": "^5.0.0",
+    "@sparkpost/matchbox": "^5.0.0",
+    "@sparkpost/matchbox-icons": "^5.0.0",
     "groq": "^2.2.6",
     "next": "^10.1.3",
     "react": "^17.0.2",
@@ -68,4 +71,4 @@
     "typescript": "^4.2.3",
     "yargs-parser": "^13.1.2"
   }
-}
+}

studio/config/workflow.js

@@ -0,0 +1,7 @@
+export const types = ['post'];
+
+export const states = [
+  { id: 'draft', title: ' Draft ', color: 'warning' },
+  { id: 'inReview', title: 'In review', color: 'warning' },
+  { id: 'published', title: 'Published', color: 'success' }
+];

studio/documentActions/index.js

@@ -0,0 +1,11 @@
+import defaultResolver from 'part:@sanity/base/document-actions';
+import { types as workflowTypes } from '../config/workflow';
+import { resolveWorkflowActions } from './workflow';
+
+export default function resolveDocumentActions(docInfo) {
+  if (workflowTypes.includes(docInfo.type)) {
+    return resolveWorkflowActions(docInfo);
+  }
+
+  return defaultResolver(docInfo);
+}

studio/documentActions/workflow/backToDraft.js

@@ -0,0 +1,23 @@
+import { Edit } from '@sparkpost/matchbox-icons';
+import { inferMetadataState, useWorkflowMetadata } from '../../lib/workflow';
+
+export default function BackToDraftAction(props) {
+  const metadata = useWorkflowMetadata(props.id, inferMetadataState(props));
+  const { state } = metadata.data;
+
+  if (!props.draft || !state === 'inReview') {
+    return null;
+  }
+
+  const onHandle = () => {
+    metadata.setState('draft');
+    props.onComplete();
+  };
+
+  return {
+    label: 'Back to Draft',
+    icon: Edit,
+    color: 'warning',
+    onHandle
+  };
+}

studio/documentActions/workflow/delete.js

@@ -0,0 +1,41 @@
+import React from 'react'; // importing because we're using dialog
+import { Delete } from '@sparkpost/matchbox-icons';
+import { inferMetadataState, useWorkflowMetadata } from '../../lib/workflow';
+import { useDocumentOperation } from '@sanity/react-hooks';
+
+export default function DeleteAction(props) {
+  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
+  const metadata = useWorkflowMetadata(props.id, inferMetadataState(props));
+  const ops = useDocumentOperation(props.id, props.type);
+
+  const onHandle = () => {
+    if (ops.delete.disabled) {
+      props.onComplete();
+      return;
+    }
+
+    if (!showConfirmDialog) {
+      setShowConfirmDialog(true);
+      return;
+    }
+
+    setShowConfirmDialog(false);
+    metadata.delete();
+    ops.delete.execute();
+    props.onComplete();
+  };
+
+  return {
+    label: 'Delete',
+    disabled: ops.delete.disabled,
+    icon: Delete,
+    shortcut: 'mod+shift+d',
+    dialog: showConfirmDialog && {
+      type: 'confirm',
+      message: <div>Are you sure you want to delete this post?</div>,
+      onConfirm: onHandle,
+      onCancel: () => setShowConfirmDialog(false)
+    },
+    onHandle
+  };
+}

studio/documentActions/workflow/discardChanges.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useDocumentOperation } from '@sanity/react-hooks';
+import ResetIcon from 'part:@sanity/base/reset-icon';
+
+export default function DiscardChangesAction(props) {
+  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
+  const ops = useDocumentOperation(props.id, props.type);
+
+  if (!props.published || props.liveEdit) {
+    return null;
+  }
+
+  const onHandle = () => {
+    if (ops.discardChanges.disabled) {
+      props.onComplete();
+      return;
+    }
+
+    if (!showConfirmDialog) {
+      setShowConfirmDialog(true);
+      return;
+    }
+
+    setShowConfirmDialog(false);
+    ops.discardChanges.execute();
+    props.onComplete();
+  };
+
+  const dialog = showConfirmDialog && {
+    type: 'confirm',
+    color: 'danger',
+    onCancel: props.onComplete,
+    onConfirm: onHandle,
+    message: <div>Are you sure you want to discard all changes since last published?</div>
+  };
+
+  return {
+    disabled: ops.discardChanges.disabled,
+    label: 'Discard changes',
+    dialog,
+    icon: ResetIcon,
+    onHandle
+  };
+}

studio/documentActions/workflow/index.js

@@ -0,0 +1,19 @@
+import ReviewAction from './review';
+import PublishAction from './publish';
+import DeleteAction from './delete';
+import DiscardChangesAction from './discardChanges';
+import SyncAction from './sync';
+import UnpublishAction from './unpublish';
+import BackToDraftAction from './backToDraft';
+
+export function resolveWorkflowActions() {
+  return [
+    SyncAction,
+    ReviewAction,
+    PublishAction,
+    BackToDraftAction,
+    DiscardChangesAction,
+    DeleteAction,
+    UnpublishAction
+  ];
+}

studio/documentActions/workflow/publish.js

@@ -0,0 +1,28 @@
+import { Publish } from '@sparkpost/matchbox-icons';
+import { inferMetadataState, useWorkflowMetadata } from '../../lib/workflow';
+import { useDocumentOperation } from '@sanity/react-hooks';
+
+export default function PublishAction(props) {
+  const ops = useDocumentOperation(props.id, props.type);
+  const metadata = useWorkflowMetadata(props.id, inferMetadataState(props));
+  const { state } = metadata.data;
+
+  const onHandle = () => {
+    if (ops.publish.disabled) {
+      props.onComplete();
+      return;
+    }
+
+    metadata.setState('published');
+    ops.publish.execute();
+    props.onComplete();
+  };
+
+  return {
+    label: 'Publish',
+    disabled: props.liveEdit || state === 'published' || ops.publish.disabled,
+    shortcut: 'mod+shift+p',
+    icon: Publish,
+    onHandle
+  };
+}

studio/documentActions/workflow/review.js

@@ -0,0 +1,23 @@
+import { Visibility } from '@sparkpost/matchbox-icons';
+import { inferMetadataState, useWorkflowMetadata } from '../../lib/workflow';
+
+export default function ReviewAction(props) {
+  const metadata = useWorkflowMetadata(props.id, inferMetadataState(props));
+  const { state } = metadata.data;
+
+  if (!props.draft || state === 'inReview') {
+    return null;
+  }
+
+  const onHandle = () => {
+    metadata.setState('inReview');
+    props.onComplete();
+  };
+
+  return {
+    label: 'Request Review',
+    shortcut: 'mod+shift+r',
+    icon: Visibility,
+    onHandle
+  };
+}

studio/documentActions/workflow/sync.js

@@ -0,0 +1,26 @@
+import { useDocumentOperation } from '@sanity/react-hooks';
+import { useEffect } from 'react';
+import { inferMetadataState, useWorkflowMetadata } from '../../lib/workflow';
+
+export default function SyncAction(props) {
+  const metadata = useWorkflowMetadata(props.id, inferMetadataState(props));
+  const ops = useDocumentOperation(props.id, props.type);
+  const { state } = metadata.data;
+  const isDraft = Boolean(props.draft);
+  const isPublished = Boolean(props.published);
+  const isLoaded = isDraft || isPublished;
+
+  useEffect(() => {
+    if (isLoaded) {
+      if (state === 'published' && !props.published) {
+        if (!ops.publish.disabled) ops.publish.execute();
+      }
+
+      if (state !== 'published' && !props.draft) {
+        if (!ops.unpublish.disabled) ops.unpublish.execute();
+      }
+    }
+  }, [isLoaded]);
+
+  return null;
+}

studio/documentActions/workflow/unpublish.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useDocumentOperation } from '@sanity/react-hooks';
+import { inferMetadataState, useWorkflowMetadata } from '../../lib/workflow';
+import UnpublishIcon from 'part:@sanity/base/unpublish-icon';
+
+export default function UnpublishAction(props) {
+  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
+  const ops = useDocumentOperation(props.id, props.type);
+  const metadata = useWorkflowMetadata(props.id, inferMetadataState(props));
+
+  if (props.liveEdit) {
+    return null;
+  }
+
+  const onHandle = () => {
+    if (ops.delete.disabled) {
+      props.onComplete();
+      return;
+    }
+
+    if (!showConfirmDialog) {
+      setShowConfirmDialog(true);
+      return;
+    }
+
+    setShowConfirmDialog(false);
+    ops.unpublish.execute();
+    metadata.setState('draft');
+    props.onComplete();
+  };
+
+  return {
+    label: 'Unpublish',
+    disabled: ops.delete.disabled,
+    icon: UnpublishIcon,
+    dialog: showConfirmDialog && {
+      type: 'confirm',
+      message: <div>Are you sure you want to unpublish this post?</div>,
+      onConfirm: onHandle,
+      onCancel: () => setShowConfirmDialog(false)
+    },
+    onHandle
+  };
+}

studio/documentBadges/index.js

@@ -0,0 +1,11 @@
+import defaultResolve from 'part:@sanity/base/document-badges';
+import { types as workflowTypes } from '../config/workflow';
+import { resolveWorkflowDocumentBadges } from './workflow';
+
+export default function resolveDocumentBadges(docInfo) {
+  if (workflowTypes.includes(docInfo.type)) {
+    return resolveWorkflowDocumentBadges(docInfo);
+  }
+
+  defaultResolve(docInfo);
+}

studio/documentBadges/workflow/index.js

@@ -0,0 +1,45 @@
+import { useWorkflowMetadata, inferMetadataState } from '../../lib/workflow';
+import { states } from '../../config/workflow';
+
+const publishedBadge = (docInfo) => {
+  if (!docInfo.published) {
+    return null;
+  }
+
+  return {
+    label: 'Published',
+    title: 'Published',
+    color: 'success'
+  };
+};
+
+const WorkflowBadge = (docInfo) => {
+  const metadata = useWorkflowMetadata(docInfo.id, inferMetadataState(docInfo));
+  const state = states.find((state) => state.id === metadata.data.state);
+
+  if (!state) {
+    return null;
+  }
+
+  if (docInfo.draft && state.id === 'published') {
+    return {
+      label: 'Draft',
+      title: 'Draft',
+      color: 'warning'
+    };
+  }
+
+  if (state.id === 'published') {
+    return null;
+  }
+
+  return {
+    label: state.title,
+    title: state.title,
+    color: state.color
+  };
+};
+
+export function resolveWorkflowDocumentBadges() {
+  return [publishedBadge, WorkflowBadge];
+}

studio/lib/workflow/helpers.js

@@ -0,0 +1,11 @@
+export function inferMetadataState(props) {
+  if (!props.draft && !props.published) {
+    return 'draft';
+  }
+
+  if (props.draft) {
+    return 'draft';
+  }
+
+  return 'published';
+}

studio/lib/workflow/index.js

@@ -0,0 +1,2 @@
+export * from './helpers';
+export * from './metadata';

studio/lib/workflow/metadata.js

@@ -0,0 +1,25 @@
+import { useDocumentOperation, useEditState } from '@sanity/react-hooks';
+
+export function useWorkflowMetadata(id, defaultState) {
+  const editState = useEditState(`workflow-metadata.${id}`, 'workflow.metadata');
+  const ops = useDocumentOperation(`workflow-metadata.${id}`, 'workflow.metadata');
+
+  const data =
+    editState && editState.published
+      ? editState.published
+      : { _id: `workflow-metadata.${id}`, _type: 'workflow.metadata', state: defaultState };
+
+  return {
+    data,
+    delete: deleteMetadata,
+    setState
+  };
+
+  function deleteMetadata() {
+    ops.delete.execute();
+  }
+
+  function setState(state) {
+    ops.patch.execute([{ setIfMissing: { documentId: id } }, { set: { state } }]);
+  }
+}