Fix ID clash

enricoros · Sep 20, 2023 · 908da13 · 908da13 · vercel · Sep 20, 2023
1 parent a905a0d
commit 908da13
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 6 deletions.
diff --git a/src/common/components/FormInputKey.tsx b/src/common/components/FormInputKey.tsx
@@ -7,6 +7,7 @@ import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 
 
 export function FormInputKey(props: {
+  id: string, // introduced to avoid clashes
   label?: string, rightLabel?: string | React.JSX.Element,
   description?: string | React.JSX.Element,
   value: string, onChange: (value: string) => void,
@@ -39,6 +40,7 @@ export function FormInputKey(props: {
     </Box>}
 
     <Input
+      id={props.id}
       variant={props.required ? 'outlined' : 'outlined' /* 'soft */}
       value={props.value} onChange={handleChange}
       placeholder={props.required ? props.placeholder ? 'required: ' + props.placeholder : 'required' : props.placeholder || '...'}

diff --git a/src/modules/elevenlabs/ElevenlabsSettings.tsx b/src/modules/elevenlabs/ElevenlabsSettings.tsx
@@ -50,7 +50,7 @@ export function ElevenlabsSettings() {
       </FormControl>
 
       <FormInputKey
-        label='ElevenLabs API Key'
+        id='elevenlabs-key' label='ElevenLabs API Key'
         rightLabel={requiresKey ? 'required' : '✔️ already set in server'}
         value={apiKey} onChange={setApiKey}
         required={requiresKey} isError={!isValidKey}

diff --git a/src/modules/llms/anthropic/AnthropicSourceSetup.tsx b/src/modules/llms/anthropic/AnthropicSourceSetup.tsx
@@ -43,7 +43,7 @@ export function AnthropicSourceSetup(props: { sourceId: DModelSourceId }) {
   return <Box sx={{ display: 'flex', flexDirection: 'column', gap: settingsGap }}>
 
     <FormInputKey
-      label={'Anthropic API Key'}
+      id='anthropic-key' label='Anthropic API Key'
       rightLabel={<>{needsUserKey
         ? !anthropicKey && <Link level='body-sm' href='https://www.anthropic.com/earlyaccess' target='_blank'>request Key</Link>
         : '✔️ already set in server'

diff --git a/src/modules/llms/localai/LocalAISourceSetup.tsx b/src/modules/llms/localai/LocalAISourceSetup.tsx
@@ -55,8 +55,9 @@ export function LocalAISourceSetup(props: { sourceId: DModelSourceId }) {
     </Typography>
 
     <FormInputKey
+      id='localai-key' label='LocalAI URL'
       required noKey
-      label='LocalAI URL' rightLabel={<Link level='body-sm' href='https://localai.io' target='_blank'>Learn more</Link>}
+      rightLabel={<Link level='body-sm' href='https://localai.io' target='_blank'>Learn more</Link>}
       placeholder='e.g., http://127.0.0.1:8080'
       value={oaiHost} onChange={value => updateSetup({ oaiHost: value })}
     />

diff --git a/src/modules/llms/openai/OpenAISourceSetup.tsx b/src/modules/llms/openai/OpenAISourceSetup.tsx
@@ -51,7 +51,7 @@ export function OpenAISourceSetup(props: { sourceId: DModelSourceId }) {
   return <Box sx={{ display: 'flex', flexDirection: 'column', gap: settingsGap }}>
 
     <FormInputKey
-      label={'API Key'}
+      id='openai-key' label='API Key'
       rightLabel={<>{needsUserKey
         ? !oaiKey && <><Link level='body-sm' href='https://platform.openai.com/account/api-keys' target='_blank'>create Key</Link> and <Link level='body-sm' href='https://openai.com/waitlist/gpt-4-api' target='_blank'>apply to GPT-4</Link></>
         : '✔️ already set in server'

diff --git a/src/modules/llms/openrouter/OpenRouterSourceSetup.tsx b/src/modules/llms/openrouter/OpenRouterSourceSetup.tsx
@@ -58,7 +58,7 @@ export function OpenRouterSourceSetup(props: { sourceId: DModelSourceId }) {
     {/*</Box>*/}
 
     <FormInputKey
-      label={'OpenRouter API Key'}
+      id='openrouter-key' label='OpenRouter API Key'
       rightLabel={<>{needsUserKey
         ? !oaiKey && <Link level='body-sm' href='https://openrouter.ai/keys' target='_blank'>create key</Link>
         : '✔️ already set in server'

diff --git a/src/modules/prodia/ProdiaSettings.tsx b/src/modules/prodia/ProdiaSettings.tsx
@@ -53,7 +53,7 @@ export function ProdiaSettings() {
       </FormHelperText>
 
       <FormInputKey
-        label='Prodia API Key'
+        id='prodia-key' label='Prodia API Key'
         rightLabel={requiresKey ? 'required' : '✔️ already set in server'}
         value={apiKey} onChange={setApiKey}
         required={requiresKey} isError={!isValidKey}