@sanity/dashboard - npm Package Compare versions

Comparing version 0.140.10-canary.82 to 0.140.10-canary.85

lib/widgets/projectInfo/ProjectInfo.js

@@ -8,2 +8,4 @@ "use strict";
 
+var _isPlainObject2 = _interopRequireDefault(require("lodash/isPlainObject"));
+
 var _react = _interopRequireDefault(require("react"));
@@ -23,2 +25,6 @@
 
+const _sanityClient$config = _client.default.config(),
+      projectId = _sanityClient$config.projectId,
+      dataset = _sanityClient$config.dataset;
+
 function isUrl(url) {
@@ -28,11 +34,11 @@ return /^https?:\/\//.test(`${url}`);
 
-function getGraphQlUrl(projectId) {
-  return `https://${projectId}.api.sanity.io/v1/graphql/test`;
+function getGraphQlUrl() {
+  return `https://${projectId}.api.sanity.io/v1/graphql/${dataset}/default`;
 }
 
-function getGroqUrl(projectId) {
-  return `https://${projectId}.api.sanity.io/v1/groq/test`;
+function getGroqUrl() {
+  return `https://${projectId}.api.sanity.io/v1/groq/${dataset}`;
 }
 
-function getManageUrl(projectId) {
+function getManageUrl() {
   return `https://manage.sanity.io/projects/${projectId}`;
@@ -47,4 +53,3 @@ }
       studioHost: null,
-      graphqlApi: null,
-      error: null
+      graphqlApi: null
     });
@@ -54,6 +59,3 @@ }
   componentDidMount() {
-    const _sanityClient$config = _client.default.config(),
-          projectId = _sanityClient$config.projectId; // fetch project data
-
-
+    // fetch project data
     _client.default.projects.getById(projectId).then(result => {
@@ -64,5 +66,10 @@ const studioHost = result.studioHost;
       });
-    }).catch(error => this.setState({
-      error
-    })); // ping assumed graphql endpoint
+    }).catch(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
 
@@ -72,6 +79,6 @@
       method: 'HEAD',
-      uri: `/graphql/${_client.default.config().dataset}/default`
+      uri: `/graphql/${dataset}/default`
     }).then(response => {
       this.setState({
-        graphqlApi: getGraphQlUrl(projectId)
+        graphqlApi: getGraphQlUrl()
       });
@@ -84,4 +91,7 @@ }).catch(error => {
       } else {
+        console.log('Error while looking for graphqlApi', error);
         this.setState({
-          error
+          graphqlApi: {
+            error: 'Something went wrong while looking up graphqlApi. See console.'
+          }
         });
@@ -93,6 +103,2 @@ }
   assembleTableRows() {
-    const _sanityClient$config2 = _client.default.config(),
-          projectId = _sanityClient$config2.projectId,
-          dataset = _sanityClient$config2.dataset;
-
     const _this$state = this.state,
@@ -130,3 +136,3 @@ graphqlApi = _this$state.graphqlApi,
         title: 'GROQ',
-        value: getGroqUrl(projectId)
+        value: getGroqUrl()
       }, {
@@ -150,5 +156,5 @@ title: 'GraphQL',
       result.push({
-        title: category
+        title: category,
+        rows: otherStuff[category]
       });
-      result = result.concat(otherStuff[category]);
     });
