parent
f369d4e390
commit
d8438ec3c1
22 changed files with 785 additions and 440 deletions
@ -0,0 +1,330 @@ |
|||||||
|
import React, { useState, useEffect } from 'react'; |
||||||
|
import { Box, CircularProgress, IconButton, Typography, MenuItem, TextField, Menu, Button, Card, CardHeader, CardContent, CardActions, Dialog, DialogTitle } from '@material-ui/core'; |
||||||
|
import { getIntegrations, createIntegration, modifyIntegration, deleteIntegration } from '../../../lib/backend/integrations'; |
||||||
|
import AddIcon from '@material-ui/icons/Add'; |
||||||
|
import EditIcon from '@material-ui/icons/Edit'; |
||||||
|
import CheckIcon from '@material-ui/icons/Check'; |
||||||
|
import DeleteIcon from '@material-ui/icons/Delete'; |
||||||
|
import ClearIcon from '@material-ui/icons/Clear'; |
||||||
|
import * as serverApi from '../../../api'; |
||||||
|
import { v4 as genUuid } from 'uuid'; |
||||||
|
import { useIntegrations, IntegrationClasses, IntegrationState, isIntegrationState, makeDefaultIntegrationProperties, makeIntegration } from '../../../lib/integration/useIntegrations'; |
||||||
|
import Alert from '@material-ui/lab/Alert'; |
||||||
|
import Integration from '../../../lib/integration/Integration'; |
||||||
|
let _ = require('lodash') |
||||||
|
|
||||||
|
// This widget is used to either display or edit a few
|
||||||
|
// specifically needed for Spotify Client credentials integration.
|
||||||
|
function EditSpotifyClientCredentialsDetails(props: { |
||||||
|
clientId: string, |
||||||
|
clientSecret: string | null, |
||||||
|
editing: boolean, |
||||||
|
onChangeClientId: (v: string) => void, |
||||||
|
onChangeClientSecret: (v: string) => void, |
||||||
|
}) { |
||||||
|
return <Box> |
||||||
|
<Box mt={1} mb={1}> |
||||||
|
<TextField |
||||||
|
variant="outlined" |
||||||
|
disabled={!props.editing} |
||||||
|
value={props.clientId || ""} |
||||||
|
label="Client id" |
||||||
|
fullWidth |
||||||
|
onChange={(e: any) => props.onChangeClientId(e.target.value)} |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
<Box mt={1} mb={1}> |
||||||
|
<TextField |
||||||
|
variant="outlined" |
||||||
|
disabled={!props.editing} |
||||||
|
value={props.clientSecret === null ? "••••••••••••••••" : props.clientSecret} |
||||||
|
label="Client secret" |
||||||
|
fullWidth |
||||||
|
onChange={(e: any) => { |
||||||
|
props.onChangeClientSecret(e.target.value) |
||||||
|
}} |
||||||
|
onFocus={(e: any) => { |
||||||
|
if (props.clientSecret === null) { |
||||||
|
// Change from dots to empty input
|
||||||
|
console.log("Focus!") |
||||||
|
props.onChangeClientSecret(''); |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
</Box>; |
||||||
|
} |
||||||
|
|
||||||
|
// An editing widget which is meant to either display or edit properties
|
||||||
|
// of an integration.
|
||||||
|
function EditIntegration(props: { |
||||||
|
upstreamId?: number, |
||||||
|
integration: serverApi.CreateIntegrationRequest, |
||||||
|
editing?: boolean, |
||||||
|
showSubmitButton?: boolean | "InProgress", |
||||||
|
showDeleteButton?: boolean | "InProgress", |
||||||
|
showEditButton?: boolean, |
||||||
|
showTestButton?: boolean | "InProgress", |
||||||
|
showCancelButton?: boolean, |
||||||
|
flashMessage?: React.ReactFragment, |
||||||
|
isNew: boolean, |
||||||
|
onChange?: (p: serverApi.CreateIntegrationRequest) => void, |
||||||
|
onSubmit?: (p: serverApi.CreateIntegrationRequest) => void, |
||||||
|
onDelete?: () => void, |
||||||
|
onEdit?: () => void, |
||||||
|
onTest?: () => void, |
||||||
|
onCancel?: () => void, |
||||||
|
}) { |
||||||
|
let IntegrationHeaders: Record<any, any> = { |
||||||
|
[serverApi.IntegrationType.SpotifyClientCredentials]: |
||||||
|
<Box display="flex" alignItems="center"> |
||||||
|
<Box mr={1}> |
||||||
|
{IntegrationClasses[serverApi.IntegrationType.SpotifyClientCredentials].getIcon({ |
||||||
|
style: { height: '40px', width: '40px' } |
||||||
|
})} |
||||||
|
</Box> |
||||||
|
<Typography>Spotify (using Client Credentials)</Typography> |
||||||
|
</Box> |
||||||
|
} |
||||||
|
let IntegrationDescription: Record<any, any> = { |
||||||
|
[serverApi.IntegrationType.SpotifyClientCredentials]: |
||||||
|
<Typography> |
||||||
|
This integration allows using the Spotify API to make requests that are |
||||||
|
tied to any specific user, such as searching items and retrieving item |
||||||
|
metadata.<br /> |
||||||
|
Please see the Spotify API documentation on how to generate a client ID |
||||||
|
and client secret. Once set, you will only be able to overwrite the secret |
||||||
|
here, not read it. |
||||||
|
</Typography> |
||||||
|
} |
||||||
|
|
||||||
|
return <Card variant="outlined"> |
||||||
|
<CardHeader |
||||||
|
avatar={ |
||||||
|
IntegrationHeaders[props.integration.type] |
||||||
|
} |
||||||
|
> |
||||||
|
</CardHeader> |
||||||
|
<CardContent> |
||||||
|
<Box mb={2}>{IntegrationDescription[props.integration.type]}</Box> |
||||||
|
<Box mt={1} mb={1}> |
||||||
|
<TextField |
||||||
|
variant="outlined" |
||||||
|
value={props.integration.name || ""} |
||||||
|
label="Integration name" |
||||||
|
fullWidth |
||||||
|
disabled={!props.editing} |
||||||
|
onChange={(e: any) => props.onChange && props.onChange({ |
||||||
|
...props.integration, |
||||||
|
name: e.target.value, |
||||||
|
})} |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
{props.integration.type === serverApi.IntegrationType.SpotifyClientCredentials && |
||||||
|
<EditSpotifyClientCredentialsDetails |
||||||
|
clientId={props.integration.details.clientId} |
||||||
|
clientSecret={props.integration.secretDetails ?
|
||||||
|
props.integration.secretDetails.clientSecret : |
||||||
|
(props.isNew ? "" : null)} |
||||||
|
editing={props.editing || false} |
||||||
|
onChangeClientId={(v: string) => props.onChange && props.onChange({ |
||||||
|
...props.integration, |
||||||
|
details: { |
||||||
|
...props.integration.details, |
||||||
|
clientId: v, |
||||||
|
} |
||||||
|
})} |
||||||
|
onChangeClientSecret={(v: string) => props.onChange && props.onChange({ |
||||||
|
...props.integration, |
||||||
|
secretDetails: { |
||||||
|
...props.integration.secretDetails, |
||||||
|
clientSecret: v, |
||||||
|
} |
||||||
|
})} |
||||||
|
/> |
||||||
|
} |
||||||
|
{props.flashMessage && props.flashMessage} |
||||||
|
</CardContent> |
||||||
|
<CardActions> |
||||||
|
{props.showEditButton && <IconButton |
||||||
|
onClick={props.onEdit} |
||||||
|
><EditIcon /></IconButton>} |
||||||
|
{props.showSubmitButton && <IconButton |
||||||
|
onClick={() => props.onSubmit && props.onSubmit(props.integration)} |
||||||
|
><CheckIcon /></IconButton>} |
||||||
|
{props.showDeleteButton && <IconButton |
||||||
|
onClick={props.onDelete} |
||||||
|
><DeleteIcon /></IconButton>} |
||||||
|
{props.showCancelButton && <IconButton |
||||||
|
onClick={props.onCancel} |
||||||
|
><ClearIcon /></IconButton>} |
||||||
|
{props.showTestButton && <Button |
||||||
|
onClick={props.onTest} |
||||||
|
>Test</Button>} |
||||||
|
</CardActions> |
||||||
|
</Card> |
||||||
|
} |
||||||
|
|
||||||
|
let EditorWithTest = (props: any) => { |
||||||
|
const [testFlashMessage, setTestFlashMessage] = |
||||||
|
React.useState<React.ReactFragment | undefined>(undefined); |
||||||
|
let { integration, ...rest } = props; |
||||||
|
return <EditIntegration |
||||||
|
onTest={() => { |
||||||
|
integration.integration.test({}) |
||||||
|
.then(() => { |
||||||
|
setTestFlashMessage( |
||||||
|
<Alert severity="success">Integration is active.</Alert> |
||||||
|
) |
||||||
|
}) |
||||||
|
}} |
||||||
|
flashMessage={testFlashMessage} |
||||||
|
showTestButton={true} |
||||||
|
integration={integration.properties} |
||||||
|
{...rest} |
||||||
|
/>; |
||||||
|
} |
||||||
|
|
||||||
|
function AddIntegrationMenu(props: { |
||||||
|
position: null | number[], |
||||||
|
open: boolean, |
||||||
|
onClose?: () => void, |
||||||
|
onAdd?: (type: serverApi.IntegrationType) => void, |
||||||
|
}) { |
||||||
|
const pos = props.open && props.position ? |
||||||
|
{ left: props.position[0], top: props.position[1] } |
||||||
|
: { left: 0, top: 0 } |
||||||
|
|
||||||
|
return <Menu |
||||||
|
open={props.open} |
||||||
|
anchorReference="anchorPosition" |
||||||
|
anchorPosition={pos} |
||||||
|
keepMounted |
||||||
|
onClose={props.onClose} |
||||||
|
> |
||||||
|
<MenuItem |
||||||
|
onClick={() => { |
||||||
|
props.onAdd && props.onAdd(serverApi.IntegrationType.SpotifyClientCredentials); |
||||||
|
props.onClose && props.onClose(); |
||||||
|
}} |
||||||
|
>Spotify</MenuItem> |
||||||
|
</Menu> |
||||||
|
} |
||||||
|
|
||||||
|
function EditIntegrationDialog(props: { |
||||||
|
open: boolean, |
||||||
|
onClose?: () => void, |
||||||
|
upstreamId?: number, |
||||||
|
integration: IntegrationState, |
||||||
|
onSubmit?: (p: serverApi.CreateIntegrationRequest) => void, |
||||||
|
isNew: boolean, |
||||||
|
}) { |
||||||
|
let [editingIntegration, setEditingIntegration] = |
||||||
|
useState<IntegrationState>(props.integration); |
||||||
|
|
||||||
|
useEffect(() => { setEditingIntegration(props.integration); }, [props.integration]); |
||||||
|
|
||||||
|
return <Dialog |
||||||
|
onClose={props.onClose} |
||||||
|
open={props.open} |
||||||
|
disableBackdropClick={true} |
||||||
|
> |
||||||
|
<DialogTitle>Edit Integration</DialogTitle> |
||||||
|
<EditIntegration |
||||||
|
isNew={props.isNew} |
||||||
|
editing={true} |
||||||
|
upstreamId={props.upstreamId} |
||||||
|
integration={editingIntegration.properties} |
||||||
|
showCancelButton={true} |
||||||
|
showSubmitButton={props.onSubmit !== undefined} |
||||||
|
showTestButton={false} |
||||||
|
onCancel={props.onClose} |
||||||
|
onSubmit={props.onSubmit} |
||||||
|
onChange={(i: any) => { |
||||||
|
setEditingIntegration({ |
||||||
|
...editingIntegration, |
||||||
|
properties: i, |
||||||
|
integration: makeIntegration(i, editingIntegration.id), |
||||||
|
}); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Dialog> |
||||||
|
} |
||||||
|
|
||||||
|
export default function IntegrationSettings(props: {}) { |
||||||
|
const [addMenuPos, setAddMenuPos] = React.useState<null | number[]>(null); |
||||||
|
const [editingState, setEditingState] = React.useState<IntegrationState | null>(null); |
||||||
|
|
||||||
|
let { |
||||||
|
state: integrations, |
||||||
|
addIntegration, |
||||||
|
modifyIntegration, |
||||||
|
deleteIntegration, |
||||||
|
updateFromUpstream, |
||||||
|
} = useIntegrations(); |
||||||
|
|
||||||
|
const onOpenAddMenu = (e: any) => { |
||||||
|
setAddMenuPos([e.clientX, e.clientY]) |
||||||
|
}; |
||||||
|
const onCloseAddMenu = () => { |
||||||
|
setAddMenuPos(null); |
||||||
|
}; |
||||||
|
|
||||||
|
return <> |
||||||
|
<Box> |
||||||
|
{integrations === null && <CircularProgress />} |
||||||
|
{Array.isArray(integrations) && <Box display="flex" flexDirection="column" alignItems="center" flexWrap="wrap"> |
||||||
|
{integrations.map((state: IntegrationState) => <Box m={1} width="90%"> |
||||||
|
<EditorWithTest |
||||||
|
upstreamId={state.id} |
||||||
|
integration={state} |
||||||
|
showEditButton={true} |
||||||
|
showDeleteButton={true} |
||||||
|
onEdit={() => { setEditingState(state); }} |
||||||
|
onDelete={() => { |
||||||
|
deleteIntegration(state.id) |
||||||
|
.then(updateFromUpstream) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Box>)} |
||||||
|
<IconButton onClick={onOpenAddMenu}> |
||||||
|
<AddIcon /> |
||||||
|
</IconButton> |
||||||
|
</Box>} |
||||||
|
</Box> |
||||||
|
<AddIntegrationMenu |
||||||
|
position={addMenuPos} |
||||||
|
open={addMenuPos !== null} |
||||||
|
onClose={onCloseAddMenu} |
||||||
|
onAdd={(type: serverApi.IntegrationType) => { |
||||||
|
let p = makeDefaultIntegrationProperties(type); |
||||||
|
setEditingState({ |
||||||
|
properties: p, |
||||||
|
integration: makeIntegration(p, -1), |
||||||
|
id: -1, |
||||||
|
}) |
||||||
|
}} |
||||||
|
/> |
||||||
|
{editingState && <EditIntegrationDialog |
||||||
|
open={!(editingState === null)} |
||||||
|
onClose={() => { setEditingState(null); }} |
||||||
|
integration={editingState} |
||||||
|
isNew={editingState.id === -1} |
||||||
|
onSubmit={(v: serverApi.CreateIntegrationRequest) => { |
||||||
|
if (editingState.id >= 0) { |
||||||
|
const id = editingState.id; |
||||||
|
setEditingState(null); |
||||||
|
modifyIntegration(id, v) |
||||||
|
.then(updateFromUpstream) |
||||||
|
} else { |
||||||
|
setEditingState(null); |
||||||
|
createIntegration({ |
||||||
|
...v, |
||||||
|
secretDetails: v.secretDetails || {}, |
||||||
|
}) |
||||||
|
.then(updateFromUpstream) |
||||||
|
} |
||||||
|
}} |
||||||
|
/>} |
||||||
|
</>; |
||||||
|
} |
||||||
@ -1,352 +0,0 @@ |
|||||||
import React, { useState, useEffect, useCallback } from 'react'; |
|
||||||
import { useAuth } from '../../../lib/useAuth'; |
|
||||||
import { Box, CircularProgress, IconButton, Typography, FormControl, Select, MenuItem, TextField, Menu, Button, Card, CardHeader, CardContent, CardActions } from '@material-ui/core'; |
|
||||||
import { getIntegrations, createIntegration, modifyIntegration, deleteIntegration } from '../../../lib/backend/integrations'; |
|
||||||
import AddIcon from '@material-ui/icons/Add'; |
|
||||||
import EditIcon from '@material-ui/icons/Edit'; |
|
||||||
import CheckIcon from '@material-ui/icons/Check'; |
|
||||||
import DeleteIcon from '@material-ui/icons/Delete'; |
|
||||||
import * as serverApi from '../../../api'; |
|
||||||
import StoreLinkIcon, { ExternalStore } from '../../common/StoreLinkIcon'; |
|
||||||
import { v4 as genUuid } from 'uuid'; |
|
||||||
import { testSpotify } from '../../../lib/integration/spotify/spotifyClientCreds'; |
|
||||||
let _ = require('lodash') |
|
||||||
|
|
||||||
interface EditorIntegrationState extends serverApi.IntegrationDetailsResponse { |
|
||||||
secretDetails?: any, |
|
||||||
} |
|
||||||
|
|
||||||
interface EditIntegrationProps { |
|
||||||
upstreamId: number | null, |
|
||||||
integration: EditorIntegrationState, |
|
||||||
original: EditorIntegrationState, |
|
||||||
editing: boolean, |
|
||||||
submitting: boolean, |
|
||||||
onChange: (p: EditorIntegrationState, editing: boolean) => void, |
|
||||||
onSubmit: () => void, |
|
||||||
onDelete: () => void, |
|
||||||
} |
|
||||||
|
|
||||||
function EditSpotifyClientCredentialsDetails(props: { |
|
||||||
clientId: string, |
|
||||||
clientSecret: string | null, |
|
||||||
editing: boolean, |
|
||||||
onChangeClientId: (v: string) => void, |
|
||||||
onChangeClientSecret: (v: string) => void, |
|
||||||
}) { |
|
||||||
return <Box> |
|
||||||
<Box mt={1} mb={1}> |
|
||||||
<TextField |
|
||||||
variant="outlined" |
|
||||||
disabled={!props.editing} |
|
||||||
value={props.clientId || ""} |
|
||||||
label="Client id" |
|
||||||
fullWidth |
|
||||||
onChange={(e: any) => props.onChangeClientId(e.target.value)} |
|
||||||
/> |
|
||||||
</Box> |
|
||||||
<Box mt={1} mb={1}> |
|
||||||
<TextField |
|
||||||
variant="outlined" |
|
||||||
disabled={!props.editing} |
|
||||||
value={props.clientSecret === null ? "••••••••••••••••" : props.clientSecret} |
|
||||||
label="Client secret" |
|
||||||
fullWidth |
|
||||||
onChange={(e: any) => { |
|
||||||
props.onChangeClientSecret(e.target.value) |
|
||||||
}} |
|
||||||
onFocus={(e: any) => { |
|
||||||
if(props.clientSecret === null) { |
|
||||||
// Change from dots to empty input
|
|
||||||
console.log("Focus!") |
|
||||||
props.onChangeClientSecret(''); |
|
||||||
} |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Box> |
|
||||||
</Box>; |
|
||||||
} |
|
||||||
|
|
||||||
function EditIntegration(props: EditIntegrationProps) { |
|
||||||
let IntegrationHeaders: Record<any, any> = { |
|
||||||
[serverApi.IntegrationType.SpotifyClientCredentials]: |
|
||||||
<Box display="flex" alignItems="center"> |
|
||||||
<Box mr={1}><StoreLinkIcon |
|
||||||
style={{ height: '40px', width: '40px' }} |
|
||||||
whichStore={ExternalStore.Spotify} |
|
||||||
/></Box> |
|
||||||
<Typography>Spotify (using Client Credentials)</Typography> |
|
||||||
</Box> |
|
||||||
} |
|
||||||
let IntegrationDescription: Record<any, any> = { |
|
||||||
[serverApi.IntegrationType.SpotifyClientCredentials]: |
|
||||||
<Typography> |
|
||||||
This integration allows using the Spotify API to make requests that are |
|
||||||
tied to any specific user, such as searching items and retrieving item |
|
||||||
metadata.<br/> |
|
||||||
Please see the Spotify API documentation on how to generate a client ID |
|
||||||
and client secret. Once set, you will only be able to overwrite the secret |
|
||||||
here, not read it. |
|
||||||
</Typography> |
|
||||||
} |
|
||||||
|
|
||||||
return <Card variant="outlined"> |
|
||||||
<CardHeader |
|
||||||
avatar={ |
|
||||||
IntegrationHeaders[props.integration.type] |
|
||||||
} |
|
||||||
> |
|
||||||
</CardHeader> |
|
||||||
<CardContent> |
|
||||||
<Box mb={2}>{IntegrationDescription[props.integration.type]}</Box> |
|
||||||
<Box mt={1} mb={1}> |
|
||||||
<TextField |
|
||||||
variant="outlined" |
|
||||||
value={props.integration.name || ""} |
|
||||||
label="Integration name" |
|
||||||
fullWidth |
|
||||||
disabled={!props.editing} |
|
||||||
onChange={(e: any) => props.onChange({ |
|
||||||
...props.integration, |
|
||||||
name: e.target.value, |
|
||||||
}, props.editing)} |
|
||||||
/> |
|
||||||
</Box> |
|
||||||
{props.integration.type === serverApi.IntegrationType.SpotifyClientCredentials && |
|
||||||
<EditSpotifyClientCredentialsDetails |
|
||||||
clientId={props.integration.details.clientId} |
|
||||||
clientSecret={ |
|
||||||
(props.integration.secretDetails && |
|
||||||
props.integration.secretDetails.clientSecret !== null) ? |
|
||||||
props.integration.secretDetails.clientSecret : null} |
|
||||||
editing={props.editing} |
|
||||||
onChangeClientId={(v: string) => props.onChange({ |
|
||||||
...props.integration, |
|
||||||
details: { |
|
||||||
...props.integration.details, |
|
||||||
clientId: v, |
|
||||||
} |
|
||||||
}, props.editing)} |
|
||||||
onChangeClientSecret={(v: string) => props.onChange({ |
|
||||||
...props.integration, |
|
||||||
secretDetails: { |
|
||||||
...props.integration.secretDetails, |
|
||||||
clientSecret: v, |
|
||||||
} |
|
||||||
}, props.editing)} |
|
||||||
/> |
|
||||||
} |
|
||||||
</CardContent> |
|
||||||
<CardActions> |
|
||||||
{!props.editing && !props.submitting && <IconButton |
|
||||||
onClick={() => { props.onChange(props.integration, true); }} |
|
||||||
><EditIcon /></IconButton>} |
|
||||||
{props.editing && !props.submitting && <IconButton |
|
||||||
onClick={() => { props.onSubmit(); }} |
|
||||||
><CheckIcon /></IconButton>} |
|
||||||
{!props.submitting && <IconButton |
|
||||||
onClick={() => { props.onDelete(); }} |
|
||||||
><DeleteIcon /></IconButton>} |
|
||||||
{!props.submitting && !props.editing && props.upstreamId !== null && <Button |
|
||||||
onClick={() => testSpotify(props.upstreamId || 0)} |
|
||||||
>Test</Button>} |
|
||||||
{props.submitting && <CircularProgress />} |
|
||||||
</CardActions> |
|
||||||
</Card> |
|
||||||
} |
|
||||||
|
|
||||||
function AddIntegrationMenu(props: { |
|
||||||
position: null | number[], |
|
||||||
open: boolean, |
|
||||||
onClose: () => void, |
|
||||||
onAdd: (type: serverApi.IntegrationType) => void, |
|
||||||
}) { |
|
||||||
const pos = props.open && props.position ? |
|
||||||
{ left: props.position[0], top: props.position[1] } |
|
||||||
: { left: 0, top: 0 } |
|
||||||
|
|
||||||
return <Menu |
|
||||||
open={props.open} |
|
||||||
anchorReference="anchorPosition" |
|
||||||
anchorPosition={pos} |
|
||||||
keepMounted |
|
||||||
onClose={props.onClose} |
|
||||||
> |
|
||||||
<MenuItem |
|
||||||
onClick={() => { |
|
||||||
props.onAdd(serverApi.IntegrationType.SpotifyClientCredentials); |
|
||||||
props.onClose(); |
|
||||||
}} |
|
||||||
>Spotify</MenuItem> |
|
||||||
</Menu> |
|
||||||
} |
|
||||||
|
|
||||||
export default function IntegrationSettingsEditor(props: {}) { |
|
||||||
interface EditorState { |
|
||||||
id: string, //uniquely identifies this editor in the window.
|
|
||||||
upstreamId: number | null, //back-end ID for this integration if any.
|
|
||||||
integration: EditorIntegrationState, |
|
||||||
original: EditorIntegrationState, |
|
||||||
editing: boolean, |
|
||||||
submitting: boolean, |
|
||||||
} |
|
||||||
let [editors, setEditors] = useState<EditorState[] | null>(null); |
|
||||||
const [addMenuPos, setAddMenuPos] = React.useState<null | number[]>(null); |
|
||||||
|
|
||||||
const onOpenAddMenu = (e: any) => { |
|
||||||
setAddMenuPos([e.clientX, e.clientY]) |
|
||||||
}; |
|
||||||
const onCloseAddMenu = () => { |
|
||||||
setAddMenuPos(null); |
|
||||||
}; |
|
||||||
|
|
||||||
const submitEditor = (state: EditorState) => { |
|
||||||
let integration: any = state.integration; |
|
||||||
|
|
||||||
if (state.upstreamId === null) { |
|
||||||
if (!state.integration.secretDetails) { |
|
||||||
throw new Error('Cannot create an integration without its secret details set.') |
|
||||||
} |
|
||||||
createIntegration(integration).then((response: any) => { |
|
||||||
if (!response.id) { |
|
||||||
throw new Error('failed to submit integration.') |
|
||||||
} |
|
||||||
let cpy = _.cloneDeep(editors); |
|
||||||
cpy.forEach((s: any) => { |
|
||||||
if (s.id === state.id) { |
|
||||||
s.submitting = false; |
|
||||||
s.editing = false; |
|
||||||
s.upstreamId = response.id; |
|
||||||
} |
|
||||||
}) |
|
||||||
setEditors(cpy); |
|
||||||
}) |
|
||||||
} else { |
|
||||||
modifyIntegration(state.upstreamId, integration).then(() => { |
|
||||||
let cpy = _.cloneDeep(editors); |
|
||||||
cpy.forEach((s: any) => { |
|
||||||
if (s.id === state.id) { |
|
||||||
s.submitting = false; |
|
||||||
s.editing = false; |
|
||||||
} |
|
||||||
}) |
|
||||||
setEditors(cpy); |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const deleteEditor = (state: EditorState) => { |
|
||||||
let promise: Promise<void> = state.upstreamId ? |
|
||||||
deleteIntegration(state.upstreamId) : |
|
||||||
(async () => { })(); |
|
||||||
|
|
||||||
promise.then((response: any) => { |
|
||||||
let cpy = _.cloneDeep(editors).filter( |
|
||||||
(e: any) => e.id !== state.id |
|
||||||
); |
|
||||||
setEditors(cpy); |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
getIntegrations() |
|
||||||
.then((integrations: serverApi.ListIntegrationsResponse) => { |
|
||||||
setEditors(integrations.map((i: any, idx: any) => { |
|
||||||
return { |
|
||||||
integration: { ...i }, |
|
||||||
original: { ...i }, |
|
||||||
id: genUuid(), |
|
||||||
editing: false, |
|
||||||
submitting: false, |
|
||||||
upstreamId: i.id, |
|
||||||
} |
|
||||||
})); |
|
||||||
}); |
|
||||||
}, []); |
|
||||||
|
|
||||||
return <> |
|
||||||
<Box> |
|
||||||
{editors === null && <CircularProgress />} |
|
||||||
{editors && <Box display="flex" flexDirection="column" alignItems="center" flexWrap="wrap"> |
|
||||||
{editors.map((state: EditorState) => <Box m={1} width="90%"> |
|
||||||
<EditIntegration |
|
||||||
upstreamId={state.upstreamId} |
|
||||||
integration={state.integration} |
|
||||||
original={state.original} |
|
||||||
editing={state.editing} |
|
||||||
submitting={state.submitting} |
|
||||||
onChange={(p: EditorIntegrationState, editing: boolean) => { |
|
||||||
if (!editors) { |
|
||||||
throw new Error('cannot change editors before loading integrations.') |
|
||||||
} |
|
||||||
let cpy: EditorState[] = _.cloneDeep(editors); |
|
||||||
cpy.forEach((s: any) => { |
|
||||||
if (s.id === state.id) { |
|
||||||
s.integration = p; |
|
||||||
s.editing = editing; |
|
||||||
} |
|
||||||
}) |
|
||||||
setEditors(cpy); |
|
||||||
}} |
|
||||||
onSubmit={() => { |
|
||||||
if (!editors) { |
|
||||||
throw new Error('cannot submit editors before loading integrations.') |
|
||||||
} |
|
||||||
let cpy: EditorState[] = _.cloneDeep(editors); |
|
||||||
cpy.forEach((s: EditorState) => { |
|
||||||
if (s.id === state.id) { |
|
||||||
s.submitting = true; |
|
||||||
s.integration.secretDetails = undefined; |
|
||||||
} |
|
||||||
}) |
|
||||||
setEditors(cpy); |
|
||||||
submitEditor(state); |
|
||||||
}} |
|
||||||
onDelete={() => { |
|
||||||
if (!editors) { |
|
||||||
throw new Error('cannot submit editors before loading integrations.') |
|
||||||
} |
|
||||||
let cpy: EditorState[] = _.cloneDeep(editors); |
|
||||||
cpy.forEach((s: any) => { |
|
||||||
if (s.id === state.id) { |
|
||||||
s.submitting = true; |
|
||||||
} |
|
||||||
}) |
|
||||||
setEditors(cpy); |
|
||||||
deleteEditor(state); |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Box>)} |
|
||||||
<IconButton onClick={onOpenAddMenu}> |
|
||||||
<AddIcon /> |
|
||||||
</IconButton> |
|
||||||
</Box>} |
|
||||||
</Box> |
|
||||||
<AddIntegrationMenu |
|
||||||
position={addMenuPos} |
|
||||||
open={addMenuPos !== null} |
|
||||||
onClose={onCloseAddMenu} |
|
||||||
onAdd={(type: serverApi.IntegrationType) => { |
|
||||||
let cpy = _.cloneDeep(editors); |
|
||||||
cpy.push({ |
|
||||||
integration: { |
|
||||||
type: serverApi.IntegrationType.SpotifyClientCredentials, |
|
||||||
details: { |
|
||||||
clientId: '', |
|
||||||
}, |
|
||||||
secretDetails: { |
|
||||||
clientSecret: '', |
|
||||||
}, |
|
||||||
name: '', |
|
||||||
}, |
|
||||||
original: null, |
|
||||||
id: genUuid(), |
|
||||||
editing: true, |
|
||||||
submitting: false, |
|
||||||
upstreamId: null, |
|
||||||
}) |
|
||||||
setEditors(cpy); |
|
||||||
}} |
|
||||||
/> |
|
||||||
</>; |
|
||||||
} |
|
||||||
@ -0,0 +1,24 @@ |
|||||||
|
import { ResponsiveFontSizesOptions } from "@material-ui/core/styles/responsiveFontSizes"; |
||||||
|
import { useHistory } from "react-router"; |
||||||
|
import { Auth } from "../useAuth"; |
||||||
|
|
||||||
|
export class NotLoggedInError extends Error { |
||||||
|
constructor(message: string) { |
||||||
|
super(message); |
||||||
|
this.name = "NotLoggedInError"; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default async function backendRequest(url: any, ...restArgs: any[]): Promise<Response> { |
||||||
|
let response = await fetch(url, ...restArgs); |
||||||
|
if (response.status === 401 && (await response.json()).reason === "NotLoggedIn") { |
||||||
|
console.log("Not logged in!") |
||||||
|
throw new NotLoggedInError("Not logged in."); |
||||||
|
} |
||||||
|
return response; |
||||||
|
} |
||||||
|
|
||||||
|
export function handleNotLoggedIn(auth: Auth, e: NotLoggedInError) { |
||||||
|
console.log("Not logged in!") |
||||||
|
auth.signout(); |
||||||
|
} |
||||||
@ -0,0 +1,59 @@ |
|||||||
|
import React, { ReactFragment } from 'react'; |
||||||
|
|
||||||
|
export interface IntegrationAlbum { |
||||||
|
name?: string, |
||||||
|
artist?: IntegrationArtist, |
||||||
|
url?: string, // An URL to access the item externally.
|
||||||
|
} |
||||||
|
|
||||||
|
export interface IntegrationArtist { |
||||||
|
name?: string, |
||||||
|
url?: string, // An URL to access the item externally.
|
||||||
|
} |
||||||
|
|
||||||
|
export interface IntegrationSong { |
||||||
|
title?: string, |
||||||
|
album?: IntegrationAlbum, |
||||||
|
artist?: IntegrationArtist, |
||||||
|
url?: string, // An URL to access the item externally.
|
||||||
|
} |
||||||
|
|
||||||
|
export enum IntegrationFeature { |
||||||
|
// Used to test whether the integration is active.
|
||||||
|
Test = 0, |
||||||
|
|
||||||
|
// Used to get a bucket of songs (typically: the whole library)
|
||||||
|
GetSongs, |
||||||
|
|
||||||
|
// Used to search items and get some amount of candidate results.
|
||||||
|
SearchSong, |
||||||
|
SearchAlbum, |
||||||
|
SearchArtist, |
||||||
|
} |
||||||
|
|
||||||
|
export interface IntegrationDescriptor { |
||||||
|
supports: IntegrationFeature[], |
||||||
|
} |
||||||
|
|
||||||
|
export default class Integration { |
||||||
|
constructor(integrationId: number) { } |
||||||
|
|
||||||
|
// Common
|
||||||
|
static getFeatures(): IntegrationFeature[] { return []; } |
||||||
|
static getIcon(props: any): ReactFragment { return <></> } |
||||||
|
|
||||||
|
// Requires feature: Test
|
||||||
|
async test(testParams: any): Promise<void> {} |
||||||
|
|
||||||
|
// Requires feature: GetSongs
|
||||||
|
async getSongs(getSongsParams: any): Promise<IntegrationSong[]> { return []; } |
||||||
|
|
||||||
|
// Requires feature: SearchSongs
|
||||||
|
async searchSong(songProps: IntegrationSong): Promise<IntegrationSong[]> { return []; } |
||||||
|
|
||||||
|
// Requires feature: SearchAlbum
|
||||||
|
async searchAlbum(albumProps: IntegrationAlbum): Promise<IntegrationAlbum[]> { return []; } |
||||||
|
|
||||||
|
// Requires feature: SearchArtist
|
||||||
|
async searchArtist(artistProps: IntegrationArtist): Promise<IntegrationArtist[]> { return []; } |
||||||
|
} |
||||||
@ -0,0 +1,95 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import Integration, { IntegrationFeature, IntegrationAlbum, IntegrationArtist, IntegrationSong } from '../Integration'; |
||||||
|
import StoreLinkIcon, { ExternalStore } from '../../../components/common/StoreLinkIcon'; |
||||||
|
|
||||||
|
enum SearchType { |
||||||
|
Song = 'song', |
||||||
|
Artist = 'artist', |
||||||
|
Album = 'album', |
||||||
|
}; |
||||||
|
|
||||||
|
export default class SpotifyClientCreds extends Integration { |
||||||
|
integrationId: number; |
||||||
|
|
||||||
|
constructor(integrationId: number) { |
||||||
|
super(integrationId); |
||||||
|
this.integrationId = integrationId; |
||||||
|
} |
||||||
|
|
||||||
|
static getFeatures(): IntegrationFeature[] { |
||||||
|
return [ |
||||||
|
IntegrationFeature.Test, |
||||||
|
IntegrationFeature.SearchSong, |
||||||
|
IntegrationFeature.SearchAlbum, |
||||||
|
IntegrationFeature.SearchArtist, |
||||||
|
] |
||||||
|
} |
||||||
|
|
||||||
|
static getIcon(props: any) { |
||||||
|
return <StoreLinkIcon whichStore={ExternalStore.Spotify} {...props} /> |
||||||
|
} |
||||||
|
|
||||||
|
async test(testParams: {}) { |
||||||
|
const response = await fetch( |
||||||
|
(process.env.REACT_APP_BACKEND || "") + |
||||||
|
`/integrations/${this.integrationId}/v1/search?q=queens&type=artist`); |
||||||
|
|
||||||
|
if (!response.ok) { |
||||||
|
throw new Error("Spttify Client Credentails test failed: " + JSON.stringify(response)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
async searchSong(songProps: IntegrationSong): Promise<IntegrationSong[]> { return []; } |
||||||
|
async searchAlbum(albumProps: IntegrationAlbum): Promise<IntegrationAlbum[]> { return []; } |
||||||
|
async searchArtist(artistProps: IntegrationArtist): Promise<IntegrationArtist[]> { return []; } |
||||||
|
|
||||||
|
async search(query: string, type: SearchType): |
||||||
|
Promise<IntegrationSong[] | IntegrationAlbum[] | IntegrationArtist[]> { |
||||||
|
const response = await fetch( |
||||||
|
(process.env.REACT_APP_BACKEND || "") + |
||||||
|
`/integrations/${this.integrationId}/v1/search?q=${encodeURIComponent(query)}&type=${type}`); |
||||||
|
|
||||||
|
if (!response.ok) { |
||||||
|
throw new Error("Spotify Client Credentails search failed: " + JSON.stringify(response)); |
||||||
|
} |
||||||
|
|
||||||
|
switch(type) { |
||||||
|
case SearchType.Song: { |
||||||
|
return (await response.json()).tracks.items.map((r: any): IntegrationSong => { |
||||||
|
return { |
||||||
|
title: r.name, |
||||||
|
url: r.external_urls.spotify, |
||||||
|
artist: { |
||||||
|
name: r.artists[0].name, |
||||||
|
url: r.artists[0].external_urls.spotify, |
||||||
|
}, |
||||||
|
album: { |
||||||
|
name: r.albums[0].name, |
||||||
|
url: r.albums[0].external_urls.spotify, |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
case SearchType.Artist: { |
||||||
|
return (await response.json()).artists.items.map((r: any): IntegrationArtist => { |
||||||
|
return { |
||||||
|
name: r.name, |
||||||
|
url: r.external_urls.spotify, |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
case SearchType.Album: { |
||||||
|
return (await response.json()).albums.items.map((r: any): IntegrationAlbum => { |
||||||
|
return { |
||||||
|
name: r.name, |
||||||
|
url: r.external_urls.spotify, |
||||||
|
artist: { |
||||||
|
name: r.artists[0].name, |
||||||
|
url: r.artists[0].external_urls.spotify, |
||||||
|
}, |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -1,14 +0,0 @@ |
|||||||
export async function testSpotify(integrationId: number) { |
|
||||||
const requestOpts = { |
|
||||||
method: 'GET', |
|
||||||
}; |
|
||||||
|
|
||||||
const response = await fetch( |
|
||||||
(process.env.REACT_APP_BACKEND || "") + `/integrations/${integrationId}/v1/search?q=queens&type=artist`, |
|
||||||
requestOpts |
|
||||||
); |
|
||||||
if (!response.ok) { |
|
||||||
throw new Error("Response to tag merge not OK: " + JSON.stringify(response)); |
|
||||||
} |
|
||||||
console.log("Spotify response: ", response); |
|
||||||
} |
|
||||||
@ -0,0 +1,161 @@ |
|||||||
|
import React, { useState, useContext, createContext, useReducer, useEffect } from "react"; |
||||||
|
import Integration from "./Integration"; |
||||||
|
import * as serverApi from '../../api'; |
||||||
|
import SpotifyClientCreds from "./spotify/SpotifyClientCreds"; |
||||||
|
import * as backend from "../backend/integrations"; |
||||||
|
import { handleNotLoggedIn, NotLoggedInError } from "../backend/request"; |
||||||
|
import { useAuth } from "../useAuth"; |
||||||
|
|
||||||
|
export type IntegrationState = { |
||||||
|
id: number, |
||||||
|
integration: Integration, |
||||||
|
properties: serverApi.CreateIntegrationRequest, |
||||||
|
}; |
||||||
|
export type IntegrationsState = IntegrationState[] | "Loading"; |
||||||
|
|
||||||
|
export function isIntegrationState(v: any) : v is IntegrationState { |
||||||
|
return 'id' in v && 'integration' in v && 'properties' in v; |
||||||
|
} |
||||||
|
|
||||||
|
export interface Integrations { |
||||||
|
state: IntegrationsState, |
||||||
|
addIntegration: (v: serverApi.CreateIntegrationRequest) => Promise<number>, |
||||||
|
deleteIntegration: (id: number) => Promise<void>, |
||||||
|
modifyIntegration: (id: number, v: serverApi.CreateIntegrationRequest) => Promise<void>, |
||||||
|
updateFromUpstream: () => Promise<void>, |
||||||
|
}; |
||||||
|
|
||||||
|
export const IntegrationClasses: Record<any, any> = { |
||||||
|
[serverApi.IntegrationType.SpotifyClientCredentials]: SpotifyClientCreds, |
||||||
|
} |
||||||
|
|
||||||
|
export function makeDefaultIntegrationProperties(type: serverApi.IntegrationType):
|
||||||
|
serverApi.CreateIntegrationRequest { |
||||||
|
switch(type) { |
||||||
|
case serverApi.IntegrationType.SpotifyClientCredentials: { |
||||||
|
return { |
||||||
|
name: "Spotify", |
||||||
|
type: type, |
||||||
|
details: { clientId: "" }, |
||||||
|
secretDetails: { clientSecret: "" }, |
||||||
|
} |
||||||
|
} |
||||||
|
default: { |
||||||
|
throw new Error("Unimplemented default integration.") |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function makeIntegration(p: serverApi.CreateIntegrationRequest, id: number) { |
||||||
|
switch(p.type) { |
||||||
|
case serverApi.IntegrationType.SpotifyClientCredentials: { |
||||||
|
return new SpotifyClientCreds(id); |
||||||
|
} |
||||||
|
default: { |
||||||
|
throw new Error("Unimplemented integration type.") |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const integrationsContext = createContext<Integrations>({ |
||||||
|
state: [], |
||||||
|
addIntegration: async () => 0, |
||||||
|
modifyIntegration: async () => { }, |
||||||
|
deleteIntegration: async () => { }, |
||||||
|
updateFromUpstream: async () => { }, |
||||||
|
}); |
||||||
|
|
||||||
|
export function ProvideIntegrations(props: { children: any }) { |
||||||
|
const integrations = useProvideIntegrations(); |
||||||
|
return <integrationsContext.Provider value={integrations}>{props.children}</integrationsContext.Provider>; |
||||||
|
} |
||||||
|
|
||||||
|
export const useIntegrations = () => { |
||||||
|
return useContext(integrationsContext); |
||||||
|
}; |
||||||
|
|
||||||
|
function useProvideIntegrations(): Integrations { |
||||||
|
let auth = useAuth(); |
||||||
|
enum IntegrationsActions { |
||||||
|
SetItem = "SetItem", |
||||||
|
Set = "Set", |
||||||
|
DeleteItem = "DeleteItem", |
||||||
|
AddItem = "AddItem", |
||||||
|
} |
||||||
|
let IntegrationsReducer = (state: IntegrationsState, action: any): IntegrationsState => { |
||||||
|
switch (action.type) { |
||||||
|
case IntegrationsActions.SetItem: { |
||||||
|
if (state !== "Loading") { |
||||||
|
return state.map((item: any) => { |
||||||
|
return (item.id === action.id) ? action.value : item; |
||||||
|
}) |
||||||
|
} |
||||||
|
return state; |
||||||
|
} |
||||||
|
case IntegrationsActions.Set: { |
||||||
|
return action.value; |
||||||
|
} |
||||||
|
case IntegrationsActions.DeleteItem: { |
||||||
|
if (state !== "Loading") { |
||||||
|
const newState = [...state]; |
||||||
|
return newState.filter((item: any) => item.id !== action.id); |
||||||
|
} |
||||||
|
return state; |
||||||
|
} |
||||||
|
case IntegrationsActions.AddItem: { |
||||||
|
return [...state, action.value]; |
||||||
|
} |
||||||
|
default: |
||||||
|
throw new Error("Unimplemented Integrations state update.") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const [state, dispatch] = useReducer(IntegrationsReducer, []) |
||||||
|
|
||||||
|
let updateFromUpstream = async () => { |
||||||
|
backend.getIntegrations() |
||||||
|
.then((integrations: serverApi.ListIntegrationsResponse) => { |
||||||
|
dispatch({ |
||||||
|
type: IntegrationsActions.Set, |
||||||
|
value: integrations.map((i: any) => { |
||||||
|
return { |
||||||
|
integration: new (IntegrationClasses[i.type])(i.id), |
||||||
|
properties: { ...i }, |
||||||
|
id: i.id, |
||||||
|
} |
||||||
|
}) |
||||||
|
}); |
||||||
|
}) |
||||||
|
.catch((e: NotLoggedInError) => handleNotLoggedIn(auth, e)); |
||||||
|
} |
||||||
|
|
||||||
|
let addIntegration = async (v: serverApi.CreateIntegrationRequest) => { |
||||||
|
const id = await backend.createIntegration(v); |
||||||
|
await updateFromUpstream(); |
||||||
|
return id; |
||||||
|
} |
||||||
|
|
||||||
|
let deleteIntegration = async (id: number) => { |
||||||
|
await backend.deleteIntegration(id); |
||||||
|
await updateFromUpstream(); |
||||||
|
} |
||||||
|
|
||||||
|
let modifyIntegration = async (id: number, v: serverApi.CreateIntegrationRequest) => { |
||||||
|
await backend.modifyIntegration(id, v); |
||||||
|
await updateFromUpstream(); |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (auth.user) { |
||||||
|
updateFromUpstream() |
||||||
|
} |
||||||
|
}, [auth]); |
||||||
|
|
||||||
|
return { |
||||||
|
state: state, |
||||||
|
addIntegration: addIntegration, |
||||||
|
modifyIntegration: modifyIntegration, |
||||||
|
deleteIntegration: deleteIntegration, |
||||||
|
updateFromUpstream: updateFromUpstream, |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue