@bigbinary/neeto-github-frontend 1.0.10 → 1.0.11

package/dist/index.js

@@ -1,9 +1,9 @@
 import React, { useState, useRef } from 'react';
+import classNames from 'classnames';
 import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { Settings, Plus, Building, User, CannedResponses, Lock } from '@bigbinary/neeto-icons';
 import { Button, Typography, Input, Pane } from '@bigbinary/neetoui';
 import { Github } from '@bigbinary/neeto-icons/misc';
-import classNames from 'classnames';
 import { isPresent, noop } from '@bigbinary/neeto-cist';
 import Search from '@bigbinary/neeto-molecules/Search';
 import { Trans, useTranslation } from 'react-i18next';
@@ -77,9 +77,9 @@ var List$1 = withT(function (_ref) {
         return window.open(profileUrl, "_blank");
       }
     }), /*#__PURE__*/React.createElement(Typography, {
-      className: "neeto-ui-text-gray-900 mx-2 text-sm",
+      className: "neeto-ui-text-gray-900 mx-2 text-lg",
       component: "span",
-      style: "h3"
+      style: "h2"
     }, "\u2022"), /*#__PURE__*/React.createElement(Typography, {
       style: "body2"
     }, t("neetoGithub.countOf.repos", {
@@ -197,10 +197,15 @@ var NoRepositories = withT(function (_ref) {
 });
 
 var RepositoryTile = function RepositoryTile(_ref) {
-  var onConnect = _ref.onConnect,
+  var isConnecting = _ref.isConnecting,
+    onConnect = _ref.onConnect,
     repository = _ref.repository;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
   var id = repository.id,
     fullName = repository.fullName,
     isPrivate = repository.isPrivate,
@@ -219,18 +224,21 @@ var RepositoryTile = function RepositoryTile(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: "hidden md:inline-block"
   }, /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-900 mx-2 text-sm",
+    className: "neeto-ui-text-gray-900 mx-2 text-lg",
     component: "span",
-    style: "h3"
+    style: "h2"
   }, "\u2022"), /*#__PURE__*/React.createElement(DateFormat.FromNow, {
     date: updatedAt
   }))), /*#__PURE__*/React.createElement(Button, {
+    disabled: isConnecting,
+    loading: isLoading,
     style: "primary",
     type: "button",
     onClick: function onClick() {
       return onConnect({
         repoType: "private",
-        repository: repository
+        repository: repository,
+        setIsLoading: setIsLoading
       });
     }
   }, t("neetoGithub.connect")));
