Adds GitHub Enterprize menu item and filter out its icon in the bar

(#3901)

Author: sergeibbb

Diff for: src/constants.integrations.ts

@@ -47,6 +47,12 @@ export const supportedCloudIntegrationDescriptors: IntegrationDescriptor[] = [
 		icon: 'gl-provider-github',
 		supports: ['prs', 'issues'],
 	},
+	{
+		id: SelfHostedIntegrationId.GitHubEnterprise,
+		name: 'GitHub Enterprise',
+		icon: 'gl-provider-github',
+		supports: ['prs', 'issues'],
+	},
 	{
 		id: HostingIntegrationId.GitLab,
 		name: 'GitLab',

Diff for: src/webviews/apps/plus/shared/components/integrations-chip.ts

@@ -155,11 +155,12 @@ export class GLIntegrationsChip extends LitElement {
 
 	override render() {
 		const anyConnected = this.hasConnectedIntegrations;
+		const statusFilter = createIconBasedStatusFilter(this.integrations);
 		return html`<gl-popover placement="bottom" trigger="hover click focus" hoist>
 			<span slot="anchor" class="chip" tabindex="0"
-				>${!anyConnected ? html`<span class="chip__label">Connect</span>` : ''}${this.integrations.map(i =>
-					this.renderIntegrationStatus(i, anyConnected),
-				)}</span
+				>${!anyConnected ? html`<span class="chip__label">Connect</span>` : ''}${this.integrations
+					.filter(statusFilter)
+					.map(i => this.renderIntegrationStatus(i, anyConnected))}</span
 			>
 			<div slot="content" class="content">
 				<div class="header">
@@ -267,3 +268,30 @@ function getIntegrationDetails(integration: IntegrationState): string {
 	const last = features.pop();
 	return `Supports ${features.join(', ')} and ${last}`;
 }
+
+function createIconBasedStatusFilter(integrations: IntegrationState[]) {
+	const nothing = -1;
+	const icons = integrations.reduce<{
+		[key: string]: undefined | { connectedIndex: number; firstIndex: number };
+	}>((icons, i, index) => {
+		const state = icons[i.icon];
+		if (!state) {
+			icons[i.icon] = { connectedIndex: i.connected ? index : nothing, firstIndex: index };
+		} else if (i.connected && state.connectedIndex === nothing) {
+			state.connectedIndex = index;
+		}
+		return icons;
+	}, {});
+
+	// This filter returns true or false to allow or decline the integration.
+	// If nothing is connected with the same icon then allows the first one.
+	// If any connected then allows the first connected.
+	return function filter(i: IntegrationState, index: number) {
+		const state = icons[i.icon];
+		if (state === undefined) return true;
+		if (state.connectedIndex !== nothing) {
+			return state.connectedIndex === index;
+		}
+		return state.firstIndex === index;
+	};
+}