sanity-plugin-dashboard-widget-vercel 0.1.5 → 1.1.1

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.1.1](https://github.com/robinpyon/sanity-plugin-dashboard-widget-vercel/compare/v1.1.0...v1.1.1) (2022-01-03)
+
+
+### Bug Fixes
+
+* correctly namespace deployment target _ids ([cd97cd3](https://github.com/robinpyon/sanity-plugin-dashboard-widget-vercel/commit/cd97cd39bd35260efe728c796d8cbadf4d788aa6))
+
+## [1.1.0](https://github.com/robinpyon/sanity-plugin-dashboard-widget-vercel/compare/v1.0.0...v1.1.0) (2021-03-25)
+
+
+### Features
+
+* use API-versioned client if available ([44ca27f](https://github.com/robinpyon/sanity-plugin-dashboard-widget-vercel/commit/44ca27fbd0649be8c050aad8b7eecf67324ee65d))
+
+## [1.0.0](https://github.com/robinpyon/sanity-plugin-dashboard-widget-vercel/compare/v0.1.5...v1.0.0) (2021-03-24)
+
+
+### ⚠ BREAKING CHANGES
+
+* Deployment targets are now configured within sanity - please remove any vercel
+related configuration you may have stored inside your dashboard config file. Support for forcing
+small layout has also been (temporarily) dropped.
+
+### Features
+
+* store tokens in a namespaced sanity document, add support for multiple deploy targets ([a1a3446](https://github.com/robinpyon/sanity-plugin-dashboard-widget-vercel/commit/a1a34464590934f1bf7adf3812f29acbef3ed314))
+
+
+### Bug Fixes
+
+* add eventless transitions to deployment target list machine ([7a6d921](https://github.com/robinpyon/sanity-plugin-dashboard-widget-vercel/commit/7a6d921e05c238adbb335331531999a31f680b14))
+* set correct form defaults, update input descriptions, include target name in deploy button ([bf10600](https://github.com/robinpyon/sanity-plugin-dashboard-widget-vercel/commit/bf106000b1a69c9f127f517da98d901fbbbcd481))
+
 ### [0.1.5](https://github.com/robinpyon/sanity-plugin-dashboard-widget-vercel/compare/v0.1.4...v0.1.5) (2021-01-23)
 
 ### [0.1.4](https://github.com/robinpyon/sanity-plugin-dashboard-widget-vercel/compare/v0.1.3...v0.1.4) (2021-01-15)

package/README.md

@@ -2,13 +2,16 @@
 
 View your recent [Vercel](https://vercel.com/) deployments and manually trigger builds directly from your [Sanity](https://www.sanity.io/) dashboard.
 
-![image](https://user-images.githubusercontent.com/209129/99883578-55809d80-2c20-11eb-92e9-983b2038d46d.png)
+![image](https://user-images.githubusercontent.com/209129/112195398-d0bf8380-8c01-11eb-8857-60c37ae50326.jpg)
 
 ## Features
 
 - Displays a list of recent builds along with deployment aliases, branch / commit messages, build age and creator
-- Refreshes periodically (every 20 seconds), when the window gains focus and immediately after a manual build is triggered
-- Can also optionally display a button for manual builds
+- Manually trigger deployments straight from your studio (via Vercel deploy hook URLs)
+- Display (and deploy) multiple projects at once
+- Customise the number of visible deployment line items
+- Automatically refreshes deployments periodically, as well as immediately after a manual build is triggered
+- Built with [Sanity UI](https://www.sanity.io/ui)
 
 ## Install
 
@@ -18,7 +21,7 @@ In your Sanity project folder:
 sanity install dashboard-widget-vercel
 ```
 
-### Configure the plugin
+### Configure your dashboard
 
 If you haven't configured a [dashboard](https://www.sanity.io/docs/dashboard) yet:
 
@@ -50,69 +53,67 @@ export default {
     // ...
     {
       name: 'vercel',
-      options: {
-        deployLimit: 5,
-        deployHook: '%YOUR_DEPLOY_HOOK%', // optional
-        forceSmallLayout: false, // optional
-        projectId: '%YOUR_PROJECT_ID%',
-        teamId: '%YOUR_PROJECT_ID%', // optional
-        token: '%VERCEL_TOKEN%',
-      },
       layout: {
-        width: 'large',
+        width: 'full', // full width is recommended!
       },
     },
   ],
 }
 ```
 
-This will display the 5 most recent deploys from your Vercel project and a button to trigger manual builds.
-
-## Plugin options
-
-### token: string (required)
+### Add a deployment target
 
-Your Vercel API token.
+Simply visit your Sanity dashboard and click the '+' icon in the top right to add a new deploment target.
 
-These can be created in Vercel under **Account > Settings > Tokens**.
+You'll need to fill in the following:
 
-Remember that your token has access to your _entire account_, please strongly consider using [environment variables](https://www.sanity.io/docs/studio-environment-variables) as opposed to hard coding / checking these into source control.
+#### Name (required)
 
-### deployLimit: number (min: 1, max: 15) (required)
+The name assigned to a deployment target, used purely for presentational purposes in the dashboard.
 
-The number of deployments to display and fetch.
+Note that all deployment targets are sorted alphabetically.
 
-### projectId: string (required)
+#### Vercel Account Token (required)
 
-Your Vercel project ID.
+This can be created in Vercel under **Account > Settings > Tokens**.
 
-These can be retrieved via [Vercel's API](https://vercel.com/docs/api#endpoints/projects/get-projects).
+#### Vercel Project ID (required)
 
-### teamId: string
+This can be retrieved via [Vercel's API](https://vercel.com/docs/api#endpoints/projects/get-projects).
 
-Your Vercel team ID.
+#### Vercel Team ID
 
 Similar to project IDs, you can retrieve these via Vercel's API.
 
-_If your project is assigned to a team account, you must provide both team and project IDs_.
+If your project is assigned to a team account, you must provide both team and project IDs.
 
-### deployHook: string
+#### Vercel Deploy Hook
 
-Vercel deploy hook URLs used to trigger new builds.
+The Vercel deploy hook URL used to trigger new builds.
 
-If one is provided, a 'deploy' button will appear at the footer of the widget.
+Enabled a manual deployment button if provided.
 
 These can be created in Vercel by going to **Project > Settings > Git > Deploy Hooks**.
 
-### forceSmallLayout: boolean (default: false)
-
-This plugin uses media queries to render the table differently at varying breakpoints and works best if you specify `width: large` in the plugin `layout` object.
+#### Number of deploys to display (min: 1, max: 15) (required)
 
-In the event you'd like to use a `small` or `medium` width, you can force this plugin to render compact items with `forceSmallLayout: true` which will display much more nicely at more constrained widths.
+The number of deployments to display and fetch.
 
 ## Good to know
 
-Please keep the following in mind when manually deploying:
+### Token security
+
+When setting up new deployment targets, you're asked to provide your Vercel account token. It's important to know that your Vercel token provides unrestricted API access to your entire Vercel account.
+
+Your Vercel token and all other deployment settings are stored in the `vercel` namespace and by design, these [are not publicly accessible](https://www.sanity.io/docs/ids), even with a public dataset.
+
+However, please note that this token is exposed to all _authenticated users_ in your Sanity studio.
+
+If you need to limit exposure of this token to authenticated studio users, consider using [custom access control rules](https://www.sanity.io/docs/access-control) to limit access to documents of type `vercel.deploymentTarget`.
+
+### Deployment considerations
+
+Please also keep the following in mind when manually deploying:
 
 > Triggering a Deploy Hook will not rebuild an existing deployment. Instead, it will create a new deployment using the latest source code available on the specified branch.
 >

package/lib/app.js

@@ -0,0 +1,168 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _icons = require("@sanity/icons");
+
+var _ui = require("@sanity/ui");
+
+var _react = require("@xstate/react");
+
+var _groq = _interopRequireDefault(require("groq"));
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _reactQuery = require("react-query");
+
+var _client = require("./client");
+
+var _StateDebug = _interopRequireDefault(require("./components/StateDebug"));
+
+var _constants = require("./constants");
+
+var _deploymentTargetList = _interopRequireDefault(require("./machines/deploymentTargetList"));
+
+var _DeploymentTargets = _interopRequireDefault(require("./components/DeploymentTargets"));
+
+var _DialogForm = _interopRequireDefault(require("./components/DialogForm"));
+
+var _dialog = _interopRequireDefault(require("./machines/dialog"));
+
+var _templateObject;
+
+var Widget = function Widget() {
+  // xstate
+  var _useMachine = (0, _react.useMachine)(_deploymentTargetList["default"], {
+    services: {
+      fetchDataService: function fetchDataService(_context, _event) {
+        return _client.client.fetch((0, _groq["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["*[_type == \"", "\"] | order(name asc)"])), _constants.DEPLOYMENT_TARGET_DOCUMENT_TYPE)).then(function (result) {
+          return result;
+        });
+      }
+    }
+  }),
+      _useMachine2 = (0, _slicedToArray2["default"])(_useMachine, 2),
+      deploymentTargetListState = _useMachine2[0],
+      deploymentTargetListStateTransition = _useMachine2[1];
+
+  var _useMachine3 = (0, _react.useMachine)(_dialog["default"]),
+      _useMachine4 = (0, _slicedToArray2["default"])(_useMachine3, 2),
+      dialogState = _useMachine4[0],
+      dialogStateTransition = _useMachine4[1];
+
+  var queryClient = new _reactQuery.QueryClient({
+    defaultOptions: {
+      queries: {
+        cacheTime: 0,
+        staleTime: 0
+      }
+    }
+  }); // Callbacks
+
+  var handleDialogClose = function handleDialogClose() {
+    dialogStateTransition('CLOSE');
+  };
+
+  var handleDialogShowCreate = function handleDialogShowCreate() {
+    dialogStateTransition('CREATE');
+  };
+
+  var handleDialogShowEdit = function handleDialogShowEdit(deploymentTarget) {
+    dialogStateTransition('EDIT', {
+      deploymentTarget: deploymentTarget
+    });
+  };
+
+  var handleTargetCreate = function handleTargetCreate(deploymentTarget) {
+    deploymentTargetListStateTransition('CREATE', {
+      deploymentTarget: deploymentTarget
+    });
+  };
+
+  var handleTargetDelete = function handleTargetDelete(id) {
+    deploymentTargetListStateTransition('DELETE', {
+      id: id
+    });
+  };
+
+  var handleTargetUpdate = function handleTargetUpdate(deploymentTarget) {
+    deploymentTargetListStateTransition('UPDATE', {
+      deploymentTarget: deploymentTarget
+    });
+  };
+
+  return /*#__PURE__*/_react2["default"].createElement(_ui.ThemeProvider, {
+    scheme: "light",
+    theme: _ui.studioTheme
+  }, /*#__PURE__*/_react2["default"].createElement(_ui.ToastProvider, {
+    zOffset: _constants.Z_INDEX_TOAST_PROVIDER
+  }, /*#__PURE__*/_react2["default"].createElement(_reactQuery.QueryClientProvider, {
+    client: queryClient
+  }, /*#__PURE__*/_react2["default"].createElement(_ui.Card, {
+    radius: 2,
+    style: {
+      overflow: 'hidden '
+    }
+  }, /*#__PURE__*/_react2["default"].createElement(_StateDebug["default"], {
+    name: "List",
+    state: deploymentTargetListState
+  }), /*#__PURE__*/_react2["default"].createElement(_ui.Flex, {
+    align: "center",
+    justify: "space-between",
+    paddingX: 3,
+    paddingY: 2
+  }, /*#__PURE__*/_react2["default"].createElement(_ui.Text, {
+    size: 5,
+    weight: "semibold"
+  }, "Vercel deployments"), /*#__PURE__*/_react2["default"].createElement(_ui.Tooltip, {
+    content: /*#__PURE__*/_react2["default"].createElement(_ui.Box, {
+      padding: 2
+    }, /*#__PURE__*/_react2["default"].createElement(_ui.Text, {
+      muted: true,
+      size: 1
+    }, "Create new deployment target")),
+    placement: "left"
+  }, /*#__PURE__*/_react2["default"].createElement(_ui.Button, {
+    fontSize: 1,
+    icon: _icons.AddIcon,
+    onClick: handleDialogShowCreate,
+    mode: "bleed"
+  }))), /*#__PURE__*/_react2["default"].createElement(_ui.Box, null, deploymentTargetListState.matches('pending') && /*#__PURE__*/_react2["default"].createElement(_ui.Box, {
+    paddingX: 3,
+    paddingY: 4
+  }, /*#__PURE__*/_react2["default"].createElement(_ui.Text, null, "Loading...")), deploymentTargetListState.matches('ready.withoutData') && /*#__PURE__*/_react2["default"].createElement(_ui.Box, {
+    paddingX: 3,
+    paddingY: 4
+  }, /*#__PURE__*/_react2["default"].createElement(_ui.Text, null, "No deployment targets found.", ' ', /*#__PURE__*/_react2["default"].createElement("a", {
+    onClick: handleDialogShowCreate,
+    style: {
+      cursor: 'pointer'
+    }
+  }, "Create a new target?"))), deploymentTargetListState.matches('ready.withData') && /*#__PURE__*/_react2["default"].createElement(_DeploymentTargets["default"], {
+    items: deploymentTargetListState.context.results,
+    onDialogEdit: handleDialogShowEdit
+  }), deploymentTargetListState.matches('failed') && /*#__PURE__*/_react2["default"].createElement(_ui.Box, {
+    paddingX: 3,
+    paddingY: 4
+  }, /*#__PURE__*/_react2["default"].createElement(_ui.Text, null, "Failed to retrieve deployment targets. Please check the developer console log for more information.")))), dialogState.matches('create') && /*#__PURE__*/_react2["default"].createElement(_DialogForm["default"], {
+    onClose: handleDialogClose,
+    onCreate: handleTargetCreate
+  }), dialogState.matches('edit') && /*#__PURE__*/_react2["default"].createElement(_DialogForm["default"], {
+    deploymentTarget: dialogState.context.editDeploymentTarget,
+    onClose: handleDialogClose,
+    onDelete: handleTargetDelete,
+    onUpdate: handleTargetUpdate
+  }))));
+};
+
+var _default = Widget;
+exports["default"] = _default;

package/lib/client.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.client = void 0;
+
+var _client = _interopRequireDefault(require("part:@sanity/base/client"));
+
+var _constants = require("./constants");
+
+var client = typeof _client["default"].withConfig === 'function' ? _client["default"].withConfig({
+  apiVersion: _constants.API_VERSION
+}) : _client["default"];
+exports.client = client;

package/lib/components/DeployButton/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -9,45 +11,89 @@ exports["default"] = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = require("@xstate/react");
+var _icons = require("@sanity/icons");
 
-var _anchor = _interopRequireDefault(require("part:@sanity/components/buttons/anchor"));
+var _ui = require("@sanity/ui");
 
-var _default2 = _interopRequireDefault(require("part:@sanity/components/snackbar/default"));
+var _react = require("@xstate/react");
 
-var _react2 = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _constants = require("../../constants");
 
+var _deploy = _interopRequireDefault(require("../../machines/deploy"));
+
+var _StateDebug = _interopRequireDefault(require("../StateDebug"));
+
 var DeployButton = function DeployButton(props) {
-  var actor = props.actor;
+  var deployHook = props.deployHook,
+      onDeploySuccess = props.onDeploySuccess,
+      targetName = props.targetName;
 
-  var _useActor = (0, _react.useActor)(actor),
-      _useActor2 = (0, _slicedToArray2["default"])(_useActor, 2),
-      state = _useActor2[0],
-      send = _useActor2[1];
+  var _useMachine = (0, _react.useMachine)((0, _deploy["default"])(deployHook)),
+      _useMachine2 = (0, _slicedToArray2["default"])(_useMachine, 3),
+      deployState = _useMachine2[0],
+      deployStateTransition = _useMachine2[1],
+      deployStateInterpreter = _useMachine2[2];
+
+  var toast = (0, _ui.useToast)();
+  var isError = deployState.matches('error');
+  var isSuccess = deployState.matches('success'); // Callbacks
 
   var handleDeploy = function handleDeploy() {
-    send({
+    deployStateTransition({
       type: 'DEPLOY'
     });
-  };
-
-  return /*#__PURE__*/_react2["default"].createElement(_react2["default"].Fragment, null, /*#__PURE__*/_react2["default"].createElement(_anchor["default"], {
-    color: "primary",
-    disabled: state.context.disabled,
-    kind: "simple",
-    onClick: handleDeploy
-  }, state.context.label), state.matches('success') && /*#__PURE__*/_react2["default"].createElement(_default2["default"], {
-    kind: "success",
-    subtitle: "Deploy queued",
-    title: /*#__PURE__*/_react2["default"].createElement("strong", null, _constants.WIDGET_NAME),
-    timeout: 8000
-  }), state.matches('error') && /*#__PURE__*/_react2["default"].createElement(_default2["default"], {
-    kind: "error",
-    subtitle: "Unable to queue deploy: ".concat(state.context.error),
-    title: /*#__PURE__*/_react2["default"].createElement("strong", null, _constants.WIDGET_NAME),
-    timeout: 8000
+  }; // Effects
+
+
+  (0, _react2.useEffect)(function () {
+    if (isError) {
+      toast.push({
+        closable: true,
+        description: "Unable to queue deploy for ".concat(targetName, ": ").concat(deployState.context.error),
+        duration: 8000,
+        status: 'error',
+        title: _constants.WIDGET_NAME
+      });
+    }
+
+    if (isSuccess) {
+      toast.push({
+        closable: true,
+        description: "Deploy queued for ".concat(targetName),
+        duration: 8000,
+        status: 'success',
+        title: _constants.WIDGET_NAME
+      });
+    }
+  }, [isError, isSuccess]);
+  (0, _react2.useEffect)(function () {
+    deployStateInterpreter.onTransition(function (state) {
+      if (state.value === 'success') {
+        if (onDeploySuccess) {
+          onDeploySuccess();
+        }
+      }
+    });
+  }, [deployStateInterpreter]);
+  return /*#__PURE__*/_react2["default"].createElement(_ui.Box, {
+    padding: 3,
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react2["default"].createElement(_StateDebug["default"], {
+    name: "Deploy",
+    state: deployState
+  }), /*#__PURE__*/_react2["default"].createElement(_ui.Button, {
+    disabled: deployState.context.disabled,
+    fontSize: 1,
+    icon: _icons.UploadIcon,
+    mode: "ghost",
+    onClick: handleDeploy,
+    padding: 3,
+    text: "".concat(deployState.context.label, " ").concat(targetName),
+    tone: "default"
   }));
 };
 

package/lib/components/Deployment/index.js

@@ -9,18 +9,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _ioniconsSolid = require("@emotion-icons/ionicons-solid");
+var _ui = require("@sanity/ui");
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactTimeAgo = _interopRequireDefault(require("react-time-ago"));
 
-var _themeUi = require("theme-ui");
-
-var _TD = _interopRequireDefault(require("../TD"));
+var _TableCell = _interopRequireDefault(require("../TableCell"));
 
 var _StatusDot = _interopRequireDefault(require("../StatusDot"));
 
+var _icons = require("@sanity/icons");
+
 var Deployment = function Deployment(props) {
   var _deployment$meta, _deployment$meta2, _deployment$alias, _deployment$creator;
 
@@ -29,82 +29,77 @@ var Deployment = function Deployment(props) {
   var commitMessage = deployment === null || deployment === void 0 ? void 0 : (_deployment$meta = deployment.meta) === null || _deployment$meta === void 0 ? void 0 : _deployment$meta.githubCommitMessage;
   var commitRef = deployment === null || deployment === void 0 ? void 0 : (_deployment$meta2 = deployment.meta) === null || _deployment$meta2 === void 0 ? void 0 : _deployment$meta2.githubCommitRef;
   var targetUrl = (_deployment$alias = deployment.alias) !== null && _deployment$alias !== void 0 ? _deployment$alias : deployment.url;
-  return /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement(_TD["default"], null, /*#__PURE__*/_react["default"].createElement(_themeUi.Flex, {
-    sx: {
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_StatusDot["default"], {
-    state: deployment.state,
-    sx: {
-      flexShrink: 0,
-      mr: 2
-    },
-    variant: "statusDot.smallOnly"
-  }), targetUrl ? /*#__PURE__*/_react["default"].createElement(_themeUi.Flex, {
-    sx: {
-      alignItems: 'center'
-    }
-  }, deployment.alias && /*#__PURE__*/_react["default"].createElement(_ioniconsSolid.ReturnDownForward, {
-    size: "12px",
+  return /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, /*#__PURE__*/_react["default"].createElement(_ui.Flex, {
+    align: "center"
+  }, /*#__PURE__*/_react["default"].createElement(_ui.Box, {
+    display: ['block', 'block', 'block', 'block', 'none'],
+    marginRight: 3,
     style: {
       flexShrink: 0
     }
-  }), /*#__PURE__*/_react["default"].createElement(_themeUi.Box, {
-    ml: deployment.alias ? 1 : 0,
-    variant: "singleLine"
-  }, deployment.state === 'READY' ? /*#__PURE__*/_react["default"].createElement(_themeUi.Link, {
+  }, /*#__PURE__*/_react["default"].createElement(_StatusDot["default"], {
+    state: deployment.state
+  })), targetUrl ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, deployment.alias && /*#__PURE__*/_react["default"].createElement(_icons.LinkIcon, null), /*#__PURE__*/_react["default"].createElement(_ui.Box, {
+    marginLeft: deployment.alias ? 1 : 0
+  }, /*#__PURE__*/_react["default"].createElement(_ui.Text, {
+    muted: !(deployment.state === 'READY'),
+    size: 1,
+    style: {
+      textDecoration: deployment.state === 'CANCELED' || deployment.state === 'ERROR' ? 'line-through' : 'normal'
+    },
+    textOverflow: "ellipsis"
+  }, deployment.state === 'READY' ? /*#__PURE__*/_react["default"].createElement("a", {
     href: "https://".concat(targetUrl),
     rel: "noopener noreferrer",
     target: "_blank"
-  }, targetUrl) : /*#__PURE__*/_react["default"].createElement(_themeUi.Box, {
-    color: "muted",
-    sx: {
-      textDecoration: deployment.state === 'CANCELED' || deployment.state === 'ERROR' ? 'line-through' : 'normal'
-    }
-  }, targetUrl))) : /*#__PURE__*/_react["default"].createElement(_themeUi.Box, {
-    color: "muted"
-  }, "Uploading..."))), /*#__PURE__*/_react["default"].createElement(_TD["default"], {
-    variant: "cells.state"
-  }, /*#__PURE__*/_react["default"].createElement(_themeUi.Flex, {
-    sx: {
-      alignItems: 'center'
-    }
+  }, targetUrl) : targetUrl))) : /*#__PURE__*/_react["default"].createElement(_ui.Text, {
+    size: 1
+  }, "Uploading..."))), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+    variant: "state"
+  }, /*#__PURE__*/_react["default"].createElement(_ui.Flex, {
+    align: "center"
   }, /*#__PURE__*/_react["default"].createElement(_StatusDot["default"], {
-    state: deployment.state,
-    variant: "statusDot.default"
-  }), /*#__PURE__*/_react["default"].createElement(_themeUi.Box, {
-    ml: "7px"
+    state: deployment.state
+  }), /*#__PURE__*/_react["default"].createElement(_ui.Box, {
+    marginLeft: 2
+  }, /*#__PURE__*/_react["default"].createElement(_ui.Text, {
+    size: 1
   }, deployment.state.trim().toLowerCase().replace(/^[a-z]/i, function (t) {
     return t.toUpperCase();
-  })))), /*#__PURE__*/_react["default"].createElement(_TD["default"], {
-    variant: "cells.branch"
-  }, /*#__PURE__*/_react["default"].createElement(_themeUi.Box, {
-    variant: "singleLine"
-  }, commitRef), commitMessage && /*#__PURE__*/_react["default"].createElement(_themeUi.Box, {
-    color: "muted",
-    variant: "singleLine"
-  }, commitMessage)), /*#__PURE__*/_react["default"].createElement(_TD["default"], {
-    variant: "cells.age"
-  }, /*#__PURE__*/_react["default"].createElement(_themeUi.Box, {
-    variant: "singleLine"
+  }))))), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+    variant: "branch"
+  }, /*#__PURE__*/_react["default"].createElement(_ui.Stack, {
+    space: 2
+  }, /*#__PURE__*/_react["default"].createElement(_ui.Text, {
+    size: 1,
+    textOverflow: "ellipsis"
+  }, commitRef), commitMessage && /*#__PURE__*/_react["default"].createElement(_ui.Text, {
+    muted: true,
+    size: 1,
+    textOverflow: "ellipsis"
+  }, commitMessage))), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+    variant: "age"
+  }, /*#__PURE__*/_react["default"].createElement(_ui.Flex, {
+    align: "center"
+  }, /*#__PURE__*/_react["default"].createElement(_ui.Text, {
+    size: 1
   }, /*#__PURE__*/_react["default"].createElement(_reactTimeAgo["default"], {
     date: date.current,
     locale: "en-US",
     timeStyle: "mini"
-  }))), /*#__PURE__*/_react["default"].createElement(_TD["default"], {
-    variant: "cells.creator"
-  }, /*#__PURE__*/_react["default"].createElement(_themeUi.Flex, {
-    sx: {
-      alignItems: 'center',
-      justifyContent: 'center',
-      left: 0,
-      position: 'absolute',
-      size: '100%',
-      top: 0
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_themeUi.Image, {
+  })))), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+    variant: "creator"
+  }, /*#__PURE__*/_react["default"].createElement(_ui.Flex, {
+    align: "center",
+    justify: "center"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    draggable: false,
     src: "https://vercel.com/api/www/avatar/".concat(deployment === null || deployment === void 0 ? void 0 : (_deployment$creator = deployment.creator) === null || _deployment$creator === void 0 ? void 0 : _deployment$creator.uid, "?&s=48"),
-    variant: "avatar"
+    style: {
+      borderRadius: '20px',
+      height: '20px',
+      width: '20px'
+    }
   }))));
 };