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

package/lib/cjs/widgets/projectInfo/ProjectInfo.js

@@ -0,0 +1,269 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _isPlainObject2 = _interopRequireDefault(require("lodash/isPlainObject"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ui = require("@sanity/ui");
+
+var _versionedClient = require("../../versionedClient");
+
+var _DashboardTool = require("../../DashboardTool");
+
+var _legacyParts = require("../../legacyParts");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const {
+  projectId,
+  dataset
+} = _versionedClient.versionedClient.config();
+
+function isUrl(url) {
+  return /^https?:\/\//.test("".concat(url));
+}
+
+function getGraphQlUrl() {
+  return "https://".concat(projectId, ".api.sanity.io/v1/graphql/").concat(dataset, "/default");
+}
+
+function getGroqUrl() {
+  return "https://".concat(projectId, ".api.sanity.io/v1/groq/").concat(dataset);
+}
+
+function getManageUrl() {
+  return "https://manage.sanity.io/projects/".concat(projectId);
+}
+
+class ProjectInfo extends _react.default.PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      studioHost: null,
+      graphqlApi: null
+    });
+  }
+
+  componentDidMount() {
+    // fetch project data
+    this.subscriptions = [];
+    this.subscriptions.push(_versionedClient.versionedClient.observable.request({
+      uri: "/projects/".concat(projectId)
+    }).subscribe({
+      next: result => {
+        const {
+          studioHost
+        } = result;
+        this.setState({
+          studioHost: studioHost ? "https://".concat(studioHost, ".sanity.studio") : null
+        });
+      },
+      error: error => {
+        console.log('Error while looking for studioHost', error);
+        this.setState({
+          studioHost: {
+            error: 'Something went wrong while looking up studioHost. See console.'
+          }
+        });
+      }
+    })); // ping assumed graphql endpoint
+
+    this.subscriptions.push(_versionedClient.versionedClient.observable.request({
+      method: 'HEAD',
+      uri: "/graphql/".concat(dataset, "/default")
+    }).subscribe({
+      next: () => this.setState({
+        graphqlApi: getGraphQlUrl()
+      }),
+      error: error => {
+        if (error.statusCode === 404) {
+          this.setState({
+            graphqlApi: null
+          });
+        } else {
+          console.log('Error while looking for graphqlApi', error);
+          this.setState({
+            graphqlApi: {
+              error: 'Something went wrong while looking up graphqlApi. See console.'
+            }
+          });
+        }
+      }
+    }));
+  }
+
+  componentWillUnmount() {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  assembleTableRows() {
+    const {
+      graphqlApi,
+      studioHost
+    } = this.state;
+    const propsData = this.props.data;
+    let result = [{
+      title: 'Sanity project',
+      rows: [{
+        title: 'Project ID',
+        value: projectId
+      }, {
+        title: 'Dataset',
+        value: dataset
+      }]
+    }]; // Handle any apps
+
+    const apps = [studioHost ? {
+      title: 'Studio',
+      value: studioHost
+    } : null].concat(propsData.filter(item => item.category === 'apps')).filter(Boolean);
+
+    if (apps.length > 0) {
+      result = result.concat([{
+        title: 'Apps',
+        rows: apps
+      }]);
+    } // Handle APIs
+
+
+    result = result.concat([{
+      title: 'APIs',
+      rows: [{
+        title: 'GROQ',
+        value: getGroqUrl()
+      }, {
+        title: 'GraphQL',
+        value: graphqlApi || 'Not deployed'
+      }]
+    }], propsData.filter(item => item.category === 'apis')); // Handle whatever else there might be
+
+    const otherStuff = {};
+    propsData.forEach(item => {
+      if (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;
+  }
+
+  render() {
+    var _this$props$__experim;
+
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.props.__experimental_before && this.props.__experimental_before.map((widgetConfig, idx) => /*#__PURE__*/_react.default.createElement(_legacyParts.WidgetContainer, {
+      key: String(idx),
+      config: widgetConfig
+    })), /*#__PURE__*/_react.default.createElement(_ui.Box, {
+      height: "fill",
+      marginTop: ((_this$props$__experim = this.props.__experimental_before) === null || _this$props$__experim === void 0 ? void 0 : _this$props$__experim.length) > 0 ? 4 : 0
+    }, /*#__PURE__*/_react.default.createElement(_DashboardTool.DashboardWidget, {
+      footer: /*#__PURE__*/_react.default.createElement(_ui.Button, {
+        style: {
+          width: '100%'
+        },
+        paddingX: 2,
+        paddingY: 4,
+        mode: "bleed",
+        tone: "primary",
+        text: "Manage project",
+        as: "a",
+        href: getManageUrl()
+      })
+    }, /*#__PURE__*/_react.default.createElement(_ui.Card, {
+      paddingY: 4,
+      radius: 2,
+      role: "table",
+      "aria-label": "Project info",
+      "aria-describedby": "project_info_table"
+    }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      space: 4
+    }, /*#__PURE__*/_react.default.createElement(_ui.Box, {
+      paddingX: 3,
+      as: "header"
+    }, /*#__PURE__*/_react.default.createElement(_ui.Heading, {
+      size: 1,
+      as: "h2",
+      id: "project_info_table"
+    }, "Project info")), this.assembleTableRows().map(item => {
+      if (!item || !item.rows) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+        key: item.title,
+        space: 3
+      }, /*#__PURE__*/_react.default.createElement(_ui.Card, {
+        borderBottom: true,
+        padding: 3
+      }, /*#__PURE__*/_react.default.createElement(_ui.Label, {
+        size: 0,
+        muted: true,
+        role: "columnheader"
+      }, item.title)), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+        space: 4,
+        paddingX: 3,
+        role: "rowgroup"
+      }, item.rows.map(row => {
+        return /*#__PURE__*/_react.default.createElement(_ui.Grid, {
+          key: row.title,
+          columns: 2,
+          role: "row"
+        }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
+          weight: "medium",
+          role: "rowheader"
+        }, row.title), (0, _isPlainObject2.default)(row.value) && /*#__PURE__*/_react.default.createElement(_ui.Text, {
+          size: 1
+        }, row.value.error), !(0, _isPlainObject2.default)(row.value) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isUrl(row.value) ? /*#__PURE__*/_react.default.createElement(_ui.Text, {
+          size: 1,
+          role: "cell",
+          style: {
+            wordBreak: 'break-word'
+          }
+        }, /*#__PURE__*/_react.default.createElement("a", {
+          href: row.value
+        }, row.value)) : /*#__PURE__*/_react.default.createElement(_ui.Code, {
+          size: 1,
+          role: "cell",
+          style: {
+            wordBreak: 'break-word'
+          }
+        }, row.value)));
+      })));
+    }))))));
+  }
+
+}
+
+_defineProperty(ProjectInfo, "propTypes", {
+  // eslint-disable-next-line camelcase
+  __experimental_before: _propTypes.default.array,
+  data: _propTypes.default.array
+});
+
+_defineProperty(ProjectInfo, "defaultProps", {
+  // eslint-disable-next-line camelcase
+  __experimental_before: [],
+  data: []
+});
+
+var _default = ProjectInfo;
+exports.default = _default;