@@ -159,8 +165,2 @@ return result;
   render() {
-    const error = this.state.error;
-
-    if (error) {
-      return _react.default.createElement("pre", null, JSON.stringify(error, null, 2));
-    }
-
     return _react.default.createElement("div", {
@@ -187,3 +187,5 @@ className: _ProjectInfo.default.container
           key: row.title
-        }, _react.default.createElement("th", null, row.title), _react.default.createElement("td", null, isUrl(row.value) ? _react.default.createElement("a", {
+        }, _react.default.createElement("th", null, row.title), (0, _isPlainObject2.default)(row.value) && _react.default.createElement("td", {
+          className: _ProjectInfo.default.apiError
+        }, row.value.error), !(0, _isPlainObject2.default)(row.value) && _react.default.createElement("td", null, isUrl(row.value) ? _react.default.createElement("a", {
           href: row.value
@@ -195,3 +197,3 @@ }, row.value) : row.value));
     }, _react.default.createElement(_anchor.default, {
-      href: getManageUrl(_client.default.clientConfig.projectId),
+      href: getManageUrl(),
       bleed: true,
@@ -198,0 +200,0 @@ color: "primary",

package.json

 {
   "name": "@sanity/dashboard",
-  "version": "0.140.10-canary.82+45a9a3080",
+  "version": "0.140.10-canary.85+f7563c66e",
   "description": "Tool for rendering dashboard widgets",
@@ -28,3 +28,3 @@ "main": "src/DashboardTool.js",
     "@sanity/base": "0.140.8",
-    "@sanity/check": "0.140.10-canary.82+45a9a3080",
+    "@sanity/check": "0.140.10-canary.85+f7563c66e",
     "history": "^4.6.3",
@@ -50,3 +50,3 @@ "jest": "^23.6.0",
   "homepage": "https://www.sanity.io/",
-  "gitHead": "45a9a3080ee8b7fde78e7b12f697472ce76e5339"
+  "gitHead": "f7563c66e75cd82d06c62210a677e96f614ed69a"
 }

README.md

 # Dashboard
 
-Tool which picks up and renders any widgets implementing `part:@sanity/dashboard/widget`. Install this plugin in your Content Studio to display stats about your project, number of edits last 24 hours, etc.
+Dashboard is a Tool which picks up and renders any widgets implementing `part:@sanity/dashboard/widget`. Install this plugin in your Content Studio to display stats about your project, number of edits last 24 hours, etc.
 
 The Dashboard tool has been designed to be as generic as possible, making few assumptions about its widgets. The Dashboard itself is mostly concerned about the layout of the configured widgets.
 
-## How to install a widget
+## Install
 
-## How to create a widget
+- `cd` to your Content Studio
+- Type `sanity install @sanity/dashboard`. This will cause two things happen:
+  1. The Dashboard tool gets installed to `./node_modules` in your Studio
+  2. `@sanity/dashboard` is appended to the `plugins` array in the `sanity.json` file of your Studio
+- To verify that all is well, fire up your Studio (`sanity start`) and point your browser to `http://localhost:3333/dashboard`
+- \o/
 
 ## How to configure the Dashboard
 
-Override `part:@sanity/dashboard/config` in your Studio to take control of what appears on the dashboard.
+Changing what is rendered on your Dashboard is easy. To take control, do the following:
 
-A widget’s size behavior can be defined using the `layout` configuration, e.g.:
+1. Implement your own dashboardConfig. In your `sanity.json` file, append the following line to the `parts` array:
 
-```js
+```json
+{
+  "implements": "part:@sanity/dashboard/config",
+  "path": "src/dashboardConfig.js"
+}
+```
+
+2. Create the file `src/dashboardConfig.js` and make sure it's shaped something like this:
+
+```javascript
 export default {
-  widgets: [{name: 'project-info', layout: {width: 'medium', height: 'auto'}}]
+  widgets: [{name: 'sanity-tutorials'}, {name: 'project-info'}, {name: 'project-users'}]
 }
 ```
+
+The `widgets` array is how you tell the Dashboard which widgets to render. The ones mentioned in the above example are bundled with Sanity and require no separate installation.
+
+3. Restart your Studio and play around with the order of the widgets array in `src/dashboardConfig.js`. You can also duplicate them, should you want multiple instances of the same widget (see below).
+
+A widget’s size behavior can be defined by adding a `layout` key to a the widget config. E.g.: `{name: 'project-users', layout: {width: 'full', height: 'small'}}`. Accepted values are `auto`, `small`, `medium`, `large` and `full`.
+
+## How to install a widget
+
+Install a Dashboard widget as you would any other [Sanity Studio plugin](https://www.sanity.io/docs/plugins).
+
+E.g. if you want to install the cats example widget mentioned below, just type `sanity install dashboard-widget-cats` (this works because it's published on npm under the name `sanity-plugin-dashboard-widget-cats`) and update your `src/dashboardConfig.js` file by adding `{name: 'cats'}` to the `widgets` array. Poof, you've got 🐱 in your Studio.
+
+Some widgets allow options to change aspects of their behavior. If you install the document-list widget mentioned below, it can be configured with:
+
+```js
+{name: 'document-list', options: {title: 'Last edited books', order: '_updatedAt desc', types: ['book']}}
+```
+
+## How to create a widget
+
+Widgets are Sanity plugins which implement the part `part:@sanity/dashboard/widget`. Stay tuned for a complete "Widget Authors Cookbook", but until then, have a look at some sample widgets: E.g. [A document List](https://github.com/sanity-io/dashboard-widget-document-list/tree/master) or [maybe some cats](https://github.com/sanity-io/example-dashboard-widget-cats)?
+
+---

src/widgets/projectInfo/ProjectInfo.js

@@ -0,2 +1,4 @@
+/* eslint-disable react/forbid-prop-types, no-console */
 import React from 'react'
+import {isPlainObject} from 'lodash'
 import PropTypes from 'prop-types'
@@ -7,2 +9,4 @@ import sanityClient from 'part:@sanity/base/client'
 
+const {projectId, dataset} = sanityClient.config()
+
 function isUrl(url) {
@@ -12,11 +16,11 @@ return /^https?:\/\//.test(`${url}`)
 
-function getGraphQlUrl(projectId) {
-  return `https://${projectId}.api.sanity.io/v1/graphql/test`
+function getGraphQlUrl() {
+  return `https://${projectId}.api.sanity.io/v1/graphql/${dataset}/default`
 }
 
-function getGroqUrl(projectId) {
-  return `https://${projectId}.api.sanity.io/v1/groq/test`
+function getGroqUrl() {
+  return `https://${projectId}.api.sanity.io/v1/groq/${dataset}`
 }
 
-function getManageUrl(projectId) {
+function getManageUrl() {
   return `https://manage.sanity.io/projects/${projectId}`
@@ -35,8 +39,6 @@ }
     studioHost: null,
-    graphqlApi: null,
-    error: null
+    graphqlApi: null
   }
 
   componentDidMount() {
-    const {projectId} = sanityClient.config()
     // fetch project data
@@ -49,3 +51,10 @@ sanityClient.projects
       })
-      .catch(error => this.setState({error}))
+      .catch(error => {
+        console.log('Error while looking for studioHost', error)
+        this.setState({
+          studioHost: {
+            error: 'Something went wrong while looking up studioHost. See console.'
+          }
+        })
+      })
 
@@ -56,6 +65,6 @@ // ping assumed graphql endpoint
         method: 'HEAD',
-        uri: `/graphql/${sanityClient.config().dataset}/default`
+        uri: `/graphql/${dataset}/default`
       })
       .then(response => {
-        this.setState({graphqlApi: getGraphQlUrl(projectId)})
+        this.setState({graphqlApi: getGraphQlUrl()})
       })
@@ -66,3 +75,8 @@ .catch(error => {
         } else {
-          this.setState({error})
+          console.log('Error while looking for graphqlApi', error)
+          this.setState({
+            graphqlApi: {
+              error: 'Something went wrong while looking up graphqlApi. See console.'
+            }
+          })
         }
@@ -73,3 +87,2 @@ })
   assembleTableRows() {
-    const {projectId, dataset} = sanityClient.config()
     const {graphqlApi, studioHost} = this.state
@@ -99,3 +112,3 @@ const propsData = this.props.data
           rows: [
-            {title: 'GROQ', value: getGroqUrl(projectId)},
+            {title: 'GROQ', value: getGroqUrl()},
             {title: 'GraphQL', value: graphqlApi || 'Not deployed'}
@@ -118,6 +131,4 @@ ]
     })
