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

@@ -842,8 +842,13 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 				const i = integrations.find(i => i.id === d.id);
 				if (i == null) {
 					integrations.push(d);
-				} else if (d.weight !== undefined) {
-					i.weight = d.weight;
+				} else {
+					if (d.weight !== undefined) {
+						i.weight = d.weight;
+					}
+					if (i.icon !== d.icon) {
+						i.icon = d.icon;
+					}
 				}
 			});
 			integrations.sort((a, b) => {