Add new service-specific ref icons (#2936)

* Added service-specific ref icons

* Added "hostingServiceType" property to the GK Graph remote type to be able to get icons

* Added better icons for Gitlab and Bitbucket services

* Added missing icons

* Bump GK Graph dependency to v10.1.27

* Fixed build

* Refactor: isolate the component imports to one file

* Formatting

---------

Co-authored-by: Ramin Tadayon <ramin.tadayon@gitkraken.com>

package.json

@@ -14815,7 +14815,7 @@
 		"vscode:prepublish": "yarn run bundle"
 	},
 	"dependencies": {
-		"@gitkraken/gitkraken-components": "10.1.25",
+		"@gitkraken/gitkraken-components": "10.1.27",
 		"@gitkraken/shared-web-components": "^0.1.1-rc.11",
 		"@microsoft/fast-element": "1.12.0",
 		"@microsoft/fast-react-wrapper": "0.3.19",

src/env/node/git/localGitProvider.ts

@@ -69,6 +69,7 @@ import type { GitFile, GitFileStatus } from '../../../git/models/file';
 import { GitFileChange } from '../../../git/models/file';
 import type {
 	GitGraph,
+	GitGraphHostingServiceType,
 	GitGraphRow,
 	GitGraphRowContexts,
 	GitGraphRowHead,
@@ -2201,6 +2202,7 @@ export class LocalGitProvider implements GitProvider, Disposable {
 									avatarUrl: avatarUrl,
 									context: serializeWebviewItemContext<GraphItemRefContext>(context),
 									current: tip === headRefUpstreamName,
+									hostingServiceType: remote.provider?.id as GitGraphHostingServiceType,
 								};
 								refRemoteHeads.push(refRemoteHead);
 

src/git/models/graph.ts

@@ -1,7 +1,17 @@
-import type { GraphRow, Head, Remote, RowContexts, RowStats, Tag } from '@gitkraken/gitkraken-components';
+import type {
+	GraphRow,
+	Head,
+	HostingServiceType,
+	Remote,
+	RowContexts,
+	RowStats,
+	Tag,
+} from '@gitkraken/gitkraken-components';
 import type { GitBranch } from './branch';
 import type { GitRemote } from './remote';
 
+export type GitGraphHostingServiceType = HostingServiceType;
+
 export type GitGraphRowHead = Head;
 export type GitGraphRowRemoteHead = Remote;
 export type GitGraphRowTag = Tag;

src/plus/github/githubGitProvider.ts

@@ -48,6 +48,7 @@ import type { GitFile } from '../../git/models/file';
 import { GitFileChange, GitFileIndexStatus } from '../../git/models/file';
 import type {
 	GitGraph,
+	GitGraphHostingServiceType,
 	GitGraphRow,
 	GitGraphRowContexts,
 	GitGraphRowHead,
@@ -1409,6 +1410,7 @@ export class GitHubGitProvider implements GitProvider, Disposable {
 							avatarUrl: avatarUrl,
 							context: serializeWebviewItemContext<GraphItemRefContext>(context),
 							current: true,
+							hostingServiceType: remote.provider?.id as GitGraphHostingServiceType,
 						},
 					];
 
@@ -1460,6 +1462,7 @@ export class GitHubGitProvider implements GitProvider, Disposable {
 							url: remote.url,
 							avatarUrl: avatarUrl,
 							context: serializeWebviewItemContext<GraphItemRefContext>(context),
+							hostingServiceType: remote.provider?.id as GitGraphHostingServiceType,
 						});
 					}
 				}

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -111,6 +111,13 @@ const createIconElements = (): Record => {
 	const iconList = [
 		'head',
 		'remote',
+		'remote-github',
+		'remote-githubEnterprise',
+		'remote-gitlab',
+		'remote-gitlabSelfHosted',
+		'remote-bitbucket',
+		'remote-bitbucketServer',
+		'remote-azureDevops',
 		'tag',
 		'stash',
 		'check',

src/webviews/apps/plus/graph/graph.scss

@@ -622,6 +622,37 @@ button:not([disabled]),
 			content: '\ebaa';
 		}
 	}
+	&--remote-github,
+	&--remote-githubEnterprise {
+		&::before {
+			// codicon-github-inverted
+			font-family: codicon;
+			content: '\eba1';
+		}
+	}
+	&--remote-gitlab,
+	&--remote-gitlabSelfHosted {
+		&::before {
+			// glicon-provider-gitlab
+			font-family: 'glicons';
+			content: '\f123';
+		}
+	}
+	&--remote-bitbucket,
+	&--remote-bitbucketServer {
+		&::before {
+			// glicon-provider-bitbucket
+			font-family: 'glicons';
+			content: '\f11f';
+		}
+	}
+	&--remote-azureDevops {
+		&::before {
+			// glicon-provider-azdo
+			font-family: 'glicons';
+			content: '\f11e';
+		}
+	}
 	&--tag {
 		&::before {
 			// codicon-tag

yarn.lock

@@ -223,10 +223,10 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.4.tgz#19654d1026cc410975d46445180e70a5089b3e7d"
   integrity sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==
 
-"@gitkraken/gitkraken-components@10.1.25":
-  version "10.1.25"
-  resolved "https://registry.yarnpkg.com/@gitkraken/gitkraken-components/-/gitkraken-components-10.1.25.tgz#0e710ae118c4c70982b730fb1a00f3c16328678b"
-  integrity sha512-UeZVdnVEyL/yEtD9fhCTHUXFogJeRVjglbswp1Gf5ekuzDtuRZqAmyU1MOhMKdIa9X6XOufTJg7z/FyNyuNELw==
+"@gitkraken/gitkraken-components@10.1.27":
+  version "10.1.27"
+  resolved "https://registry.npmjs.org/@gitkraken/gitkraken-components/-/gitkraken-components-10.1.27.tgz#18a9430678d7cef6a6476f8fcab956ea26dca76e"
+  integrity sha512-NiQ6M7J2sfrGfB2RRaIzMuM9l67GXY5BbgNVnQJajHa3zmuPN3ImLZ92Qxn0nn/0ZsrvVDaY6ZShnPRBNnbmeA==
   dependencies:
     "@axosoft/react-virtualized" "9.22.3-gitkraken.3"
     classnames "2.3.2"