package/lib/cjs/widgets/projectInfo/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ProjectInfo = _interopRequireDefault(require("./ProjectInfo"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  name: 'project-info',
+  component: _ProjectInfo.default,
+  layout: {
+    width: 'medium'
+  }
+};
+exports.default = _default;

package/lib/cjs/widgets/projectUsers/ProjectUsers.js

@@ -0,0 +1,194 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _operators = require("rxjs/operators");
+
+var _ui = require("@sanity/ui");
+
+var _icons = require("@sanity/icons");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _base = require("@sanity/base");
+
+var _versionedClient = require("../../versionedClient");
+
+var _DashboardTool = require("../../DashboardTool");
+
+var _legacyParts = require("../../legacyParts");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const AvatarWrapper = (0, _styledComponents.default)(_ui.Card)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  border-radius: 50%;\n  border-color: transparent;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n\n  & > img {\n    width: 100%;\n    height: auto;\n  }\n"])));
+
+function getInviteUrl(projectId) {
+  return "https://manage.sanity.io/projects/".concat(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.default.PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      project: null,
+      users: null,
+      error: null
+    });
+
+    _defineProperty(this, "handleRetryFetch", () => {
+      this.fetchData();
+    });
+  }
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentWillUnmount() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  fetchData() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+
+    const {
+      projectId
+    } = _versionedClient.versionedClient.config();
+
+    this.subscription = _versionedClient.versionedClient.observable.request({
+      uri: "/projects/".concat(projectId)
+    }).pipe((0, _operators.switchMap)(project => _legacyParts.userStore.observable.getUsers(project.members.map(mem => mem.id)).pipe((0, _operators.map)(users => ({
+      project,
+      users
+    }))))).subscribe({
+      next: _ref => {
+        let {
+          users,
+          project
+        } = _ref;
+        return this.setState({
+          project,
+          users: (Array.isArray(users) ? users : [users]).sort((userA, userB) => sortUsersByRobotStatus(userA, userB, project))
+        });
+      },
+      error: error => this.setState({
+        error
+      })
+    });
+  }
+
+  render() {
+    const {
+      error,
+      project,
+      users
+    } = this.state;
+    const isLoading = !users || !project;
+
+    if (error) {
+      return /*#__PURE__*/_react.default.createElement(_DashboardTool.DashboardWidget, {
+        header: "Project users"
+      }, /*#__PURE__*/_react.default.createElement(_ui.Box, {
+        padding: 4
+      }, /*#__PURE__*/_react.default.createElement(_ui.Text, null, "Something went wrong while fetching data. You could", ' ', /*#__PURE__*/_react.default.createElement("a", {
+        onClick: this.handleRetryFetch,
+        title: "Retry users fetch",
+        style: {
+          cursor: 'pointer'
+        }
+      }, "retry"), "..?")));
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_DashboardTool.DashboardWidget, {
+      header: "Project users",
+      footer: /*#__PURE__*/_react.default.createElement(_ui.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 && /*#__PURE__*/_react.default.createElement(_ui.Box, {
+      paddingY: 5,
+      paddingX: 2
+    }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      space: 4
+    }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
+      align: "center",
+      muted: true,
+      size: 1
+    }, /*#__PURE__*/_react.default.createElement(_ui.Spinner, null)), /*#__PURE__*/_react.default.createElement(_ui.Text, {
+      align: "center",
+      size: 1,
+      muted: true
+    }, "Loading items..."))), !isLoading && /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      space: 3,
+      padding: 3
+    }, users.map(user => {
+      const membership = project.members.find(member => member.id === user.id);
+      const media = membership.isRobot ? /*#__PURE__*/_react.default.createElement(_ui.Text, {
+        size: 3
+      }, /*#__PURE__*/_react.default.createElement(_icons.RobotIcon, null)) : /*#__PURE__*/_react.default.createElement(AvatarWrapper, {
+        tone: "transparent"
+      }, (user === null || user === void 0 ? void 0 : user.imageUrl) && /*#__PURE__*/_react.default.createElement("img", {
+        src: user.imageUrl,
+        alt: user === null || user === void 0 ? void 0 : user.displayName
+      }));
+      return /*#__PURE__*/_react.default.createElement(_ui.Box, {
+        key: user.id
+      }, /*#__PURE__*/_react.default.createElement(_base.DefaultPreview, {
+        title: user.displayName,
+        subtitle: membership.role,
+        media: media
+      }));
+    })));
+  }
+
+}
+
+_defineProperty(ProjectUsers, "propTypes", {});
+
+_defineProperty(ProjectUsers, "defaultProps", {});
+
+var _default = ProjectUsers;
+exports.default = _default;

