@bigbinary/neeto-github-frontend 1.0.13 → 1.0.15

package/README.md

@@ -1,296 +1,71 @@
 # neeto-github-nano
 
-A Ruby gem that manages GitHub integration across neeto products
+The `neeto-github-nano` manages GitHub integration across neeto products.
 
-## Installation
+## Contents
 
-Add this line to your application's Gemfile:
+1. [Development with Host Application](#development-with-host-application)
+    - [Engine](#engine)
+      - [Installation](#installation)
+      - [Usage](#usage)
+    - [Frontend package](#frontend-package)
+      - [Installation](#installation-1)
+      - [Components](#components)
+2. [Instructions for Publishing](#instructions-for-publishing)
 
-```ruby
-gem "neeto-github-engine", git: "https://#{github_auth_string}@github.com/bigbinary/neeto-github-nano.git", branch: "stable"
-
-gem "octokit"
-```
-
-And then execute:
-
-```bash
-bundle
-```
-
-Or use `gem install`:
-
-```bash
-gem install neeto-github-engine octokit
-```
-
-## Migration
-
-To Copy migration files, run:
-
-```bash
-rails g neeto_github_engine:install
-```
-
-After adding the migration file, run:
-
-```bash
-bundle exec rails db:migrate
-```
-
-## Integration
-
-`neeto-github-engine` supports OAuth apps and GitHub apps. Depending upon the use case you can use either one or both together. Refer to the link below to understand the differences between a Github app and an OAuth app: <https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/differences-between-github-apps-and-oauth-apps>
-
-1. [Integrate OAuth app](#integrate-oauth-app)
-2. [Integrate GitHub app](#integrate-github-app)
-
-## Integrate OAuth app
-
-### Create an OAuth app on GitHub
-
-Refer to this: <https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app>
+## Development with Host Application
 
-Set the Callback URL as:
+### Engine
+The engine allows us to integrate OAuth apps and Github apps in the neeto applications.
 
-```text
-https://connect.neeto<AppName>.com
-```
-
-Here, the subdomain can be anything like `connect` or `app`.
-The domain will be the application domain.
-Create different OAuth apps for staging and production.
-
-After getting the `client_id` and `client_secret`,
-add this to the `secrets.yml` file in your application.
-
-```yml
-default:
-  github_oauth_app:
-    client_id: <%= ENV["GITHUB_CLIENT_ID"] %>
-    client_secret: <%= ENV["GITHUB_CLIENT_SECRET"] %>
-```
-
-and add the secrets to ENV.
-
-### Add JWT private and public keys
-
-Run the following ruby command to generate an RSA key pair:
-
-```ruby
-rsa = OpenSSL::PKey::RSA.generate(2048)
-```
-
-The following command prints the private key:
-
-```ruby
-rsa.to_s
-```
+#### Installation
 
-The following command prints the public key:
+1. Add gems to your application's Gemfile:
 
 ```ruby
-rsa.public_key.to_s
-```
-
-Store the private and public keys as environment variables,
-let's say, as `JWT_PRIVATE_KEY` and `JWT_PUBLIC_KEY`, respectively.
-Then add the keys to the `secrets.yml` file in your application,
-as shown below:
+gem "octokit"
 
-```yml
-default:
-  jwt:
-    private_key: <%= ENV['JWT_PRIVATE_KEY'].inspect %>
-    public_key: <%= ENV['JWT_PUBLIC_KEY'].inspect %>
+source "NEETO_GEM_SERVER_URL" do
+  gem "neeto-github-engine"
+end
 ```
 
-### Add association
+2. And then execute:
 
 ```bash
-rails g neeto_github_engine:integration <entity>
+bundle install
 ```
 
-For example, if the `organization` model should have many accounts, you should run:
+3. Copy migration files, run:
 
 ```bash
-rails g neeto_github_engine:integration organization
-```
-
-This will add `NeetoGithubEngine::Integratable` concern to the `Organization` model.
-
-### Controllers to store the access token
-
-- `AuthorizeController` (`/neeto_github/authorize`)
-  This action accepts 4 params:
-
-1. integrator_type
-2. integrator_id
-3. redirect_path
-4. scope
-
-For Example, if the `Organization` is the integrator of accounts then redirect the user to:
-
-```js
-/neeto_github/authorize?${qs.stringify({
-   integrator_type: 'Organization',
-   integrator_id: organizationId,
-   scope: "repo",
-   redirect_path: `/settings/github-integration`,
- })}
-```
-
-where the `scope` is what scope level application needs to access GitHub and
-`redirect_path` is where the user needs to be redirected after the authorization is completed.
-
-### Controllers
-
-```ruby
-NeetoGithubEngine::AccountsController
+rails g neeto_github_engine:install
 ```
 
-The controller mentioned above can be used to fetch GitHub accounts.
-
-Mandatory params:
-
-- `integrator_id`
-- `integrator_type`
-
-### Add Repository to Entity
+4. After adding the migration file, run:
 
 ```bash
-rails g neeto_github_engine:repository <entity>
-```
-
-The above command will:
-
-1. Create a file in `app/models` with the name `<entity>Repository.rb`.
-2. Add an association to the entity model.
-
-### Link Pull Request With Entity
-```
-include NeetoGithubEngine::Linkable
-```
-The above concern will associate the entity with `NeetoGithubEngine::PullRequest` Model.
-
-### Using controllers
-
-- Controllers must inherit from
-
-  ```ruby
-    NeetoGithubEngine::BaseController
-  ```
-
-  Mandatory params: account_id
-
-## Integrate GitHub app
-
-### Create a GitHub app in GitHub
-
-Refer: https://docs.github.com/en/apps/creating-github-apps/registering-a-github-app/registering-a-github-app
-
-**⚠️ When creating a GitHub app make sure to not to include spaces or special characters (except hyphen ``-``) in the GitHub App name field**
-
-Set the post installation setup url in the GitHub app's general settings page as:
-```
-https://app.neeto<AppName>.com/neeto_github/app_installations/callbacks
-```
-Here, the subdomain can be anything like connect or app. The domain will be the application domain.
-
-Enable the webhooks and set the webhook url as:
-
-```
-https://app.neeto<AppName>.com/neeto_github/webhooks
-```
-You can choose a random string of text with high entropy as `webhook_secret`.
-
-After getting the `app_id`, `app_name`, `private_key` and `webhook_secret`, add them to the secrets.yml file in your application.
-
-```yml
-default: &default
-  github_app:
-    id: <%= ENV["GITHUB_APP_ID"] %>
-    name: <%= ENV["GITHUB_APP_NAME"] %>
-    private_key: <%= ENV["GITHUB_APP_PRIVATE_KEY"].inspect %>
-    webhook_secret: <%= ENV["GITHUB_APP_WEBHOOK_SECRET"] %>
-```
-
-Follow the steps of OAuth app integration for adding [JWT private and public keys](#add-jwt-private-and-public-keys) and [association](#add-association).
-
-
-### Install GitHub app
-
-`AppInstallationsController#new` Used to install the github app in the user specified repositories. This action accepts 4 URL query parameters:
-
-1. integrator_type
-2. integrator_id
-3. redirect_path
-4. fallback_redirect_path
-
-Here the `redirect_path` is where the user needs to be redirected after the installation is completed and `fallback_redirect_path` is where the user needs to redirected in case of any error.
-
-```
-GET /neeto_github/app_installations/new?integrator_type=<integrator_type>&integrator_id=<integrator_id>&redirect_path=/settings&fallback_redirect_path=/settings
-```
-
-### Fetch app installations
-
-`AppInstallationsController#index` Used to list app installations that are associated with an integrator. This action accepts 4 URL query parameters:
-
-1. integrator_type
-2. integrator_id
-3. page_size (optional)
-4. page (optional)
-
-```
-GET /neeto_github/app_installations?integrator_type=<integrator_type>&integrator_id=<integrator_id>&page_size=10&page=1
-```
-
-### Destroy app installation
-
-`AppInstallationsController#destroy` Used to destroy a particular `AppInstallation`. This action accepts 3  URL parameters:
-
-Query parameters:
-1. integrator_type
-2. integrator_id
-
-Path parameters:
-1. app_installation_id
-
-```
-DELETE /neeto_github/app_installations/<app_installation_id>?integrator_type=<integrator_type>&integrator_id=<integrator_id>
+bundle exec rails db:migrate
 ```
 
-### Fetch app installation repositories
+#### Usage
+  - [Integration](./docs/engine/integration.md)
 
-`AppInstallations::RepositoriesController#index` Used to list the repositories of an installed github app. This action accepts 3 URL parameters:
+### Frontend package
+The frontend package exports several components.
 
-Query parameters:
-1. integrator_type
-2. integrator_id
+#### Installation
 
-Path parameters:
-1. app_installation_id
+Install the latest package using the below command -
 
+```bash
+yarn add @bigbinary/neeto-github-frontend
 ```
-GET /neeto_github/app_installations/<app_installation_id>/repositories?integrator_id=<integrator_id>&integrator_type=<integrator_type>
-```
-
-### Get an issue detail
-
-`AppInstallations::Repositories::IssuesController#Issue` This action provides the details of an github issue. This action accepts 5 URL parameters:
 
-Query parameters:
-1. integrator_type
-2. integrator_id
+#### Components
+  - [NeetoGithubNanoContainer](./docs/frontend/components/NeetoGithubNanoContainer/README.md)
+  - [NeetoGithubNanoPane](./docs/frontend/components/NeetoGithubNanoPane/README.md)
 
-Path parameters:
-1. app_installation_id
-4. repository_full_name
-3. issue_number
+## Instructions for Publishing
 
-`repository_full_name` should be URL encoded. You can use `encodeURIComponent` javascript method to URL encode `repository_full_name`.
-
-```
-GET /neeto_github/app_installations/<app_installation_id>/repositories/<url_encoded_repository_full_name>/issues/<issue_number>?integrator_id=<integrator_id>&integrator_type=<integrator_type>
-```
+Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.

package/app/javascript/src/translations/en.json

@@ -5,23 +5,19 @@
     "fetchingRepos": "Please wait for a moment while we fetch your repositories",
     "noRepos": "No repositories found",
     "noReposDescription": "Connect a GitHub repository to begin using your existing repos for new services.",
-    "notConnectedDescription": "Connect your {{appName, anyCase}} account to GitHub to begin using your existing repos for new services.",
+    "notConnectedDescription": "Connect your {{appName, anyCase}} to GitHub to get started.",
     "configureAccount": "Configure account",
     "connectAccount": "Connect account",
     "connectGithub": "Connect GitHub",
     "connectARepo": "Connect a repository",
     "connectRepository": "Connect repository",
     "continue": "Continue",
-    "publicGitRepo": "Public Git repository",
-    "publicGitRepoDescription": "Use a public repository by entering the URL below.",
-    "publicGitRepoPlaceholder": "https://github.com/bigbinary/example-app",
     "countOf": {
       "repos_one": "{{count}} repo",
       "repos_other": "{{count}} repos"
     },
     "modal": {
-      "title": "Create a new project",
-      "description": "Connect your Git repository or use an existing public repository URL."
+      "title": "Create a new project"
     },
     "troubleshoot": "Can't find a repository that's already connected? <troubleshootLink>Troubleshoot</troubleshootLink> your GitHub connection."
   }

package/dist/index.cjs.js

@@ -347,7 +347,6 @@ var RepositoryTile = function RepositoryTile(_ref) {
 
 var List = reactUtils.withT(function (_ref) {
   var t = _ref.t,
-    isPublicRepoAllowed = _ref.isPublicRepoAllowed,
     filteredRepositories = _ref.filteredRepositories,
     repositories = _ref.repositories,
     isConnecting = _ref.isConnecting,
@@ -355,10 +354,7 @@ var List = reactUtils.withT(function (_ref) {
     installationUrl = _ref.installationUrl,
     troubleshootUrl = _ref.troubleshootUrl;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]("neeto-ui-border-gray-300 neeto-ui-rounded-md m-0 flex flex-col items-center justify-center border border-solid p-0 2xl:h-96", {
-      "h-52": isPublicRepoAllowed,
-      "h-72": !isPublicRepoAllowed
-    })
+    className: "neeto-ui-border-gray-300 neeto-ui-rounded-md m-0 flex h-80 flex-col items-center justify-center border border-solid p-0 2xl:h-96"
   }, neetoCist.isPresent(repositories) ? /*#__PURE__*/React__default["default"].createElement(Scrollable__default["default"], {
     className: "m-0 h-full w-full overflow-y-scroll p-0 shadow-inner"
   }, neetoCist.isPresent(filteredRepositories) ? filteredRepositories.map(function (repository, index) {
@@ -399,7 +395,6 @@ var NotConnected = reactUtils.withT(function (_ref) {
 var Private = function Private(_ref) {
   var isConnected = _ref.isConnected,
     isConnecting = _ref.isConnecting,
-    isPublicRepoAllowed = _ref.isPublicRepoAllowed,
     repositories = _ref.repositories,
     onConnect = _ref.onConnect,
     installationUrl = _ref.installationUrl,
@@ -423,13 +418,14 @@ var Private = function Private(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "connect-repo neeto-ui-rounded-md neeto-ui-border-gray-300 border border-solid px-8 py-7"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, isConnected && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     className: "mb-2 pb-5 text-lg font-medium",
     style: "h2"
   }, t("neetoGithub.connectARepo")), isConnected ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex w-full flex-col space-y-6"
   }, /*#__PURE__*/React__default["default"].createElement(Search__default["default"], {
     onSearch: onSearch,
+    unlimitedChars: false,
     className: "w-full",
     suffix: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
       style: "body2"
@@ -440,7 +436,6 @@ var Private = function Private(_ref) {
     filteredRepositories: filteredRepositories,
     installationUrl: installationUrl,
     isConnecting: isConnecting,
-    isPublicRepoAllowed: isPublicRepoAllowed,
     onConnect: onConnect,
     repositories: repositories,
     troubleshootUrl: troubleshootUrl
@@ -453,79 +448,9 @@ var Private = function Private(_ref) {
   }))));
 };
 
-var Public = function Public(_ref) {
-  var isConnecting = _ref.isConnecting,
-    onConnect = _ref.onConnect;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isLoading = _useState2[0],
-    setIsLoading = _useState2[1];
-  var _useState3 = React.useState(""),
-    _useState4 = _slicedToArray(_useState3, 2),
-    publicRepoUrl = _useState4[0],
-    setPublicRepoUrl = _useState4[1];
-  return /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
-    className: "mb-2 pb-5"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex justify-between"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "pr-4"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "text-lg font-medium",
-    style: "h2"
-  }, t("neetoGithub.publicGitRepo")), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-text-gray-900 mt-2 flex max-w-xl space-x-1 font-sans text-sm font-normal leading-6 antialiased"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "body2"
-  }, t("neetoGithub.publicGitRepoDescription")))))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-text-gray-900 font-sans text-sm font-normal leading-6 antialiased"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "z-0 flex-1"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
-    nakedInput: true,
-    autocomplete: "false",
-    className: "relative rounded-b rounded-l rounded-r-none rounded-t border-b border-l border-r-0 border-t border-solid px-2",
-    placeholder: t("neetoGithub.publicGitRepoPlaceholder"),
-    size: "large",
-    spellcheck: "false",
-    type: "text",
-    value: publicRepoUrl,
-    onChange: function onChange(e) {
-      return setPublicRepoUrl(e.target.value);
-    }
-  }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "relative"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    className: "rounded-b rounded-l-none rounded-r rounded-t",
-    disabled: !neetoCist.isPresent(publicRepoUrl) || isLoading || isConnecting,
-    loading: isLoading,
-    size: "large",
-    style: "primary",
-    type: "button",
-    onClick: function onClick() {
-      return onConnect({
-        repoType: "public",
-        repository: {
-          fullName: publicRepoUrl
-        },
-        setIsLoading: setIsLoading
-      });
-    }
-  }, t("neetoGithub.continue"))))));
-};
-
 var Repositories = function Repositories(_ref) {
   var isConnected = _ref.isConnected,
     isConnecting = _ref.isConnecting,
-    isPublicRepoAllowed = _ref.isPublicRepoAllowed,
     repositories = _ref.repositories,
     onConnect = _ref.onConnect,
     installationUrl = _ref.installationUrl,
@@ -536,13 +461,9 @@ var Repositories = function Repositories(_ref) {
     installationUrl: installationUrl,
     isConnected: isConnected,
     isConnecting: isConnecting,
-    isPublicRepoAllowed: isPublicRepoAllowed,
     onConnect: onConnect,
     repositories: repositories,
     troubleshootUrl: troubleshootUrl
-  }), isPublicRepoAllowed && /*#__PURE__*/React__default["default"].createElement(Public, {
-    isConnecting: isConnecting,
-    onConnect: onConnect
   }));
 };
 
