fix: Validate if the GitHub installation is valid

Flagsmith · May 8, 2024 · 47fad64 · 47fad64
1 parent 2fe2752
commit 47fad64
Show file tree

Hide file tree

Showing 11 changed files with 226 additions and 47 deletions.
diff --git a/frontend/common/services/useGithub.ts b/frontend/common/services/useGithub.ts
@@ -29,6 +29,7 @@ export const githubService = service
             query.organisation_id
           }/github/repositories/?${Utils.toParam({
             installation_id: query.installation_id,
+            is_github_installation: query.is_github_installation,
           })}`,
         }),
       }),

diff --git a/frontend/common/types/requests.ts b/frontend/common/types/requests.ts
@@ -317,6 +317,7 @@ export type Req = {
   updateGithubIntegration: {
     organisation_id: string
     github_integration_id: string
+    installation_id: string
   }
   deleteGithubIntegration: {
     organisation_id: string
@@ -361,7 +362,11 @@ export type Req = {
     repo_name: string
     repo_owner: string
   }
-  getGithubRepos: { installation_id: string; organisation_id: string }
+  getGithubRepos: {
+    installation_id: string
+    organisation_id: string
+    is_github_installation: string
+  }
   getServersideEnvironmentKeys: { environmentId: string }
   deleteServersideEnvironmentKeys: { environmentId: string; id: string }
   createServersideEnvironmentKeys: {

diff --git a/frontend/web/components/App.js b/frontend/web/components/App.js
@@ -18,6 +18,7 @@ import { getStore } from 'common/store'
 import { resolveAuthFlow } from '@datadog/ui-extensions-sdk'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import { getOrganisationUsage } from 'common/services/useOrganisationUsage'
+import { getGithubIntegration } from 'common/services/useGithubIntegration'
 import Button from './base/forms/Button'
 import Icon from './Icon'
 import AccountStore from 'common/stores/account-store'
@@ -38,10 +39,12 @@ const App = class extends Component {
   state = {
     activeOrganisation: 0,
     asideIsVisible: !isMobile,
+    githubMessage: '',
     lastEnvironmentId: '',
     lastProjectId: '',
     pin: '',
     showAnnouncement: true,
+    showGithubMessage: false,
   }
 
   constructor(props, context) {
@@ -53,6 +56,7 @@ const App = class extends Component {
     getBuildVersion()
     this.listenTo(ProjectStore, 'change', () => this.forceUpdate())
     this.listenTo(AccountStore, 'change', this.getOrganisationUsage)
+    this.getGithubIntegration()
     this.getOrganisationUsage()
     window.addEventListener('scroll', this.handleScroll)
     AsyncStorage.getItem('lastEnv').then((res) => {
@@ -74,13 +78,31 @@ const App = class extends Component {
       getOrganisationUsage(getStore(), {
         organisationId: AccountStore.getOrganisation()?.id,
       }).then((res) => {
+        if (AccountStore.getOrganisation().id) {
+          this.getGithubIntegration()
+        }
         this.setState({
           activeOrganisation: AccountStore.getOrganisation().id,
         })
       })
     }
   }
 
+  getGithubIntegration = () => {
+    if (this.state.activeOrganisation) {
+      getGithubIntegration(getStore(), {
+        organisation_id: this.state.activeOrganisation,
+      }).then((res) => {
+        if (res.isError && res.error.data.status === 410) {
+          this.setState({
+            githubMessage: res.error.data.detail,
+            showGithubMessage: true,
+          })
+        }
+      })
+    }
+  }
+
   toggleDarkMode = () => {
     const newValue = !Utils.getFlagsmithHasFeature('dark_mode')
     flagsmith.setTrait('dark_mode', newValue)
@@ -474,6 +496,28 @@ const App = class extends Component {
                               id={AccountStore.getOrganisation()?.id}
                             />
                           )}
+                          {user && this.state.showGithubMessage && (
+                            <Row className={'px-3'}>
+                              <InfoMessage
+                                title={'Invalid Github Installation'}
+                                infoMessageClass={'announcement'}
+                                isClosable={announcementValue.isClosable}
+                                close={() =>
+                                  this.closeAnnouncement(announcementValue.id)
+                                }
+                                buttonText={'Go to Integrations'}
+                                goToIntegrations={() => {
+                                  this.context.router.history.replace(
+                                    `/project/${projectId}/integrations/`,
+                                  )
+                                }}
+                              >
+                                <div>
+                                  <div>{this.state.githubMessage}</div>
+                                </div>
+                              </InfoMessage>
+                            </Row>
+                          )}
                           {user && showBanner && (
                             <Row className={'px-3'}>
                               <InfoMessage

diff --git a/frontend/web/components/GitHubRepositoriesSelect.tsx b/frontend/web/components/GitHubRepositoriesSelect.tsx
@@ -2,13 +2,16 @@ import React, { FC, useEffect, useState } from 'react'
 import { Repository } from 'common/types/responses'
 import Button from './base/forms/Button'
 import { useCreateGithubRepositoryMutation } from 'common/services/useGithubRepository'
+import GithubRepositoriesTable from './GithubRepositoriesTable'
+import DeleteGithubIntegracion from './DeleteGithubIntegracion'
 
 export type GitHubRepositoriesSelectType = {
   disabled?: boolean
   repositories: Repository[] | undefined
   organisationId: string
   projectId: string
   githubId: string
+  manageIntegration: () => void
 }
 
 type repoSelectValue = {
@@ -18,6 +21,7 @@ type repoSelectValue = {
 const GitHubRepositoriesSelect: FC<GitHubRepositoriesSelectType> = ({
   disabled,
   githubId,
+  manageIntegration,
   organisationId,
   projectId,
   repositories,
@@ -73,6 +77,30 @@ const GitHubRepositoriesSelect: FC<GitHubRepositoriesSelectType> = ({
           Add Repository
         </Button>
       </div>
+      <>
+        <GithubRepositoriesTable
+          githubId={githubId}
+          organisationId={organisationId}
+        />
+        <div className='text-right mt-2'>
+          <Button
+            className='mr-3'
+            id='open-github-win-installations-btn'
+            data-test='open-github-win-installations-btn'
+            onClick={manageIntegration}
+            size='small'
+          >
+            Manage available GitHub Repositories
+          </Button>
+          <DeleteGithubIntegracion
+            githubId={githubId}
+            organisationId={organisationId}
+            onConfirm={() => {
+              window.location.reload()
+            }}
+          />
+        </div>
+      </>
     </div>
   )
 }

diff --git a/frontend/web/components/InfoMessage.js b/frontend/web/components/InfoMessage.js
@@ -8,7 +8,11 @@ export default class InfoMessage extends PureComponent {
   static displayName = 'InfoMessage'
 
   handleOpenNewWindow = () => {
-    window.open(this.props.url, '_blank')
+    if (this.props.goToIntegrations) {
+      this.props.goToIntegrations()
+    } else {
+      window.open(this.props.url, '_blank')
+    }
   }
 
   render() {

diff --git a/frontend/web/components/IntegrationList.js b/frontend/web/components/IntegrationList.js
@@ -224,17 +224,21 @@ class IntegrationList extends Component {
 
   componentDidMount() {
     this.fetch()
-    if (Utils.getFlagsmithHasFeature('github_integration')) {
-      getGithubIntegration(getStore(), {
+  }
+  fetchGithubIntegration() {
+    getGithubIntegration(
+      getStore(),
+      {
         organisation_id: AccountStore.getOrganisation().id,
-      }).then((res) => {
-        this.setState({
-          githubId: res?.data?.results[0]?.id,
-          hasIntegrationWithGithub: !!res?.data?.results?.length,
-          installationId: res?.data?.results[0]?.installation_id,
-        })
+      },
+      { forceRefetch: true },
+    ).then((res) => {
+      this.setState({
+        githubId: res?.data?.results[0]?.id,
+        hasIntegrationWithGithub: !!res?.data?.results?.length,
+        installationId: res?.data?.results[0]?.installation_id,
       })
-    }
+    })
   }
 
   fetch = () => {
@@ -280,6 +284,7 @@ class IntegrationList extends Component {
       }),
     ).then((res) => {
       console.log(res)
+      this.fetchGithubIntegration()
       this.setState({
         activeIntegrations: _.map(res, (item) =>
           !!item && item.length ? item : [],

diff --git a/frontend/web/components/MyGitHubRepositoriesSelect.tsx b/frontend/web/components/MyGitHubRepositoriesSelect.tsx
@@ -1,31 +1,53 @@
 import { FC } from 'react'
 import { useGetGithubReposQuery } from 'common/services/useGithub'
 import GitHubRepositoriesSelect from './GitHubRepositoriesSelect'
+import InvalidGithubIntegration from './modals/InvalidGithubIntegration'
 
 type MyGitHubRepositoriesSelectType = {
   installationId: string
   organisationId: string
   projectId: string
   githubId: string
+  manageIntegration: () => void
+  onComplete: () => void
 }
 
 const MyGitHubRepositoriesSelect: FC<MyGitHubRepositoriesSelectType> = ({
   githubId,
   installationId,
+  manageIntegration,
+  onComplete,
   organisationId,
   projectId,
 }) => {
-  const { data } = useGetGithubReposQuery({
+  const { data, error, isError, isFetching } = useGetGithubReposQuery({
     installation_id: installationId,
+    is_github_installation: 'False',
     organisation_id: organisationId,
   })
   return (
-    <GitHubRepositoriesSelect
-      githubId={githubId}
-      organisationId={organisationId}
-      projectId={projectId}
-      repositories={data?.repositories}
-    />
+    <>
+      {isFetching ? (
+        <div className='text-center'>
+          <Loader />
+        </div>
+      ) : !isError && data ? (
+        <GitHubRepositoriesSelect
+          githubId={githubId}
+          organisationId={organisationId}
+          projectId={projectId}
+          repositories={data?.repositories}
+          manageIntegration={manageIntegration}
+        />
+      ) : (
+        <InvalidGithubIntegration
+          organisationId={organisationId}
+          githubIntegrationId={githubId}
+          errorMessage={error?.data?.detail}
+          onComplete={onComplete}
+        />
+      )}
+    </>
   )
 }
 

diff --git a/frontend/web/components/modals/CreateEditIntegrationModal.js b/frontend/web/components/modals/CreateEditIntegrationModal.js
@@ -5,11 +5,9 @@ import _data from 'common/data/base/_data'
 import ErrorMessage from 'components/ErrorMessage'
 import ModalHR from './ModalHR'
 import Button from 'components/base/forms/Button'
-import GithubRepositoriesTable from 'components/GithubRepositoriesTable'
 import classNames from 'classnames'
 import { getStore } from 'common/store'
 import { getGithubRepos } from 'common/services/useGithub'
-import DeleteGithubIntegracion from 'components/DeleteGithubIntegracion'
 
 const GITHUB_INSTALLATION_UPDATE = 'update'
 
@@ -233,29 +231,8 @@ const CreateEditIntegration = class extends Component {
                     installationId={this.props.githubMeta.installationId}
                     organisationId={AccountStore.getOrganisation().id}
                     projectId={this.props.projectId}
-                  />
-                </div>
-                <GithubRepositoriesTable
-                  githubId={this.props.githubMeta.githubId}
-                  organisationId={AccountStore.getOrganisation().id}
-                />
-                <div className='text-right mt-2'>
-                  <Button
-                    className='mr-3'
-                    type='text'
-                    id='open-github-win-installations-btn'
-                    data-test='open-github-win-installations-btn'
-                    onClick={this.openGitHubWinInstallations}
-                    size='small'
-                  >
-                    Manage available GitHub Repositories
-                  </Button>
-                  <DeleteGithubIntegracion
-                    githubId={this.props.githubMeta.githubId}
-                    organisationId={AccountStore.getOrganisation().id}
-                    onConfirm={() => {
-                      closeModal()
-                    }}
+                    manageIntegration={this.openGitHubWinInstallations}
+                    onComplete={this.onComplete}
                   />
                 </div>
               </>

diff --git a/frontend/web/components/modals/CreateFlag.js b/frontend/web/components/modals/CreateFlag.js
@@ -691,7 +691,7 @@ const CreateFlag = class extends Component {
                             orgId={AccountStore.getOrganisation().id}
                             onChange={(v) =>
                               this.setState({
-                                featureExternalResource: v.value,
+                                featureExternalResource: v,
                               })
                             }
                             repoOwner={repoOwner}