17c71b886e
* Use react for settings popup * Update options * Update styling * Remove unused type conversions * Remove unused controls function * Update project structure * Delete unused code * Legacy ui components * Refactor files * Update styling * Update UI components * Remove unused code * Remove unused code * Improve theming * Update icon color * Improve custom domains * Update extension * Add delete functionalty for custom domains * Improve icon sizes on screen * Implement icon bindings dialog * Minor improvements * Add tooltips * Support lookup of language ids in manifest * Implement watch mode for development purposes * Improve language id binding customization * Adjust node script * Improve reset functionality * Adjust node script * Minor improvements * Update binding controls with icons * Organize imports * Update error message * Adjust icon binding dialog * Add Info Popover * Update autocomplete behavior * Fix image issue * Minor improvements * Clean up code * Make appbar sticky * Improve project structure * Update info text * Adjust styling * Update styling * Improve adding new bindings * Adjust tsconfig * Support switch of themes for the icon preview * Update watch script * Improve error handling * Move build languages step before build src
80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
import { addCustomProvider } from '@/lib/custom-providers';
|
|
import { addGitProvider, providerConfig } from '@/providers';
|
|
import {
|
|
Box,
|
|
Button,
|
|
FormControl,
|
|
InputLabel,
|
|
MenuItem,
|
|
Select,
|
|
Typography,
|
|
} from '@mui/material';
|
|
import { useEffect, useState } from 'react';
|
|
import Browser from 'webextension-polyfill';
|
|
import { getCurrentTab } from '../api/helper';
|
|
|
|
export function AddProvider(props: {
|
|
suggestedProvider: string;
|
|
domain: string;
|
|
}) {
|
|
const { suggestedProvider, domain } = props;
|
|
const [providers, setProviders] = useState<string[]>([]);
|
|
const [selectedProvider, setSelectedProvider] =
|
|
useState<string>(suggestedProvider);
|
|
|
|
useEffect(() => {
|
|
const providers = Object.values(providerConfig)
|
|
.filter((provider) => !provider.isCustom && provider.canSelfHost)
|
|
.map((provider) => provider.name);
|
|
|
|
setProviders(providers);
|
|
}, []);
|
|
|
|
const addProvider = () => {
|
|
if (!selectedProvider) return;
|
|
addCustomProvider(domain, selectedProvider).then(async () => {
|
|
addGitProvider(domain, selectedProvider);
|
|
|
|
const cmd = {
|
|
cmd: 'init',
|
|
};
|
|
|
|
const tab = await getCurrentTab();
|
|
Browser.tabs.sendMessage(tab.id ?? 0, cmd);
|
|
|
|
// reload the popup to show the settings.
|
|
window.location.reload();
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ p: 2 }}>
|
|
<Typography variant='body1'>
|
|
Select a provider configuration to add to the domain.
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
|
|
<FormControl fullWidth size='small'>
|
|
<InputLabel>Provider Configuration</InputLabel>
|
|
<Select
|
|
id='select-provider-config'
|
|
label='Provider Configuration'
|
|
onChange={(e) => setSelectedProvider(e.target.value as string)}
|
|
value={selectedProvider}
|
|
>
|
|
{providers.map((provider) => (
|
|
<MenuItem key={provider} value={provider}>
|
|
{provider}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</Box>
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
|
|
<Button onClick={addProvider} variant='contained'>
|
|
Add custom provider
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|