Improve token login experience (#127)

* Add link with scope built-in

* repo is now a link to get the right token

* Clean up weird yan artifacts

* Add Details component, clean up

* Nicer UI

src/components/settings/Settings.tsx

@@ -1,10 +1,70 @@
-import { Box, ThemeProvider } from '@primer/react'
-import { useEffect, useState } from 'react'
+import {
+    Box,
+    Details,
+    FormControl,
+    Link,
+    Text,
+    ThemeProvider,
+    useDetails,
+} from '@primer/react'
+import { PropsWithChildren, useEffect, useState } from 'react'
 import { KittycadUser, MessageIds, User } from '../../chrome/types'
 import { Loading } from '../Loading'
 import { TokenForm } from './TokenForm'
 import { UserCard } from './UserCard'
 
+function BaseHelper({ children }: PropsWithChildren<{}>) {
+    const { getDetailsProps, open } = useDetails({ closeOnOutsideClick: true })
+    return (
+        <Details {...getDetailsProps()}>
+            <Box as="summary" sx={{ cursor: 'pointer' }}>
+                {!open && <FormControl.Caption>Need help?</FormControl.Caption>}
+            </Box>
+            <Text color="fg.muted" as="ol" fontSize={12} px={3} py={0}>
+                {children}
+            </Text>
+        </Details>
+    )
+}
+
+function GithubHelper() {
+    return (
+        <BaseHelper>
+            <li>
+                Open{' '}
+                <Link
+                    href="https://github.com/settings/tokens/new?scopes=repo&description=KittyCAD"
+                    target="_blank"
+                >
+                    this link
+                </Link>
+            </li>
+            <li>Click on 'Generate token'</li>
+            <li>Copy the provided token</li>
+            <li>Paste it in the input above</li>
+        </BaseHelper>
+    )
+}
+
+function KittycadHelper() {
+    return (
+        <BaseHelper>
+            <li>
+                Open{' '}
+                <Link
+                    href="https://kittycad.io/account/api-tokens"
+                    target="_blank"
+                >
+                    this link
+                </Link>
+            </li>
+            <li>Click on 'Generate an API token'</li>
+            <li>Copy the provided token</li>
+            <li>Paste it in the input above</li>
+        </BaseHelper>
+    )
+}
+
 export function Settings() {
     const [githubUser, setGithubUser] = useState<User>()
     const [kittycadUser, setKittycadUser] = useState<KittycadUser>()
@@ -76,7 +136,9 @@ export function Settings() {
                                         )
                                         await fetchGithubUser()
                                     }}
-                                />
+                                >
+                                    <GithubHelper />
+                                </TokenForm>
                             )}
                         </Box>
                         <Box mt={4}>
@@ -105,7 +167,9 @@ export function Settings() {
                                         )
                                         await fetchKittycadUser()
                                     }}
-                                />
+                                >
+                                    <KittycadHelper />
+                                </TokenForm>
                             )}
                         </Box>
                     </Box>

src/components/settings/TokenForm.tsx

@@ -1,12 +1,12 @@
-import { Box, BranchName, Button, FormControl, TextInput } from '@primer/react'
-import { useState } from 'react'
+import { Box, Button, FormControl, TextInput } from '@primer/react'
+import { useState, PropsWithChildren } from 'react'
 
 export type TokenFormProps = {
     service: string
     onToken: (token: string) => void
 }
 
-export function TokenForm({ service, onToken }: TokenFormProps) {
+export function TokenForm({ service, onToken, children }: PropsWithChildren<TokenFormProps>) {
     const [token, setToken] = useState('')
 
     return (
@@ -18,11 +18,7 @@ export function TokenForm({ service, onToken }: TokenFormProps) {
                     value={token}
                     onChange={e => setToken(e.target.value)}
                 />
-                {service === 'GitHub' && (
-                    <FormControl.Caption>
-                        With <BranchName>repo</BranchName> permissions
-                    </FormControl.Caption>
-                )}
+                {children}
             </FormControl>
             <Button sx={{ mt: 2 }} onClick={() => onToken(token)}>
                 Save