package/lib/cjs/widgets/projectUsers/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ProjectUsers = _interopRequireDefault(require("./ProjectUsers"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  name: 'project-users',
+  component: _ProjectUsers.default
+};
+exports.default = _default;

package/lib/cjs/widgets/sanityTutorials/SanityTutorials.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ui = require("@sanity/ui");
+
+var _DashboardTool = require("../../DashboardTool");
+
+var _Tutorial = _interopRequireDefault(require("./Tutorial"));
+
+var _dataAdapter = _interopRequireDefault(require("./dataAdapter"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const {
+  urlBuilder,
+  getFeed
+} = _dataAdapter.default;
+
+function createUrl(slug, type) {
+  if (type === 'tutorial') {
+    return "https://www.sanity.io/docs/tutorials/".concat(slug.current);
+  } else if (type === 'guide') {
+    return "https://www.sanity.io/docs/guides/".concat(slug.current);
+  }
+
+  return false;
+}
+
+class SanityTutorials extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "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 /*#__PURE__*/_react.default.createElement(_DashboardTool.DashboardWidget, {
+      header: title
+    }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
+      as: "ul",
+      overflow: "auto",
+      align: "stretch",
+      paddingY: 2
+    }, feedItems === null || feedItems === void 0 ? void 0 : feedItems.map((feedItem, index) => {
+      if (!feedItem.title || !feedItem.guideOrTutorial && !feedItem.externalLink) {
+        return null;
+      }
+
+      const presenter = feedItem.presenter || (0, _get2.default)(feedItem, 'guideOrTutorial.presenter') || {};
+      const subtitle = (0, _get2.default)(feedItem, 'category');
+      const {
+        guideOrTutorial = {}
+      } = feedItem;
+      return /*#__PURE__*/_react.default.createElement(_ui.Flex, {
+        as: "li",
+        key: feedItem._id,
+        paddingRight: index < (feedItems === null || feedItems === void 0 ? void 0 : feedItems.length) - 1 ? 1 : 3,
+        paddingLeft: index === 0 ? 3 : 0,
+        align: "stretch",
+        flex: "0 0 27.5%",
+        style: {
+          minWidth: 272,
+          width: '30%'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Tutorial.default, {
+        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()
+      }));
+    })));
+  }
+
+}
+
+_defineProperty(SanityTutorials, "propTypes", {
+  templateRepoId: _propTypes.default.string
+});
+
+_defineProperty(SanityTutorials, "defaultProps", {
+  templateRepoId: null
+});
+
+var _default = SanityTutorials;
+exports.default = _default;