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

frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.styles.ts

@@ -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',
     },

frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx

@@ -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}
+                                sx={{ mb: 1 }}
-                                control={<Radio className={styles.radio} />}
+                                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>
     );
 };

frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx

@@ -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>
     );
 };

frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.tsx

@@ -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>
     );

frontend/src/component/admin/cors/CorsTokenAlert.tsx

@@ -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>
-    );
-};