feat: Implement be search and lazy loading for GitHub resources

[novakzaballa]

Thanks for submitting a PR! Please check the boxes below:

• I have run pre-commit to check linting
• I have added information to docs/ if required so people know about the feature!
• I have filled in the "Changes" section below?
• I have filled in the "How did you test this code" section below?
• I have used a Conventional Commit title for this Pull Request

Changes

• Update types
• use InfiniteScroll in the GitHub resources Select component for the search and pagination

How did you test this code?

The Flagsmith GitHub App is configured to point Vercel's staging deployment for testing as the post-installation landing page and the corresponding (staging) API server as the GitHub events webhook endpoint.

NOTE: The current integration works properly with environments using the versioning v1. The automated comments are not yet properly working with V2

Please use Vercel's staging deployment for testing (Visit Preview) and use a project with only versioning_v1 environments.

Detailed testing checklist/instructions on the comment at the bottom of this PR: #3987 (comment)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 24, 2024 2:33pm
flagsmith-frontend-preview	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 24, 2024 2:33pm
flagsmith-frontend-staging	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 24, 2024 2:33pm

[github-actions]

Uffizzi Preview deployment-52047 was deleted.

[flagsmith]

Flagsmith Feature 14 has been updated:

Environment	Enabled	Value	Last Updated (UTC)
Development	❌ Disabled	test value	2024-05-22 16:41:17

[flagsmith]

Flagsmith Feature 14 has been updated:

Segment power_users values:

Environment	Enabled	Value	Last Updated (UTC)
Development	✅ Enabled	test value segment	2024-05-22 16:42:06

[flagsmith]

The Segment Override power_users for Feature Flag 14 was deleted

[flagsmith]

The feature flag 14 was unlinked from the issue/PR

[novakzaballa]

How did you test this code?

The Flagsmith GitHub App is configured to point Vercel's staging deployment for testing as the post-installation landing page and the corresponding (staging) API server as the GitHub events webhook endpoint.

NOTE: The current integration works properly with environments using the versioning v1. The automated comments are not yet properly working with v2 so please use a project with only v1-versioning environments

Test checklist (have fun)

• Navigate to Vercel's staging deployment for testing: Visit Preview
• Install GitHub Flagsmith App from Flagsmith
  1. Go to the Project Integrations tab
  2. On the GitHub Integration row Click the Add Integration button
  3. A floating dialog is displayed containing the GitHub App Installation page
  4. Select your personal/organization account where the GitHub Flagsmith App will be installed.
• Authorize GitHub Flagsmith App to integrate with one or more repositories on GitHub
  • In the GitHub Flagsmith App installation page choose one or more (or all) repositories, I recommend choosing a repo with a large number of Issues/PRs for testing purposes like Flagmith/flagsmith
  • Click on the Install button
  • The floating dialog is closed
  • You're led to the GitHub Integration modal on the Integrations page of the Flagsmith dashboard.
  • The button in the GitHub Integration bar now reads Manage Integration
• Link/Unlink Github Repositories to a Flagsmith Project from the Integrations page of the Flagsmith dashboard
  • In the Manage Integration modal select the repository you want to link to the current project
  • The repository is automatically added and saved to the list when you select it from the list
• Get back to the GitHub App Installation page from the Integrations page and add/remove authorized GitHub repositories.
  • From the Integrations page of the Flagsmith dashboard click the Manage Integration button on the GitHub Integration bar
  • At the bottom of the modal displayed click the Manage available GitHub Repositories button
  • Add and/or remove authorized repositories to the GitHub Flagsmith App and click the save button
• The GitHub Integration and the authorized repositories are available in other projects of the organization where it has been installed
  • Check that GitHub Integration has been installed at the Organization level by navigating to another project's Integrations page and verifying that the corresponding button reads Manage Integration
• Find a new Links tab in the Edit Feature dialog once Flagmsith/GitHub Integration is setup
• Link GitHub Issues and PRs to Flagsmith features from the Edit Feature dialog
  • Open the Links Tab of the Edit Feature Dialog
  • Choose a GitHub Repository if you have more than one linked to the project. If you have only one repository linked you can skip this step.
  • Choose the type of GitHub resource you want to link (Issue | Pull Request)
  • The Issues/PRs list loads up to 100 items when displayed and will lazily load more items on scrolling close to the bottom. Verify using the Dev Tools Network Tab
  • You can type a text in the select input to trigger a search in the server. If type fast enough the word's to search, you'll see that only one API call has been done int the Network tab of the DevTools. The delay is set to after the last keystroke 300ms.
  • Select the Issue/Pull Request you want to link
  • The Save button is enabled and you can add the selected Issue/PR to the list of linked resources
  • Click the Save button to add the resource to the linked resources table immediately.
  • Verify that the resource is added to the table of Linked Resources
  • Delete one or more linked resources
  • Verify that the resources are back to the list of available Issues/PRs and gone from the table of linked resources
