Filters out GitHub's icon in the bar

(#3901, #3922)

Author: sergeibbb

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;
+	};
+}

src/webviews/home/homeWebview.ts

@@ -879,9 +879,15 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 			}));
 
 			// union (uniquely by id) with supportedCloudIntegrationDescriptors
-			integrations.push(
-				...this._defaultSupportedCloudIntegrations.filter(d => !integrations.some(i => i.id === d.id)),
-			);
+			this._defaultSupportedCloudIntegrations.forEach(d => {
+				const i = integrations.find(i => i.id === d.id);
+				if (i == null) {
+					integrations.push(d);
+				} else if (i.icon !== d.icon) {
+					i.icon = d.icon;
+				}
+			});
+
 			integrations.sort(
 				(a, b) =>
 					supportedOrderedCloudIntegrationIds.indexOf(a.id) -