feat: Github Enterprise support

README.md

@@ -60,6 +60,8 @@ You can start an online development environment with [Gitpod](https://www.gitpod
 ```bash
 git clone [email protected]:conwnet/github1s.git
 cd github1s
+
+# If you are planning to use Github Enterprise, then modify /platform_config.js
 yarn
 yarn watch
 # The cli will automatically open http://localhost:5000 once the build is completed.
@@ -123,6 +125,11 @@ yarn
 yarn build
 ```
 
+## Abount Github Enterprise
+
+Currently, Github Enterprise is on the development.
+It is difficult to guarantee performance and safety, but we plan to improve it gradually.
+
 ## Feedback
 
 - If something is not working, [create an issue](https://github.com/conwnet/github1s/issues/new)

docs/guide.md

@@ -31,6 +31,7 @@ But this does not mean the token is absolutely safe, **don't forget to clean it
 As you see, running GitHub1s locally is not difficult. After cloning the repository, just run these commands:
 
 ```shell
+$ # if you are planning to use Github Enterprise, modify /platform_config.js
 $ yarn
 $ yarn watch # or yarn build, it may take minutes, wait please
 ```

extensions/github1s/assets/pages/githubenterprise1s-authentication.js

@@ -0,0 +1,231 @@
+import { render } from './preact.module.js';
+import { useState, useCallback, useEffect } from './preact-hooks.module.js';
+import { html, VscodeButton, VscodeInput, VscodeLoading, VscodeLink, postMessage } from './components.js';
+import { ConfigsForEnterprise } from '../../../../platform_config.js';
+
+const AuthenticationFeatures = () => {
+	return html`
+		<ul class="authentication-features">
+			<li class="feature-item">
+				<a
+					class="link"
+					href="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-user-account/managing-access-to-your-personal-repositories"
+					target="_blank"
+					>Access GitHub Enterprise personal repository</a
+				>
+			</li>
+			<li class="feature-item">
+				<a
+					class="link"
+					href="https://docs.github.com/en/rest/overview/resources-in-the-rest-api#rate-limiting"
+					target="_blank"
+					>Higher rate rimit for GitHub Enterprise official API</a
+				>
+			</li>
+			<li class="feature-item">
+				<a
+					class="link"
+					href="https://docs.github.com/en/graphql/guides/forming-calls-with-graphql#authenticating-with-graphql"
+					target="_blank"
+					>Support for GitHub Enterprise GraphQL API</a
+				>
+			</li>
+		</ul>
+	`;
+};
+
+const AuthenticationButton = (props) => {
+	const [authenticating, setAuthenticating] = useState(false);
+
+	const handleButtonClick = useCallback(() => {
+		setAuthenticating(true);
+		postMessage('connect-to-github').then(() => setAuthenticating(false));
+	}, []);
+
+	return html`
+		<button class="authentication-button" disabled="${authenticating}" onClick=${handleButtonClick} ...${props}>
+			<svg class="github-logo" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true">
+				<path
+					fill-rule="evenodd"
+					d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+				></path>
+			</svg>
+			<span>${props.children}</span>
+		</button>
+	`;
+};
+
+const ManualInputToken = () => {
+	const createTokenLink = `${ConfigsForEnterprise.github_enterprise_baseUrl}/settings/tokens/new?scopes=repo&description=GitHubEnterprise1s`;
+	const [inputToken, setInputToken] = useState('');
+	const [loading, setLoading] = useState(false);
+	const handleInputTokenChange = useCallback((event) => {
+		setInputToken(event.target.value);
+	}, []);
+
+	const handleSubmit = useCallback(() => {
+		if (inputToken) {
+			setLoading(true);
+			postMessage('validate-token', inputToken).then((tokenStatus) => {
+				if (!tokenStatus) {
+					const messageArgs = { level: 'info', args: ['This AccessToken is invalid'] };
+					postMessage('call-vscode-message-api', messageArgs);
+					setLoading(false);
+					return;
+				}
+				postMessage('set-token', inputToken).then(() => setLoading(false));
+			});
+		}
+	}, [inputToken]);
+
+	return html`
+		<div class="authentication-token">
+			<div class="token-input-line">
+				<${VscodeInput}
+					autocomplete="off"
+					value=${inputToken}
+					disabled="${loading}"
+					onInput=${handleInputTokenChange}
+				/>
+				<${VscodeButton} loading=${loading} onClick=${handleSubmit}>Submit<//>
+			</div>
+			<${VscodeLink} to="${createTokenLink}" external>Create New AccessToken<//>
+		</div>
+	`;
+};
+
+const SplitLine = () => {
+	return html`<div class="split-line"></div>`;
+};
+
+const AuthenticationFooter = () => {
+	return html`
+		<div class="authentication-footer">
+			<div>The access token will only store in your browser.</div>
+			<div>Don't forget to clean it while you are using a device that doesn't belong to you.</div>
+		</div>
+	`;
+};
+
+const AuthenticationForm = (props) => {
+	return html`
+		<div class="authentication-form">
+			<div class="form-title">${props.title || 'Authenticating to GitHub Enterprise'}</div>
+			<${AuthenticationFeatures} />
+			<div class="form-content">
+				<${AuthenticationButton}>Connect to GitHub Enterprise<//>
+				<${SplitLine} />
+				<${ManualInputToken} />
+			</div>
+		</div>
+	`;
+};
+
+const StatusNumberText = ({ count }) => {
+	if (count <= 0) {
+		return html`<span class="error-text">${count}</span>`;
+	}
+	if (count <= 99) {
+		return html`<span class="warning-text">${count}</span>`;
+	}
+
+	return html`<span class="success-text">${count}</span>`;
+};
+
+const AuthenticationDetail = ({ accessToken }) => {
+	const ratteLimitDocumentationLink = 'https://docs.github.com/rest/overview/resources-in-the-rest-api#rate-limiting';
+	const [tokenStatus, setTokenStatus] = useState(null);
+
+	const handleRefreshTokenStatus = useCallback(() => {
+		postMessage('validate-token', accessToken).then((tokenStatus) => {
+			setTokenStatus(tokenStatus || { invalid: true });
+		});
+	}, [accessToken]);
+
+	const handleClearToken = useCallback(() => {
+		postMessage('call-vscode-message-api', {
+			level: 'warning',
+			args: ['Would you want to clear the saved GitHub Enterprise AccessToken?', { modal: true }, 'Confirm'],
+		}).then((choose) => choose === 'Confirm' && postMessage('set-token', ''));
+	}, []);
+
+	useEffect(() => {
+		handleRefreshTokenStatus();
+	}, [handleRefreshTokenStatus]);
+
+	if (!tokenStatus) {
+		return html`<${VscodeLoading} />`;
+	}
+
+	return html`
+		<div class="authentication-detail">
+			<div class="detail-title">Access Token Info</div>
+			<div class="token-status">
+				<div class="status-title">
+					<span>Rate Limit Info: </span>
+					<span class="refresh-button" onClick=${handleRefreshTokenStatus}>↻</span>
+				</div>
+				<ul class="rate-limit-info">
+					${tokenStatus.invalid ? html`<li>Token Status: <span class="error-text">invalid</span></li>` : ''}
+					<li>------------------------------</li>
+					<li>X-RateLimit-Limit: <${StatusNumberText} count=${tokenStatus.ratelimitLimit} /></li>
+					<li>X-RateLimit-Remaining: <${StatusNumberText} count=${tokenStatus.ratelimitRemaining} /></li>
+					<li>X-RateLimit-Used: ${tokenStatus.ratelimitUsed}</li>
+					<li>X-RateLimit-Reset: ${tokenStatus.ratelimitReset}</li>
+					<li>------------------------------</li>
+					<li class="rate-limit-description">
+						<span>Current rate limit window will reset after </span>
+						<span>${Math.max(tokenStatus.ratelimitReset - Math.ceil(Date.now() / 1000), 0)}s</span>
+					</li>
+					<li>
+						<a href=${ratteLimitDocumentationLink} target="_blank">GitHub Enterprise Rate limiting Documentation</a>
+					</li>
+				</ul>
+			</div>
+			<div class="token-operations">
+				<${VscodeButton} size="middle" onClick=${handleClearToken}>Clear Access Token<//>
+			</div>
+		</div>
+	`;
+};
+
+const App = () => {
+	const [loading, setLoading] = useState(true);
+	const [accessToken, setAccessToken] = useState('');
+	const [notice, setNotice] = useState('');
+
+	useEffect(() => {
+		postMessage('get-token').then((token) => {
+			setAccessToken(token);
+			setLoading(false);
+		});
+		postMessage('get-notice').then((notice) => setNotice(notice));
+	}, []);
+
+	useEffect(() => {
+		const handler = ({ data }) => {
+			if (data.type === 'token-changed') {
+				setAccessToken(data.token);
+				postMessage('get-notice').then((notice) => setNotice(notice));
+			}
+		};
+		window.addEventListener('message', handler);
+		return () => window.removeEventListener('message', handler);
+	}, [setAccessToken]);
+
+	if (loading) {
+		return html`<${VscodeLoading} />`;
+	}
+
+	return html`
+		<div class="authentication-page">
+			${notice ? html`<div class="page-notice">${notice}</div>` : null}
+			<${accessToken ? AuthenticationDetail : AuthenticationForm} accessToken=${accessToken} />
+			<${AuthenticationFooter} />
+		</div>
+	`;
+};
+
+const loadingElement = document.getElementById('page-loading');
+loadingElement.parentNode.removeChild(loadingElement);
+render(html`<${App} />`, document.getElementById('app'));