• Navigate to the Issue/PR in GitHub from the Flagsmith dashboard
  • Follow the link in the Links Tab of the Edit Feature Dialog
• Get an Automated Comment added to the GitHub Issue/PR on certain Flag events:
  • The GitHub Issue/PR is linked to a Flagsmith feature flag
  • The linked Flagsmith feature flag enabled state and/or its value are updated
  • A Segment Override is created, updated, or deleted
  • The GitHub Issue/PR is unlinked from a Flagsmith feature flag
  • A Feature flag is deleted while it has a GitHub Issue/PR linked.
  • Follow the corresponding link in the Linked Resources table
  • When a new resource is linked, verify that a comment has been added to the linked PR/Issue with the current default values of all the environments and segments.
  • Verify that all the above Feature Flag events generate a new comment in the linked GitHub resource
• Unistall GitHub App from Flagsmith
  • Go to the Project Integrations tab
  • Click the Manage Integration button in the GitHub Integration row.
  • Check that GitHub Integration the integration button text reads now Add Integration
  • GitHub Flagsmith App is installed from Github account when GitHub Integration is removed on Flagsmith Org.
• Install GitHub Flagsmith App from GitHub MarketPlace
  • Navigate to the Flagsmith App in the GitHub MarketPlace https://github.com/apps/flagsmith
  • Click the Install App button at the top in the right panel
  • Follow the sateps in the "Install GitHub Flagsmith App from Flagsmith" title
  • Note: The GitHub Flagsmith App is not yet published on the GitHub MarketPlace
• Unistall GitHub Flagsmith App from GitHub
  1. Navigate to your personal/organization account's home page in https://github.com/
  2. Go to the settings page of your personal/organization account
  3. Click the left menu option Integration/GitHub Apps
  4. In the Intalled GitHub Apps tab click the Configure button on the Flagsmith bar
  5. Click the Uninstall button in the Danger Zone at the bottom of the Flagsmith Integration configuration page.
  6. Confirm uninstallation of Flagsmith Integration
  • GitHub Integration is automatically removed on Flagsmith Unistall when GitHub Flagsmith App is removed from Github.
  • In the Flagsmith dashboard go to the Project Integrations tab
  • Check that GitHub Integration has been removed by verifying that the integration button text reads now Add Integration

Thanks for participating! Here you have a bonus track test with a quiz and a beer on reward if you answer the quiz right in a comment (only if you didn't find any issues so far ;) and have approved the PR ;) )

Bonus Track Test
[ ] On the Links Tab of the Edit Feature dialog, try to use the GitHub search query keywords: author:<githubuser>, assignee:<githubuser>, and in:comments
like in:
permission roles assignee:novakzaballa permission assignee:novakzaballa

Quiz
Is it ...
a) bug left behind
b) a hidden feature only for the dev's fun
c) a backdoor/vulnerability?
d) Another thing, specify .....

[matthewelwell]

I've been through both the code, and the test plan and everything seems good to me. Really nice work here @novakzaballa, the UX for the integration is super smooth. I've added a few findings below that I think we should perhaps look at separately but nothing that should block us merging this PR. Perhaps @novakzaballa you can create the relevant GH issues to tackle them separately?

Minor (can be implemented in a separate PR)

1. We should maybe have a manual 'Refresh Repositories' button next to the dropdown when linking a repository. When you add another repository to the Github side, you have to hard refresh the page before it is picked up in Flagsmith.
2. The content / styling of the comments could be more consistent. Particularly between the linked and unlinked comments. See screenshot 1 below.

General comments questions

1. It's odd to me that the Flagsmith organisation shows 'Configure' when I open the integration dialogue, but I can still add it to my project as well. This is probably because some other project has an integration with it. I'm not sure there's anything we'll be able to do, but maybe we could add some content to the documentation about it. A note on this is that when you click 'delete integration' from one of the projects, I think it removes it from all projects. Maybe we should at least have a warning on the 'Delete integration' that this is the case?
2. It's a bit jarring that the 'links' tab is in the edit feature modal, which is only view in the context of an environment. This is an inherent problem in Flagsmith (e.g. the 'settings' tab is also project-wise) so not a major issue here but certainly feels jarring.

Screenshots

1