From fc3e19650db491b0b3fe7bde9943a37607cb8cf1 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Wed, 6 Apr 2022 17:30:27 +0800
Subject: [PATCH] fix: put toggle sidebar button and sidebar over GHE stat bar

fix #220
---
 src/platforms/GitHub/DOMHelper.ts             |  4 ++++
 .../hooks/useEnterpriseStatBarStyleFix.ts     | 20 +++++++++++++++++++
 src/platforms/GitHub/index.ts                 |  2 ++
 3 files changed, 26 insertions(+)
 create mode 100644 src/platforms/GitHub/hooks/useEnterpriseStatBarStyleFix.ts

diff --git a/src/platforms/GitHub/DOMHelper.ts b/src/platforms/GitHub/DOMHelper.ts
index 7ff7b6c..32478b7 100644
--- a/src/platforms/GitHub/DOMHelper.ts
+++ b/src/platforms/GitHub/DOMHelper.ts
@@ -264,3 +264,7 @@ export function getPath() {
 export function isNativePRFileTreeShown() {
   return $('file-tree[data-target="diff-layout.fileTree"]')
 }
+
+export function selectEnterpriseStatHeader() {
+  return $('.stats-ui-enabled .server-stats')
+}
diff --git a/src/platforms/GitHub/hooks/useEnterpriseStatBarStyleFix.ts b/src/platforms/GitHub/hooks/useEnterpriseStatBarStyleFix.ts
new file mode 100644
index 0000000..8c8838c
--- /dev/null
+++ b/src/platforms/GitHub/hooks/useEnterpriseStatBarStyleFix.ts
@@ -0,0 +1,20 @@
+import { useEffect } from 'react'
+import { $ } from 'utils/DOMHelper'
+import * as DOMHelper from '../DOMHelper'
+import { GitHub } from '../index'
+
+// A dirty fix for putting Gitako components over GHE stat bar.
+// In normal cases the styles should be set via react render function return value,
+// but adding the logic for such uncommon case is not worth the maintenance cost.
+export function useEnterpriseStatBarStyleFix() {
+  useEffect(() => {
+    if (GitHub.isEnterprise()) {
+      const enterpriseStatHeaderElement = DOMHelper.selectEnterpriseStatHeader()
+      const zIndex = parseInt(enterpriseStatHeaderElement?.style.zIndex || '0', 10)
+      if (!isNaN(zIndex) && zIndex) {
+        $('.gitako-toggle-show-button-wrapper', e => (e.style.zIndex = `${zIndex + 1}`))
+        $('.gitako-side-bar-body-wrapper', e => (e.style.zIndex = `${zIndex + 1}`))
+      }
+    }
+  }, [])
+}
diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts
index 4401621..e21855c 100644
--- a/src/platforms/GitHub/index.ts
+++ b/src/platforms/GitHub/index.ts
@@ -6,6 +6,7 @@ import { resolveGitModules } from 'utils/gitSubmodule'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'
 import * as DOMHelper from './DOMHelper'
+import { useEnterpriseStatBarStyleFix } from './hooks/useEnterpriseStatBarStyleFix'
 import { useGitHubAttachCopyFileButton } from './hooks/useGitHubAttachCopyFileButton'
 import { useGitHubAttachCopySnippetButton } from './hooks/useGitHubAttachCopySnippetButton'
 import { useGitHubCodeFold } from './hooks/useGitHubCodeFold'
@@ -202,6 +203,7 @@ export const GitHub: Platform = {
     useGitHubAttachCopyFileButton(copyFileButton)
     useGitHubAttachCopySnippetButton(copySnippetButton)
     useGitHubCodeFold(codeFolding)
+    useEnterpriseStatBarStyleFix()
   },
   delegatePJAXProps(options) {
     if (!options?.node || options.node.type === 'blob')