@@ -241,6 +249,7 @@ var List = withT(function (_ref) {
     isPublicRepoAllowed = _ref.isPublicRepoAllowed,
     filteredRepositories = _ref.filteredRepositories,
     repositories = _ref.repositories,
+    isConnecting = _ref.isConnecting,
     onConnect = _ref.onConnect,
     installationUrl = _ref.installationUrl,
     troubleshootUrl = _ref.troubleshootUrl;
@@ -251,10 +260,12 @@ var List = withT(function (_ref) {
     })
   }, isPresent(repositories) ? /*#__PURE__*/React.createElement(Scrollable, {
     className: "m-0 h-full w-full overflow-y-scroll p-0 shadow-inner"
-  }, isPresent(filteredRepositories) ? filteredRepositories.map(function (repository) {
+  }, isPresent(filteredRepositories) ? filteredRepositories.map(function (repository, index) {
     return /*#__PURE__*/React.createElement(RepositoryTile, {
+      isConnecting: isConnecting,
       onConnect: onConnect,
-      repository: repository
+      repository: repository,
+      key: index
     });
   }) : /*#__PURE__*/React.createElement(Typography, {
     className: "flex h-full w-full items-center justify-center",
@@ -286,6 +297,7 @@ var NotConnected = withT(function (_ref) {
 
 var Private = function Private(_ref) {
   var isConnected = _ref.isConnected,
+    isConnecting = _ref.isConnecting,
     isPublicRepoAllowed = _ref.isPublicRepoAllowed,
     repositories = _ref.repositories,
     onConnect = _ref.onConnect,
@@ -324,9 +336,10 @@ var Private = function Private(_ref) {
       count: filteredRepositories.length
     }))
   }), /*#__PURE__*/React.createElement(List, {
-    isPublicRepoAllowed: isPublicRepoAllowed,
     filteredRepositories: filteredRepositories,
     installationUrl: installationUrl,
+    isConnecting: isConnecting,
+    isPublicRepoAllowed: isPublicRepoAllowed,
     onConnect: onConnect,
     repositories: repositories,
     troubleshootUrl: troubleshootUrl
@@ -340,13 +353,18 @@ var Private = function Private(_ref) {
 };
 
 var Public = function Public(_ref) {
-  var onConnect = _ref.onConnect;
+  var isConnecting = _ref.isConnecting,
+    onConnect = _ref.onConnect;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useState = useState(""),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    publicRepoUrl = _useState2[0],
-    setPublicRepoUrl = _useState2[1];
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    publicRepoUrl = _useState4[0],
+    setPublicRepoUrl = _useState4[1];
   return /*#__PURE__*/React.createElement("div", {
     className: "transition-drop-shadow neeto-ui-border-gray-300 neeto-ui-rounded-md border border-solid px-8 py-7 font-sans transition-colors"
   }, /*#__PURE__*/React.createElement("div", {
@@ -386,7 +404,8 @@ var Public = function Public(_ref) {
     className: "relative"
   }, /*#__PURE__*/React.createElement(Button, {
     className: "rounded-b rounded-l-none rounded-r rounded-t",
-    disabled: !isPresent(publicRepoUrl),
+    disabled: !isPresent(publicRepoUrl) || isLoading || isConnecting,
+    loading: isLoading,
     size: "large",
     style: "primary",
     type: "button",
@@ -395,7 +414,8 @@ var Public = function Public(_ref) {
         repoType: "public",
         repository: {
           fullName: publicRepoUrl
-        }
+        },
+        setIsLoading: setIsLoading
       });
     }
   }, t("neetoGithub.continue"))))));
@@ -403,6 +423,7 @@ var Public = function Public(_ref) {
 
 var Repositories = function Repositories(_ref) {
   var isConnected = _ref.isConnected,
+    isConnecting = _ref.isConnecting,
     isPublicRepoAllowed = _ref.isPublicRepoAllowed,
     repositories = _ref.repositories,
     onConnect = _ref.onConnect,
@@ -411,13 +432,15 @@ var Repositories = function Repositories(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: "w-full space-y-6"
   }, /*#__PURE__*/React.createElement(Private, {
-    isPublicRepoAllowed: isPublicRepoAllowed,
     installationUrl: installationUrl,
     isConnected: isConnected,
+    isConnecting: isConnecting,
+    isPublicRepoAllowed: isPublicRepoAllowed,
     onConnect: onConnect,
     repositories: repositories,
     troubleshootUrl: troubleshootUrl
   }), isPublicRepoAllowed && /*#__PURE__*/React.createElement(Public, {
+    isConnecting: isConnecting,
     onConnect: onConnect
   }));
 };
@@ -427,6 +450,8 @@ var NeetoGithubNanoContainer = function NeetoGithubNanoContainer(_ref) {
     accounts = _ref$accounts === void 0 ? [] : _ref$accounts,
     installationUrl = _ref.installationUrl,
     isConnected = _ref.isConnected,
+    _ref$isConnecting = _ref.isConnecting,
+    isConnecting = _ref$isConnecting === void 0 ? false : _ref$isConnecting,
     _ref$isPublicRepoAllo = _ref.isPublicRepoAllowed,
     isPublicRepoAllowed = _ref$isPublicRepoAllo === void 0 ? false : _ref$isPublicRepoAllo,
     onConnect = _ref.onConnect,
@@ -436,10 +461,14 @@ var NeetoGithubNanoContainer = function NeetoGithubNanoContainer(_ref) {
     _ref$isPane = _ref.isPane,
     isPane = _ref$isPane === void 0 ? false : _ref$isPane;
   return /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full flex-col-reverse xl:flex-row"
+    className: classNames("flex w-full flex-col-reverse", {
+      "2xl:flex-row": isPane,
+      "xl:flex-row": !isPane
+    })
   }, /*#__PURE__*/React.createElement(Repositories, {
     installationUrl: installationUrl,
     isConnected: isConnected,
+    isConnecting: isConnecting,
     isPublicRepoAllowed: isPublicRepoAllowed,
     onConnect: onConnect,
     repositories: repositories,
@@ -448,8 +477,8 @@ var NeetoGithubNanoContainer = function NeetoGithubNanoContainer(_ref) {
     accounts: accounts,
     installationUrl: installationUrl,
     isConnected: isConnected,
-    onConnect: onConnect,
-    isPane: isPane
+    isPane: isPane,
+    onConnect: onConnect
   }));
 };
 
@@ -2706,9 +2735,11 @@ var newInstallationParams = lib.stringify({
 var NEW_INSTALLATION_URL = "/github_integrations/app_installations/new?".concat(newInstallationParams);
 var TROUBLESHOOT_URL = "https://render.com/docs/github#troubleshooting";
 
-var NeetoGithubNanoModal = function NeetoGithubNanoModal(_ref) {
+var NeetoGithubNanoPane = function NeetoGithubNanoPane(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
+    _ref$isConnecting = _ref.isConnecting,
+    isConnecting = _ref$isConnecting === void 0 ? false : _ref$isConnecting,
     _ref$isConnected = _ref.isConnected,
     isConnected = _ref$isConnected === void 0 ? false : _ref$isConnected,
     _ref$isPublicRepoAllo = _ref.isPublicRepoAllowed,
@@ -2745,6 +2776,7 @@ var NeetoGithubNanoModal = function NeetoGithubNanoModal(_ref) {
     accounts: accounts,
     installationUrl: installationUrl,
     isConnected: isConnected,
+    isConnecting: isConnecting,
     isPublicRepoAllowed: isPublicRepoAllowed,
     onConnect: onConnect,
     repositories: repositories,
@@ -2758,5 +2790,5 @@ var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r
 var css = ".width-calc{width:calc(100% - 82px)}.neeto-github-modal-pane-wrapper{width:min(75%,1280px)}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3JlcG9zaXRvcnktdGlsZS5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3BhbmUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxZQUNFLHVCQ0NGLENDRkEsaUNBQ0UscUJES0YiLCJzb3VyY2VzQ29udGVudCI6WyIud2lkdGgtY2FsYyB7XG4gIHdpZHRoOiBjYWxjKDEwMCUgLSA4MnB4KTtcbn1cbiIsIi53aWR0aC1jYWxjIHtcbiAgd2lkdGg6IGNhbGMoMTAwJSAtIDgycHgpO1xufVxuXG4ubmVldG8tZ2l0aHViLW1vZGFsLXBhbmUtd3JhcHBlciB7XG4gIHdpZHRoOiBtaW4oNzUlLCAxMjgwcHgpO1xufSIsIi5uZWV0by1naXRodWItbW9kYWwtcGFuZS13cmFwcGVyIHtcbiAgd2lkdGg6IG1pbig3NSUsIDEyODBweCk7XG59XG4iXX0= */";
 n(css,{});
 
-export { NeetoGithubNanoContainer, NeetoGithubNanoModal };
+export { NeetoGithubNanoContainer, NeetoGithubNanoPane };
 //# sourceMappingURL=index.js.map