@@ -557,8 +478,6 @@ var NeetoGithubNanoContainer = function NeetoGithubNanoContainer(_ref) {
     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,
     _ref$paneRepositories = _ref.paneRepositories,
     paneRepositories = _ref$paneRepositories === void 0 ? [] : _ref$paneRepositories,
@@ -596,7 +515,6 @@ var NeetoGithubNanoContainer = function NeetoGithubNanoContainer(_ref) {
     installationUrl: installationUrl,
     isConnected: isConnected,
     isConnecting: isConnecting,
-    isPublicRepoAllowed: isPublicRepoAllowed,
     onConnect: onConnect,
     repositories: repositories,
     troubleshootUrl: troubleshootUrl
@@ -2869,8 +2787,6 @@ var NeetoGithubNanoPane = function NeetoGithubNanoPane(_ref) {
     isConnecting = _ref$isConnecting === void 0 ? false : _ref$isConnecting,
     _ref$isConnected = _ref.isConnected,
     isConnected = _ref$isConnected === void 0 ? false : _ref$isConnected,
-    _ref$isPublicRepoAllo = _ref.isPublicRepoAllowed,
-    isPublicRepoAllowed = _ref$isPublicRepoAllo === void 0 ? false : _ref$isPublicRepoAllo,
     _ref$installationUrl = _ref.installationUrl,
     installationUrl = _ref$installationUrl === void 0 ? NEW_INSTALLATION_URL : _ref$installationUrl,
     _ref$troubleshootUrl = _ref.troubleshootUrl,
@@ -2880,9 +2796,7 @@ var NeetoGithubNanoPane = function NeetoGithubNanoPane(_ref) {
     _ref$projects = _ref.projects,
     projects = _ref$projects === void 0 ? [] : _ref$projects,
     _ref$title = _ref.title,
-    title = _ref$title === void 0 ? "" : _ref$title,
-    _ref$description = _ref.description,
-    description = _ref$description === void 0 ? "" : _ref$description;
+    title = _ref$title === void 0 ? "" : _ref$title;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var initialFocusRef = React.useRef(null);
@@ -2910,15 +2824,11 @@ var NeetoGithubNanoPane = function NeetoGithubNanoPane(_ref) {
     size: "large"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h2"
-  }, neetoCist.isPresent(title) ? title : t("neetoGithub.modal.title")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "mt-4",
-    style: "body2"
-  }, neetoCist.isPresent(description) ? description : t("neetoGithub.modal.description"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement(NeetoGithubNanoContainer, {
+  }, neetoCist.isPresent(title) ? title : t("neetoGithub.modal.title"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement(NeetoGithubNanoContainer, {
     installationUrl: installationUrl,
     isConnected: isConnected,
     isConnecting: isConnecting,
     isPaneLoading: isPaneLoading,
-    isPublicRepoAllowed: isPublicRepoAllowed,
     onConnect: onConnect,
     paneAccounts: paneAccounts,
     paneRepositories: paneRepositories,