ui: add optional Custom Domain input in GH integration

Author: thesujai

web-server/src/content/Dashboards/ConfigureGithubModalBody.tsx

@@ -25,10 +25,12 @@ export const ConfigureGithubModalBody: FC<{
   const token = useEasyState('');
   const { orgId } = useAuth();
   const { enqueueSnackbar } = useSnackbar();
+  const customDomain = useEasyState('');
   const dispatch = useDispatch();
   const isLoading = useBoolState();
 
   const showError = useEasyState<string>('');
+  const showDomainError = useEasyState<string>('');
 
   const setError = useCallback(
     (error: string) => {
@@ -42,20 +44,24 @@ export const ConfigureGithubModalBody: FC<{
     token.set(e);
     showError.set('');
   };
+  const handleDomainChange = (e: string) => {
+    customDomain.set(e);
+    showDomainError.set('');
+  };
 
   const handleSubmission = useCallback(async () => {
     if (!token.value) {
       setError('Please enter a valid token');
       return;
     }
     depFn(isLoading.true);
-    checkGitHubValidity(token.value)
+    checkGitHubValidity(token.value, customDomain.valueRef.current)
       .then(async (isValid) => {
         if (!isValid) throw new Error('Invalid token');
       })
       .then(async () => {
         try {
-          const res = await getMissingPATScopes(token.value);
+          const res = await getMissingPATScopes(token.value, customDomain.valueRef.current);
           if (res.length) {
             throw new Error(`Token is missing scopes: ${res.join(', ')}`);
           }
@@ -66,7 +72,9 @@ export const ConfigureGithubModalBody: FC<{
       })
       .then(async () => {
         try {
-          return await linkProvider(token.value, orgId, Integration.GITHUB);
+          return await linkProvider(token.value, orgId, Integration.GITHUB, {
+            custom_domain: customDomain.valueRef.current
+          });
         } catch (e: any) {
           throw new Error(
             `Failed to link Github${e?.message ? `: ${e?.message}` : ''}`,
@@ -102,6 +110,13 @@ export const ConfigureGithubModalBody: FC<{
     setError,
     token.value
   ]);
+  const isDomainInputFocus = useBoolState(false);
+
+  const focusDomainInput = useCallback(() => {
+    if (!customDomain.value)
+      document.getElementById('gitlab-custom-domain')?.focus();
+    else handleSubmission();
+  }, [customDomain.value, handleSubmission]);
 
   return (
     <FlexBox gap2>
@@ -115,6 +130,7 @@ export const ConfigureGithubModalBody: FC<{
                 e.stopPropagation();
                 e.nativeEvent.stopImmediatePropagation();
                 handleSubmission();
+                focusDomainInput();
                 return;
               }
             }}
@@ -150,6 +166,37 @@ export const ConfigureGithubModalBody: FC<{
             </Line>
           </FlexBox>
         </FlexBox>
+        <FlexBox gap2 col>
+            <FlexBox alignBase gap1>
+              Custom domain
+            </FlexBox>
+            <TextField
+              id="github-custom-domain"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  e.nativeEvent.stopImmediatePropagation();
+                  handleSubmission();
+                  return;
+                }
+              }}
+              error={!!showDomainError.value}
+              sx={{ width: '100%' }}
+              value={customDomain.value}
+              onChange={(e) => handleDomainChange(e.currentTarget.value)}
+              label={
+                isDomainInputFocus.value || customDomain.value
+                  ? 'Custom Domain'
+                  : '(Optional)'
+              }
+              onFocus={isDomainInputFocus.true}
+              onBlur={isDomainInputFocus.false}
+            />
+          </FlexBox>
+          <Line error tiny mt={1} minHeight={'18px'}>
+            {showDomainError.value}
+          </Line>
 
         <FlexBox justifyBetween alignCenter mt={'auto'}>
           <FlexBox col sx={{ opacity: 0.8 }}>

web-server/src/utils/auth.ts

@@ -3,6 +3,8 @@ import { isNil, reject } from 'ramda';
 
 import { Integration } from '@/constants/integrations';
 
+const DEFAULT_GH_URL = 'https://api.github.com';
+
 export const unlinkProvider = async (orgId: string, provider: Integration) => {
   return await axios.delete(`/api/resources/orgs/${orgId}/integration`, {
     params: { provider }
@@ -28,10 +30,17 @@ export const linkProvider = async (
 // GitHub functions
 
 export async function checkGitHubValidity(
-  good_stuff: string
+  good_stuff: string,
+  customDomain?: string
 ): Promise<boolean> {
   try {
-    await axios.get('https://api.github.com/user', {
+    // if customDomain is provded, the host will be customDomain/api/v3
+    // else it will be api.github.com(default)
+    const baseUrl = customDomain
+      ? `${customDomain}/api/v3`
+      : DEFAULT_GH_URL;
+
+    await axios.get(`${baseUrl}/user`, {
       headers: {
         Authorization: `token ${good_stuff}`
       }
@@ -43,9 +52,12 @@ export async function checkGitHubValidity(
 }
 
 const PAT_SCOPES = ['read:org', 'read:user', 'repo', 'workflow'];
-export const getMissingPATScopes = async (pat: string) => {
+export const getMissingPATScopes = async (pat: string, customDomain?: string) => {
+  const baseUrl = customDomain
+    ? `${customDomain}/api/v3`
+    : DEFAULT_GH_URL;
   try {
-    const response = await axios.get('https://api.github.com', {
+    const response = await axios.get(baseUrl, {
       headers: {
         Authorization: `token ${pat}`
       }