Merge pull request #215 from Alokit-Innovations/akg/setup_ui_fixes

Setup UI fixes

components/setup/ProviderSelector.tsx

@@ -4,14 +4,10 @@ import Select from '../Select';
 interface ProviderSelectorProps {
     selectedProvider: string;
     setSelectedProvider: (provider: string) => void;
+    providerOptions: { value: string, label: string, disabled?: boolean }[];
 }
 
-const ProviderSelector: React.FC<ProviderSelectorProps> = ({ selectedProvider, setSelectedProvider }) => {
-    const providerOptions = [
-        { value: 'github', label: 'Github', disabled: false },
-        { value: 'bitbucket', label: 'Bitbucket', disabled: false },
-    ];
-
+const ProviderSelector: React.FC<ProviderSelectorProps> = ({ providerOptions, selectedProvider, setSelectedProvider }) => {
     return (
         <Select
             optionsType="Provider"

pages/docs/index.tsx

@@ -13,6 +13,7 @@ import ProviderSelector from '../../components/setup/ProviderSelector';
 import HostingSelector from '../../components/setup/HostingSelector';
 import InstallationSelector from '../../components/setup/InstallationSelector';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../components/Accordion";
+import ProviderLogo from '../../components/ProviderLogo';
 
 const verifySetup = [
 	"In your organization's repository list, you will see the Vibinex logo in front of the repositories that are correctly set up with Vibinex.",
@@ -48,7 +49,10 @@ const Docs = ({ bitbucket_auth_url, image_name }: { bitbucket_auth_url: string,
 		};
 	}, [rudderEventMethods, session]);
 
-
+	const providerOptions = [
+		{ value: 'github', label: 'Github', disabled: !session?.user?.auth_info?.github },
+		{ value: 'bitbucket', label: 'Bitbucket', disabled: !session?.user?.auth_info?.bitbucket },
+	];
 	const [selectedProvider, setSelectedProvider] = useState<string>('');
 	const [selectedInstallation, setSelectedInstallation] = useState<string>('');
 	const [selectedHosting, setSelectedHosting] = useState<string>('');
@@ -62,55 +66,33 @@ const Docs = ({ bitbucket_auth_url, image_name }: { bitbucket_auth_url: string,
 				<AccordionItem value="instruction-1">
 					<AccordionTrigger>Login using the target provider</AccordionTrigger>
 					<AccordionContent>
-						<div className='flex justify-between'>
-							{session?.user?.auth_info?.github ? (
-								// If GitHub info is present in the session
-								<>
-								<Button
-									variant="contained"
-									disabled={true}
-								>
-									Login with GitHub
-								</Button>
-								</>
-							) : (
-								// If GitHub info is not present in the session
-								<Button
+						<div className='flex gap-2'>
+							<Button
 								variant="contained"
+								disabled={!!session?.user?.auth_info?.github} // used double NOT to convert truthy value to 'true'
 								href="/api/auth/signin"  // Redirect to sign-in
-								>
+								className='px-4 py-2'
+							>
+								<ProviderLogo provider="github" theme="light" className='inline mr-2' />
 								Login with GitHub
-								</Button>
-							)}
-							</div>
-							<div className='flex justify-between'>
-							{session?.user?.auth_info?.bitbucket ? (
-								// If Bitbucket info is present in the session
-								<>
-								<Button
-									variant="contained"
-									disabled={true}
-								>
-									Login with Bitbucket
-								</Button>
-								</>
-							) : (
-								// If Bitbucket info is not present in the session
-								<Button
+							</Button>
+							<Button
 								variant="contained"
+								disabled={!!session?.user?.auth_info?.bitbucket} // used double NOT to convert truthy value to 'true'
 								href="/api/auth/signin"  // Redirect to sign-in
-								>
+								className='px-4 py-2'
+							>
+								<ProviderLogo provider="bitbucket" theme="light" className='inline mr-2' />
 								Login with Bitbucket
-								</Button>
-							)}
-							</div>
+							</Button>
+						</div>
 					</AccordionContent>
 				</AccordionItem>
 				<AccordionItem value="instruction-2">
 					<AccordionTrigger>Configure your DPU</AccordionTrigger>
 					<AccordionContent className='flex flex-col gap-2 pl-4'>
 						<label className='flex justify-between font-semibold text-sm'>Provider:
-							<ProviderSelector selectedProvider={selectedProvider} setSelectedProvider={setSelectedProvider}/>
+							<ProviderSelector providerOptions={providerOptions} selectedProvider={selectedProvider} setSelectedProvider={setSelectedProvider} />
 						</label>
 						<label className='flex justify-between font-semibold text-sm'>Installation Type:
 							<InstallationSelector selectedInstallation={selectedInstallation} setSelectedInstallation={setSelectedInstallation}/>