mirror of
https://github.com/Unleash/unleash.git
synced 2024-12-22 19:07:54 +01:00
Client-side SDK access tokens info (#2485)
<!-- Thanks for creating a PR! To make it easier for reviewers and everyone else to understand what your changes relate to, please add some relevant content to the headings below. Feel free to ignore or delete sections that you don't think are relevant. Thank you! ❤️ --> ## About the changes Add fair use policy notifications. Closes [linear 1-347](https://linear.app/unleash/issue/1-347/frontend-add-information-about-endpoint-url-and-fair-use-policy-for) Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item: #1875
This commit is contained in:
Tymoteusz Czech
GitHub
parent
0943ff8f49
commit
b8012a5ad8
@ -17,26 +17,12 @@ export const useStyles = makeStyles()(theme => ({
|
||||
minWidth: '379px',
|
||||
},
|
||||
},
|
||||
radioGroup: {
|
||||
marginBottom: theme.spacing(2),
|
||||
},
|
||||
radioItem: {
|
||||
marginBottom: theme.spacing(1),
|
||||
},
|
||||
radio: {
|
||||
marginLeft: theme.spacing(1.5),
|
||||
},
|
||||
label: {
|
||||
minWidth: '300px',
|
||||
[theme.breakpoints.down(600)]: {
|
||||
minWidth: 'auto',
|
||||
},
|
||||
},
|
||||
buttonContainer: {
|
||||
marginTop: 'auto',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
cancelButton: {
|
||||
marginLeft: '1.5rem',
|
||||
},
|
||||
|
||||
@ -6,6 +6,8 @@ import {
|
||||
RadioGroup,
|
||||
Typography,
|
||||
Box,
|
||||
Link,
|
||||
Alert,
|
||||
} from '@mui/material';
|
||||
import { KeyboardArrowDownOutlined } from '@mui/icons-material';
|
||||
import React from 'react';
|
||||
@ -19,7 +21,6 @@ import { ApiTokenFormErrorType } from './useApiTokenForm';
|
||||
import { useStyles } from './ApiTokenForm.styles';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { TokenType } from 'interfaces/token';
|
||||
import { CorsTokenAlert } from 'component/admin/cors/CorsTokenAlert';
|
||||
|
||||
interface IApiTokenFormProps {
|
||||
username: string;
|
||||
@ -93,8 +94,22 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
|
||||
disabled: !environment.enabled,
|
||||
}));
|
||||
|
||||
const isUnleashCloud = Boolean(uiConfig?.flags?.UNLEASH_CLOUD);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className={styles.form}>
|
||||
<ConditionallyRender
|
||||
condition={isUnleashCloud}
|
||||
show={
|
||||
<Alert severity="info" sx={{ mb: 4 }}>
|
||||
Please be aware of our{' '}
|
||||
<Link href="https://www.getunleash.io/fair-use-policy">
|
||||
fair use policy
|
||||
</Link>
|
||||
.
|
||||
</Alert>
|
||||
}
|
||||
/>
|
||||
<div className={styles.container}>
|
||||
<p className={styles.inputDescription}>
|
||||
What would you like to call this token?
|
||||
@ -110,7 +125,7 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
|
||||
onFocus={() => clearErrors('username')}
|
||||
autoFocus
|
||||
/>
|
||||
<FormControl className={styles.radioGroup}>
|
||||
<FormControl sx={{ mb: 2, width: '100%' }}>
|
||||
<label id="token-type" className={styles.inputDescription}>
|
||||
What do you want to connect?
|
||||
</label>
|
||||
@ -125,10 +140,18 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
|
||||
<FormControlLabel
|
||||
key={key}
|
||||
value={key}
|
||||
className={styles.radioItem}
|
||||
control={<Radio className={styles.radio} />}
|
||||
sx={{ mb: 1 }}
|
||||
control={
|
||||
<Radio
|
||||
sx={{
|
||||
ml: 0.75,
|
||||
alignSelf: 'flex-start',
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<>
|
||||
<Box>
|
||||
<Box>
|
||||
<Typography>{label}</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
@ -136,7 +159,8 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
</>
|
||||
</Box>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
@ -169,20 +193,18 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
|
||||
className={styles.selectInput}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.buttonContainer}>
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: 'auto',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
<Button onClick={handleCancel} className={styles.cancelButton}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
<ConditionallyRender
|
||||
condition={type === TokenType.FRONTEND}
|
||||
show={
|
||||
<Box sx={{ mt: 4 }}>
|
||||
<CorsTokenAlert />
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,18 +1,23 @@
|
||||
import { Typography } from '@mui/material';
|
||||
import { Alert, Box, Typography } from '@mui/material';
|
||||
import { useNavigate, Link } from 'react-router-dom';
|
||||
import { useThemeStyles } from 'themes/themeStyles';
|
||||
import { Dialogue } from 'component/common/Dialogue/Dialogue';
|
||||
import { UserToken } from './UserToken/UserToken';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { TokenType } from 'interfaces/token';
|
||||
|
||||
interface IConfirmUserLink {
|
||||
open: boolean;
|
||||
closeConfirm: () => void;
|
||||
token: string;
|
||||
type?: string;
|
||||
}
|
||||
|
||||
export const ConfirmToken = ({
|
||||
open,
|
||||
closeConfirm,
|
||||
token,
|
||||
type,
|
||||
}: IConfirmUserLink) => {
|
||||
const { classes: themeStyles } = useThemeStyles();
|
||||
|
||||
@ -29,6 +34,20 @@ export const ConfirmToken = ({
|
||||
</Typography>
|
||||
<UserToken token={token} />
|
||||
</div>
|
||||
<ConditionallyRender
|
||||
condition={type === TokenType.FRONTEND}
|
||||
show={
|
||||
<Alert sx={{ mt: 2 }} severity="info">
|
||||
By default, all {TokenType.FRONTEND} tokens may be used
|
||||
from any CORS origin. If you'd like to configure a
|
||||
strict set of origins, please use the{' '}
|
||||
<Link to="/admin/cors" target="_blank">
|
||||
CORS origins configuration page
|
||||
</Link>
|
||||
.
|
||||
</Alert>
|
||||
}
|
||||
/>
|
||||
</Dialogue>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import FormTemplate from 'component/common/FormTemplate/FormTemplate';
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import FormTemplate from 'component/common/FormTemplate/FormTemplate';
|
||||
import ApiTokenForm from '../ApiTokenForm/ApiTokenForm';
|
||||
import { CreateButton } from 'component/common/CreateButton/CreateButton';
|
||||
import useApiTokensApi from 'hooks/api/actions/useApiTokensApi/useApiTokensApi';
|
||||
@ -8,7 +9,6 @@ import useToast from 'hooks/useToast';
|
||||
import { useApiTokenForm } from 'component/admin/apiToken/ApiTokenForm/useApiTokenForm';
|
||||
import { ADMIN } from 'component/providers/AccessProvider/permissions';
|
||||
import { ConfirmToken } from '../ConfirmToken/ConfirmToken';
|
||||
import { useState } from 'react';
|
||||
import { scrollToTop } from 'component/common/util';
|
||||
import { formatUnknownError } from 'utils/formatUnknownError';
|
||||
import { usePageTitle } from 'hooks/usePageTitle';
|
||||
@ -109,6 +109,7 @@ export const CreateApiToken = () => {
|
||||
open={showConfirm}
|
||||
closeConfirm={closeConfirm}
|
||||
token={token}
|
||||
type={type}
|
||||
/>
|
||||
</FormTemplate>
|
||||
);
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
import { TokenType } from 'interfaces/token';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Alert } from '@mui/material';
|
||||
|
||||
export const CorsTokenAlert = () => {
|
||||
return (
|
||||
<Alert sx={{ mt: 4 }} severity="info">
|
||||
By default, all {TokenType.FRONTEND} tokens may be used from any
|
||||
CORS origin. If you'd like to configure a strict set of origins,
|
||||
please use the{' '}
|
||||
<Link to="/admin/cors" target="_blank">
|
||||
CORS origins configuration page
|
||||
</Link>
|
||||
.
|
||||
</Alert>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user