-
     Object.keys(otherStuff).forEach(category => {
-      result.push({title: category})
-      result = result.concat(otherStuff[category])
+      result.push({title: category, rows: otherStuff[category]})
     })
@@ -129,8 +140,2 @@
   render() {
-    const {error} = this.state
-
-    if (error) {
-      return <pre>{JSON.stringify(error, null, 2)}</pre>
-    }
-
     return (
@@ -158,3 +163,10 @@ <div className={styles.container}>
                       <th>{row.title}</th>
-                      <td>{isUrl(row.value) ? <a href={row.value}>{row.value}</a> : row.value}</td>
+                      {isPlainObject(row.value) && (
+                        <td className={styles.apiError}>{row.value.error}</td>
+                      )}
+                      {!isPlainObject(row.value) && (
+                        <td>
+                          {isUrl(row.value) ? <a href={row.value}>{row.value}</a> : row.value}
+                        </td>
+                      )}
                     </tr>
@@ -168,8 +180,3 @@ )
         <div className={styles.buttonContainer}>
-          <AnchorButton
-            href={getManageUrl(sanityClient.clientConfig.projectId)}
-            bleed
-            color="primary"
-            kind="simple"
-          >
+          <AnchorButton href={getManageUrl()} bleed color="primary" kind="simple">
             Manage project
@@ -176,0 +183,0 @@ </AnchorButton>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

79499

increased by4.15%

Lines of code

1875

increased by1.08%

Number of lines in readme file

60

increased by172.73%

No dependency changes