fix: Improve the UI/UX for GitHub integrations

frontend/common/constants.ts

@@ -429,6 +429,10 @@ export default {
       'TRAITS_ID': 150,
     },
   },
+  githubType: {
+    githubIssue: 'GitHub Issue',
+    githubPR: 'Github PR',
+  },
   modals: {
     'PAYMENT': 'Payment Modal',
   },

frontend/common/types/responses.ts

@@ -102,8 +102,8 @@ export type ExternalResource = {
   id?: number
   url: string
   type: string
-  project: number
-  status: null | string
+  project?: number
+  metadata: null | { status: string }
   feature: number
 }
 
@@ -692,7 +692,7 @@ export type Res = {
   groupSummaries: UserGroupSummary[]
   externalResource: PagedResponse<ExternalResource>
   githubIntegrations: PagedResponse<githubIntegration>
-  githubRepository: PagedResponse<GithubRepository> | { data: { id: string } }
+  githubRepository: PagedResponse<GithubRepository>
   githubIssues: Issue[]
   githubPulls: PullRequest[]
   githubRepos: GithubPaginatedRepos<Repository>

frontend/web/components/DeleteGithubIntegracion.tsx → frontend/web/components/DeleteGithubIntegration.tsx

@@ -2,13 +2,13 @@ import React, { FC } from 'react'
 import Button from './base/forms/Button'
 import { useDeleteGithubIntegrationMutation } from 'common/services/useGithubIntegration'
 
-type DeleteGithubIntegracionType = {
+type DeleteGithubIntegrationType = {
   organisationId: string
   githubId: string
   onConfirm: () => void
 }
 
-const DeleteGithubIntegracion: FC<DeleteGithubIntegracionType> = ({
+const DeleteGithubIntegration: FC<DeleteGithubIntegrationType> = ({
   githubId,
   onConfirm,
   organisationId,
@@ -18,6 +18,7 @@ const DeleteGithubIntegracion: FC<DeleteGithubIntegracionType> = ({
   return (
     <Button
       id='delete-integration'
+      theme='danger'
       data-test='delete-integration'
       onClick={() =>
         openConfirm({
@@ -37,7 +38,7 @@ const DeleteGithubIntegracion: FC<DeleteGithubIntegracionType> = ({
               github_integration_id: githubId,
               organisation_id: organisationId,
             }).then(() => {
-              onConfirm()
+              window.location.reload()
             })
           },
           title: 'Remove your Github Integration',
@@ -51,4 +52,4 @@ const DeleteGithubIntegracion: FC<DeleteGithubIntegracionType> = ({
   )
 }
 
-export default DeleteGithubIntegracion
+export default DeleteGithubIntegration

frontend/web/components/ExternalResourcesTable.tsx

@@ -3,25 +3,42 @@ import PanelSearch from './PanelSearch'
 import Button from './base/forms/Button'
 import Icon from './Icon'
 import {
+  useCreateExternalResourceMutation,
   useGetExternalResourcesQuery,
   useDeleteExternalResourceMutation,
 } from 'common/services/useExternalResource'
 import { ExternalResource } from 'common/types/responses'
+import Constants from 'common/constants'
+import Tooltip from './Tooltip'
+import MyIssuesSelect from './MyIssuesSelect'
+import MyGithubPullRequests from './MyPullRequestsSelect'
 
 export type ExternalResourcesTableType = {
   featureId: string
   projectId: string
+  organisationId: string
+  repoName: string
+  repoOwner: string
 }
 
-const ExternalResourcesTable: FC<ExternalResourcesTableType> = ({
+type ExternalResourceRowType = {
+  featureId: string
+  projectId: string
+  externalResource: ExternalResource
+}
+
+type PermanentRowType = ExternalResourcesTableType
+
+type GitHubStatusType = {
+  value: number
+  label: string
+}
+
+const ExternalResourceRow: FC<ExternalResourceRowType> = ({
+  externalResource,
   featureId,
   projectId,
 }) => {
-  const { data } = useGetExternalResourcesQuery({
-    feature_id: featureId,
-    project_id: projectId,
-  })
-
   const [deleteExternalResource, { isSuccess: isDeleted }] =
     useDeleteExternalResourceMutation()
 
@@ -30,6 +47,177 @@ const ExternalResourcesTable: FC<ExternalResourcesTableType> = ({
       toast('External resources was deleted')
     }
   }, [isDeleted])
+  return (
+    <Row className='list-item' key={externalResource?.id}>
+      <Flex className='table-column mt-1'>
+        <Row className='font-weight-medium'>
+          {externalResource?.type === 'GITHUB_ISSUE'
+            ? Constants.githubType.githubIssue
+            : Constants.githubType.githubPR}
+          <Button
+            theme='text'
+            href={`${externalResource?.url}`}
+            target='_blank'
+            className='fw-normal ml-1 mt-1'
+          >
+            <Tooltip
+              title={
+                <Row>
+                  {`#${externalResource?.url.replace(/\D/g, '')}`}{' '}
+                  <div className='ml-1 mb-1'>
+                    <Icon name='open-external-link' width={14} fill='#6837fc' />
+                  </div>
+                </Row>
+              }
+              place='right'
+            >
+              {`${externalResource?.url}`}
+            </Tooltip>
+          </Button>
+        </Row>
+      </Flex>
+      <div className='table-column text-center' style={{ width: '80px' }}>
+        <div className='font-weight-medium mb-1'>
+          {externalResource?.metadata?.status}
+        </div>
+      </div>
+      <div className='table-column text-center' style={{ width: '80px' }}>
+        <Button
+          onClick={() => {
+            deleteExternalResource({
+              external_resource_id: `${externalResource?.id}`,
+              feature_id: featureId,
+              project_id: projectId,
+            })
+          }}
+          className='btn btn-with-icon'
+        >
+          <Icon name='trash-2' width={20} fill='#656D7B' />
+        </Button>
+      </div>
+    </Row>
+  )
+}
+
+const PermanentRow: FC<PermanentRowType> = ({
+  featureId,
+  organisationId,
+  projectId,
+  repoName,
+  repoOwner,
+}) => {
+  const [externalResourceType, setExternalResourceType] = useState<string>('')
+  const [featureExternalResource, setFeatureExternalResource] =
+    useState<string>('')
+
+  const [createExternalResource] = useCreateExternalResourceMutation()
+  return (
+    <Row className='list-item'>
+      <Flex className='table-column px-3'>
+        <Select
+          size='select-md'
+          placeholder={'Select Type'}
+          onChange={(v: GitHubStatusType) => setExternalResourceType(v.label)}
+          options={[
+            { id: 1, type: Constants.githubType.githubIssue },
+            { id: 2, type: Constants.githubType.githubPR },
+          ].map((e) => {
+            return { label: e.type, value: e.id }
+          })}
+        />
+      </Flex>
+      <Flex className='table-column px-3'>
+        <Flex className='ml-4'>
+          {externalResourceType == Constants.githubType.githubIssue ? (
+            <MyIssuesSelect
+              orgId={organisationId}
+              onChange={(v) => setFeatureExternalResource(v)}
+              repoOwner={repoOwner}
+              repoName={repoName}
+            />
+          ) : externalResourceType == Constants.githubType.githubPR ? (
+            <MyGithubPullRequests
+              orgId={organisationId}
+              onChange={(v) => setFeatureExternalResource(v)}
+              repoOwner={repoOwner}
+              repoName={repoName}
+            />
+          ) : (
+            <></>
+          )}
+        </Flex>
+      </Flex>
+      <div className='table-column text-center' style={{ width: '80px' }}>
+        <Button
+          className='text-right btn-with-icon'
+          theme='primary'
+          onClick={() => {
+            createExternalResource({
+              body: {
+                feature: parseInt(featureId),
+                metadata: { status },
+                type:
+                  externalResourceType === Constants.githubType.githubIssue
+                    ? 'GITHUB_ISSUE'
+                    : 'GITHUB_PR',
+                url: featureExternalResource,
+              },
+              feature_id: featureId,
+              project_id: projectId,
+            })
+          }}
+        >
+          <Icon name='plus' width={30} fill='#656D7B' />
+        </Button>
+      </div>
+    </Row>
+  )
+}
+
+const ExternalResourcesTable: FC<ExternalResourcesTableType> = ({
+  featureId,
+  organisationId,
+  projectId,
+  repoName,
+  repoOwner,
+}) => {
+  const { data } = useGetExternalResourcesQuery({
+    feature_id: featureId,
+    project_id: projectId,
+  })
+
+  const renderRowWithPermanentRow = (v: ExternalResource, index: number) => {
+    if (index === (data?.results.length || 0) - 1) {
+      return (
+        <>
+          <ExternalResourceRow
+            key={v.id}
+            featureId={featureId}
+            projectId={projectId}
+            externalResource={v}
+          />
+          <PermanentRow
+            key='permanent-row'
+            featureId={featureId}
+            projectId={projectId}
+            organisationId={organisationId}
+            repoName={repoName}
+            repoOwner={repoOwner}
+          />
+        </>
+      )
+    } else {
+      // Renderizar los elementos dinámicos normales
+      return (
+        <ExternalResourceRow
+          key={v.id}
+          featureId={featureId}
+          projectId={projectId}
+          externalResource={v}
+        />
+      )
+    }
+  }
 
   return (
     <PanelSearch
@@ -38,52 +226,13 @@ const ExternalResourcesTable: FC<ExternalResourcesTableType> = ({
       items={data?.results}
       header={
         <Row className='table-header'>
-          <Flex className='table-column px-3' style={{ 'minWidth': '280px' }}>
-            URL
-          </Flex>
-          <Flex className='table-column pl-1'>Type</Flex>
-          <div className='table-column text-center' style={{ width: '80px' }}>
+          <Flex className='table-column px-3'>Type</Flex>
+          <div className='table-column text-center' style={{ width: '240px' }}>
             Status
           </div>
-          <div className='table-column text-center' style={{ width: '80px' }}>
-            Remove
-          </div>
         </Row>
       }
-      renderRow={(v: ExternalResource) => (
-        <Row className='list-item' key={v.id}>
-          <Flex className='table-column px-3'>
-            <Button
-              theme='text'
-              href={`${v.url}`}
-              target='_blank'
-              className='fw-normal'
-            >
-              <p className='fs-small'>{v.url}</p>
-            </Button>
-          </Flex>
-          <Flex className='table-column px-3'>
-            <div className='font-weight-medium mb-1'>{v.type}</div>
-          </Flex>
-          <div className='table-column text-center' style={{ width: '80px' }}>
-            <div className='font-weight-medium mb-1'>{v.status}</div>
-          </div>
-          <div className='table-column text-center' style={{ width: '80px' }}>
-            <Button
-              onClick={() => {
-                deleteExternalResource({
-                  external_resource_id: `${v.id}`,
-                  feature_id: featureId,
-                  project_id: projectId,
-                })
-              }}
-              className='btn btn-with-icon'
-            >
-              <Icon name='trash-2' width={20} fill='#656D7B' />
-            </Button>
-          </div>
-        </Row>
-      )}
+      renderRow={renderRowWithPermanentRow}
     />
   )
 }