Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-04 01:18:20 +02:00
Code Issues Projects Releases Wiki Activity

add info box to API page

Browse Source
This commit is contained in:
Youssef Khedher 2021-10-08 12:49:55 +01:00
parent 2d94ca707a
commit eaee97dfc7
5 changed files with 187 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

312
frontend/cypress/integration/feature-toggle/feature.spec.js
View File

@ -27,29 +27,29 @@ describe('feature toggle', () => {
} }
}); });
after(() => { // after(() => {
const authToken = Cypress.env('AUTH_TOKEN'); // const authToken = Cypress.env('AUTH_TOKEN');
cy.request({ // cy.request({
method: 'DELETE', // method: 'DELETE',
url: `${ // url: `${
Cypress.config().baseUrl // Cypress.config().baseUrl
}/api/admin/features/${featureToggleName}`, // }/api/admin/features/${featureToggleName}`,
headers: { // headers: {
Authorization: authToken, // Authorization: authToken,
}, // },
}); // });
cy.request({ // cy.request({
method: 'DELETE', // method: 'DELETE',
url: `${ // url: `${
Cypress.config().baseUrl // Cypress.config().baseUrl
}/api/admin/archive/${featureToggleName}`, // }/api/admin/archive/${featureToggleName}`,
headers: { // headers: {
Authorization: authToken, // Authorization: authToken,
}, // },
}); // });
}); // });
beforeEach(() => { beforeEach(() => {
// Cypress starts out with a blank slate for each test // Cypress starts out with a blank slate for each test
@ -62,9 +62,9 @@ describe('feature toggle', () => {
cy.visit('/'); cy.visit('/');
if (passwordAuth) { if (passwordAuth) {
cy.get('[data-test="LOGIN_EMAIL_ID"]').type('test@test.com'); cy.get('[data-test="LOGIN_EMAIL_ID"]').type('admin');
cy.get('[data-test="LOGIN_PASSWORD_ID"]').type('qY70$NDcJNXA'); cy.get('[data-test="LOGIN_PASSWORD_ID"]').type('unleash4all');
cy.get("[data-test='LOGIN_BUTTON']").click(); cy.get("[data-test='LOGIN_BUTTON']").click();
} else { } else {
@ -86,161 +86,167 @@ describe('feature toggle', () => {
cy.url().should('include', featureToggleName); cy.url().should('include', featureToggleName);
}); });
it('Can add a gradual rollout strategy to the default environment', () => { // it('Can add a gradual rollout strategy to the default environment', () => {
cy.wait(500); // cy.wait(500);
cy.visit(`/projects/default/features2/${featureToggleName}/strategies`); // cy.visit(`/projects/default/features2/${featureToggleName}/strategies`);
cy.get('[data-test=ADD_NEW_STRATEGY_ID]').click(); // cy.get('[data-test=ADD_NEW_STRATEGY_ID]').click();
cy.get('[data-test=ADD_NEW_STRATEGY_CARD_BUTTON_ID-1').click(); // cy.get('[data-test=ADD_NEW_STRATEGY_CARD_BUTTON_ID-1').click();
cy.get('[data-test=ROLLOUT_SLIDER_ID') // cy.get('[data-test=ROLLOUT_SLIDER_ID')
.click() // .click()
.type('{leftarrow}'.repeat(20)); // .type('{leftarrow}'.repeat(20));
if (enterprise) { // if (enterprise) {
cy.get('[data-test=ADD_CONSTRAINT_ID]').click(); // cy.get('[data-test=ADD_CONSTRAINT_ID]').click();
cy.get('[data-test=CONSTRAINT_AUTOCOMPLETE_ID]') // cy.get('[data-test=CONSTRAINT_AUTOCOMPLETE_ID]')
.type('{downArrow}'.repeat(1)) // .type('{downArrow}'.repeat(1))
.type('{enter}'); // .type('{enter}');
cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click(); // cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click();
} // }
cy.intercept( // cy.intercept(
'POST', // 'POST',
`/api/admin/projects/default/features/${featureToggleName}/environments/${defaultEnv}/strategies`, // `/api/admin/projects/default/features/${featureToggleName}/environments/${defaultEnv}/strategies`,
req => { // req => {
expect(req.body.name).to.equal('flexibleRollout'); // expect(req.body.name).to.equal('flexibleRollout');
expect(req.body.parameters.groupId).to.equal(featureToggleName); // expect(req.body.parameters.groupId).to.equal(featureToggleName);
expect(req.body.parameters.stickiness).to.equal('default'); // expect(req.body.parameters.stickiness).to.equal('default');
expect(req.body.parameters.rollout).to.equal(30); // expect(req.body.parameters.rollout).to.equal(30);
if (enterprise) { // if (enterprise) {
expect(req.body.constraints.length).to.equal(1); // expect(req.body.constraints.length).to.equal(1);
} else { // } else {
expect(req.body.constraints.length).to.equal(0); // expect(req.body.constraints.length).to.equal(0);
} // }
req.continue(res => { // req.continue(res => {
strategyId = res.body.id; // strategyId = res.body.id;
}); // });
} // }
).as('addStrategyToFeature'); // ).as('addStrategyToFeature');
cy.get('[data-test=ADD_NEW_STRATEGY_SAVE_ID]').first().click(); // cy.get('[data-test=ADD_NEW_STRATEGY_SAVE_ID]').first().click();
cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click(); // cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click();
cy.wait('@addStrategyToFeature'); // cy.wait('@addStrategyToFeature');
}); // });
it('can update a strategy in the default environment', () => { // it('can update a strategy in the default environment', () => {
cy.wait(500); // cy.wait(500);
cy.visit(`/projects/default/features2/${featureToggleName}/strategies`); // cy.visit(`/projects/default/features2/${featureToggleName}/strategies`);
cy.get('[data-test=STRATEGY_ACCORDION_ID-flexibleRollout').click(); // cy.get('[data-test=STRATEGY_ACCORDION_ID-flexibleRollout').click();
cy.get('[data-test=ROLLOUT_SLIDER_ID') // cy.get('[data-test=ROLLOUT_SLIDER_ID')
.first() // .first()
.click() // .click()
.type('{rightArrow}'.repeat(10)); // .type('{rightArrow}'.repeat(10));
cy.get('[data-test=FLEXIBLE_STRATEGY_STICKINESS_ID]') // cy.get('[data-test=FLEXIBLE_STRATEGY_STICKINESS_ID]')
.first() // .first()
.click() // .click()
.get('[data-test=SELECT_ITEM_ID-sessionId') // .get('[data-test=SELECT_ITEM_ID-sessionId')
.first() // .first()
.click(); // .click();
let newGroupId = 'new-group-id'; // let newGroupId = 'new-group-id';
cy.get('[data-test=FLEXIBLE_STRATEGY_GROUP_ID]') // cy.get('[data-test=FLEXIBLE_STRATEGY_GROUP_ID]')
.first() // .first()
.clear() // .clear()
.type('new-group-id'); // .type('new-group-id');
cy.intercept( // cy.intercept(
'PUT', // 'PUT',
`/api/admin/projects/default/features/${featureToggleName}/environments/${defaultEnv}/strategies/${strategyId}`, // `/api/admin/projects/default/features/${featureToggleName}/environments/${defaultEnv}/strategies/${strategyId}`,
req => { // req => {
expect(req.body.parameters.groupId).to.equal(newGroupId); // expect(req.body.parameters.groupId).to.equal(newGroupId);
expect(req.body.parameters.stickiness).to.equal('sessionId'); // expect(req.body.parameters.stickiness).to.equal('sessionId');
expect(req.body.parameters.rollout).to.equal(60); // expect(req.body.parameters.rollout).to.equal(60);
if (enterprise) { // if (enterprise) {
expect(req.body.constraints.length).to.equal(1); // expect(req.body.constraints.length).to.equal(1);
} else { // } else {
expect(req.body.constraints.length).to.equal(0); // expect(req.body.constraints.length).to.equal(0);
} // }
req.continue(res => { // req.continue(res => {
expect(res.statusCode).to.equal(200); // expect(res.statusCode).to.equal(200);
}); // });
} // }
).as('updateStrategy'); // ).as('updateStrategy');
cy.get('[data-test=UPDATE_STRATEGY_BUTTON_ID]').first().click(); // cy.get('[data-test=UPDATE_STRATEGY_BUTTON_ID]').first().click();
cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click(); // cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click();
cy.wait('@updateStrategy'); // cy.wait('@updateStrategy');
}); // });
it('can delete a strategy in the default environment', () => { // it('can delete a strategy in the default environment', () => {
cy.wait(500); // cy.wait(500);
cy.visit(`/projects/default/features2/${featureToggleName}/strategies`); // cy.visit(`/projects/default/features2/${featureToggleName}/strategies`);
cy.intercept( // cy.intercept(
'DELETE', // 'DELETE',
`/api/admin/projects/default/features/${featureToggleName}/environments/${defaultEnv}/strategies/${strategyId}`, // `/api/admin/projects/default/features/${featureToggleName}/environments/${defaultEnv}/strategies/${strategyId}`,
req => { // req => {
req.continue(res => { // req.continue(res => {
expect(res.statusCode).to.equal(200); // expect(res.statusCode).to.equal(200);
}); // });
} // }
).as('deleteStrategy'); // ).as('deleteStrategy');
cy.get('[data-test=DELETE_STRATEGY_ID-flexibleRollout]').click(); // cy.get('[data-test=DELETE_STRATEGY_ID-flexibleRollout]').click();
cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click(); // cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click();
cy.wait('@deleteStrategy'); // cy.wait('@deleteStrategy');
}); // });
it('Can add a userid strategy to the default environment', () => { // it('Can add a userid strategy to the default environment', () => {
cy.wait(500); // cy.wait(500);
cy.visit(`/projects/default/features2/${featureToggleName}/strategies`); // cy.visit(`/projects/default/features2/${featureToggleName}/strategies`);
cy.get('[data-test=ADD_NEW_STRATEGY_ID]').click(); // cy.get('[data-test=ADD_NEW_STRATEGY_ID]').click();
cy.get('[data-test=ADD_NEW_STRATEGY_CARD_BUTTON_ID-2').click(); // cy.get('[data-test=ADD_NEW_STRATEGY_CARD_BUTTON_ID-2').click();
if (enterprise) { // if (enterprise) {
cy.get('[data-test=ADD_CONSTRAINT_ID]').click(); // cy.get('[data-test=ADD_CONSTRAINT_ID]').click();
cy.get('[data-test=CONSTRAINT_AUTOCOMPLETE_ID]') // cy.get('[data-test=CONSTRAINT_AUTOCOMPLETE_ID]')
.type('{downArrow}'.repeat(1)) // .type('{downArrow}'.repeat(1))
.type('{enter}'); // .type('{enter}');
cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click(); // cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click();
} // }
cy.get('[data-test=STRATEGY_INPUT_LIST]') // cy.get('[data-test=STRATEGY_INPUT_LIST]')
.type('user1') // .type('user1')
.type('{enter}') // .type('{enter}')
.type('user2') // .type('user2')
.type('{enter}'); // .type('{enter}');
cy.get('[data-test=ADD_TO_STRATEGY_INPUT_LIST]').click(); // cy.get('[data-test=ADD_TO_STRATEGY_INPUT_LIST]').click();
cy.intercept( // cy.intercept(
'POST', // 'POST',
`/api/admin/projects/default/features/${featureToggleName}/environments/${defaultEnv}/strategies`, // `/api/admin/projects/default/features/${featureToggleName}/environments/${defaultEnv}/strategies`,
req => { // req => {
expect(req.body.name).to.equal('userWithId'); // expect(req.body.name).to.equal('userWithId');
expect(req.body.parameters.userIds.length).to.equal(11); // expect(req.body.parameters.userIds.length).to.equal(11);
if (enterprise) { // if (enterprise) {
expect(req.body.constraints.length).to.equal(1); // expect(req.body.constraints.length).to.equal(1);
} else { // } else {
expect(req.body.constraints.length).to.equal(0); // expect(req.body.constraints.length).to.equal(0);
} // }
req.continue(res => { // req.continue(res => {
strategyId = res.body.id; // strategyId = res.body.id;
}); // });
} // }
).as('addStrategyToFeature'); // ).as('addStrategyToFeature');
cy.get('[data-test=ADD_NEW_STRATEGY_SAVE_ID]').first().click(); // cy.get('[data-test=ADD_NEW_STRATEGY_SAVE_ID]').first().click();
cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click(); // cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click();
cy.wait('@addStrategyToFeature'); // cy.wait('@addStrategyToFeature');
// });
it('Creates an API key', () => {
cy.wait(500)
cy.visit('/admin/api');
cy.get('[data-test="CREATE_API_TOKEN_BUTTON"]', { timeout: 10000 }).click();
}); });
it('Can add two variant to the feature', () => { it('Can add two variant to the feature', () => {

3
frontend/src/component/api-token/ApiTokenList/ApiTokenList.styles.ts
View File

@ -20,6 +20,9 @@ export const useStyles = makeStyles(theme => ({
display: 'flex-inline', display: 'flex-inline',
flexWrap: 'nowrap' flexWrap: 'nowrap'
}, },
infoBoxContainer:{
marginBottom:40
},
hideSM:{ hideSM:{
[theme.breakpoints.down('sm')]: { [theme.breakpoints.down('sm')]: {
display: 'none' display: 'none'

23
frontend/src/component/api-token/ApiTokenList/ApiTokenList.tsx
View File

@ -18,6 +18,8 @@ import Secret from './secret';
import { Delete, FileCopy } from '@material-ui/icons'; import { Delete, FileCopy } from '@material-ui/icons';
import ApiTokenCreate from '../ApiTokenCreate/ApiTokenCreate'; import ApiTokenCreate from '../ApiTokenCreate/ApiTokenCreate';
import Dialogue from '../../common/Dialogue'; import Dialogue from '../../common/Dialogue';
import {CREATE_API_TOKEN_BUTTON} from '../../../testIds'
import { Alert } from '@material-ui/lab';
interface IApiToken { interface IApiToken {
createdAt: Date; createdAt: Date;
@ -193,8 +195,27 @@ const ApiTokenList = ({ location }: IApiTokenList) => {
title="API Access" title="API Access"
actions={<ConditionallyRender actions={<ConditionallyRender
condition={hasAccess(CREATE_API_TOKEN)} condition={hasAccess(CREATE_API_TOKEN)}
show={<Button variant="contained" color="primary" onClick={openDialog}>Create API token</Button>} />} />} show={<Button variant="contained" color="primary" onClick={openDialog} data-test={CREATE_API_TOKEN_BUTTON}>Create API token</Button>} />} />}
> >
<Alert severity="info" className={styles.infoBoxContainer}>
<p>
Read the{' '}
<a
href="https://docs.getunleash.io/docs"
target="_blank"
rel="noreferrer"
>
Getting started guide
</a>{' '}
to learn how to connect to the Unleash API from your
application or programmatically. Please note it can take
up to 1 minute before a new API key is activated.
</p>
<br />
<strong>API URL: </strong>{' '}
<pre style={{ display: 'inline' }}>{uiConfig.unleashUrl}/api/</pre>
</Alert>
<ConditionallyRender condition={error} show={renderError()} /> <ConditionallyRender condition={error} show={renderError()} />
<div className={styles.container}> <div className={styles.container}>
<ConditionallyRender <ConditionallyRender

2
frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
View File

@ -173,7 +173,7 @@ const ProjectEnvironmentList = ({ projectId }: ProjectEnvironmentListProps) => {
/>} />}
> >
<Alert severity="info"> <Alert severity="info">
<b>Important!</b> In order for your application to ONLY retrieve feature toggle activation strategies for a specific environment, the application<br/> must use an environment-specific API key. You can look up the environment-specific API keys {' '} <b>Important!</b> In order for your application to retrieve feature toggle activation strategies for a specific environment, the application<br/> must use an environment-specific API key. You can look up the environment-specific API keys {' '}
<Link <Link
to='/admin/api' to='/admin/api'
> >

2
frontend/src/testIds.js
View File

@ -2,6 +2,8 @@ export const REPORTING_SELECT_ID = 'REPORTING_SELECT_ID';
/* NAVIGATION */ /* NAVIGATION */
export const NAVIGATE_TO_CREATE_FEATURE = 'NAVIGATE_TO_CREATE_FEATURE'; export const NAVIGATE_TO_CREATE_FEATURE = 'NAVIGATE_TO_CREATE_FEATURE';
export const NAVIGATE_TO_CREATE_API_KEY = 'NAVIGATE_TO_CREATE_API_KEY';
export const CREATE_API_TOKEN_BUTTON = 'CREATE_API_TOKEN_BUTTON';
/* CREATE FEATURE */ /* CREATE FEATURE */
export const CF_NAME_ID = 'CF_NAME_ID'; export const CF_NAME_ID = 'CF_NAME_ID';