packages/core: added OAuthRequestDialog

packages/core/src/components/OAuthRequestDialog/LoginRequestListItem.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  makeStyles,
+  Typography,
+  Theme,
+} from '@material-ui/core';
+import React, { FC, useState } from 'react';
+import { AuthRequest } from '../../api';
+
+const useItemStyles = makeStyles<Theme>((theme) => ({
+  root: {
+    paddingLeft: theme.spacing(3),
+  },
+}));
+
+type RowProps = {
+  request: AuthRequest;
+  busy: boolean;
+  setBusy: (busy: boolean) => void;
+};
+
+const LoginRequestListItem: FC<RowProps> = ({ request, busy, setBusy }) => {
+  const classes = useItemStyles();
+  const [error, setError] = useState<Error>();
+
+  const handleContinue = async () => {
+    setBusy(true);
+    try {
+      await request.triggerAuth();
+    } catch (e) {
+      setError(e);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const IconComponent = request.info.icon;
+
+  return (
+    <ListItem
+      button
+      disabled={busy}
+      onClick={handleContinue}
+      classes={{ root: classes.root }}
+    >
+      <ListItemAvatar>
+        <IconComponent fontSize="large" />
+      </ListItemAvatar>
+      <ListItemText
+        primary={request.info.title}
+        secondary={
+          error && (
+            <Typography color="error">
+              {error.message || 'An unspecified error occurred'}
+            </Typography>
+          )
+        }
+      />
+    </ListItem>
+  );
+};
+
+export default LoginRequestListItem;

packages/core/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  List,
+  makeStyles,
+  Theme,
+  Button,
+} from '@material-ui/core';
+import React, { FC, useMemo, useState } from 'react';
+import { useObservable } from 'react-use';
+import LoginRequestListItem from './LoginRequestListItem';
+import { useApi, oauthRequestApiRef } from '../../api';
+
+const useStyles = makeStyles<Theme>((theme) => ({
+  dialog: {
+    paddingTop: theme.spacing(1),
+  },
+  title: {
+    minWidth: 0,
+  },
+  contentList: {
+    padding: 0,
+  },
+}));
+
+type OAuthRequestDialogProps = {};
+
+export const OAuthRequestDialog: FC<OAuthRequestDialogProps> = () => {
+  const classes = useStyles();
+  const [busy, setBusy] = useState(false);
+  const oauthRequestApi = useApi(oauthRequestApiRef);
+  const requests = useObservable(
+    useMemo(() => oauthRequestApi.handleAuthRequests(), [oauthRequestApi]),
+    [],
+  );
+
+  const handleRejectAll = () => {
+    requests.forEach((request) => request.reject());
+  };
+
+  return (
+    <Dialog
+      open={Boolean(requests.length)}
+      fullWidth
+      maxWidth="xs"
+      classes={{ paper: classes.dialog }}
+    >
+      <DialogTitle classes={{ root: classes.title }}>
+        Login Required
+      </DialogTitle>
+
+      <DialogContent classes={{ root: classes.contentList }}>
+        <List>
+          {requests.map((request) => (
+            <LoginRequestListItem
+              key={request.info.title}
+              request={request}
+              busy={busy}
+              setBusy={setBusy}
+            />
+          ))}
+        </List>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={handleRejectAll}>Reject All</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

packages/core/src/components/OAuthRequestDialog/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { OAuthRequestDialog } from './OAuthRequestDialog';

packages/core/src/index.ts

@@ -33,6 +33,7 @@ export { default as HorizontalProgress } from './components/ProgressBars/Horizon
 export { default as CopyTextButton } from './components/CopyTextButton';
 export { default as Progress } from './components/Progress';
 export * from './components/SimpleStepper';
+export { OAuthRequestDialog } from './components/OAuthRequestDialog';
 export { AlphaLabel, BetaLabel } from './components/Lifecycle';
 export { default as SupportButton } from './components/SupportButton';
 export { default as Table, SubvalueCell } from './components/Table';