diff --git a/.do/deploy.template.yaml b/.do/deploy.template.yaml index 01db7d9001..9caa166a43 100644 --- a/.do/deploy.template.yaml +++ b/.do/deploy.template.yaml @@ -1,18 +1,18 @@ spec: name: unleash services: - - name: unleash-server - git: - branch: main - repo_clone_url: https://github.com/Unleash/unleash.git - build_command: 'yarn build' - run_command: 'yarn start' - envs: - - key: DATABASE_URL - scope: RUN_TIME - value: ${unleash-db.DATABASE_URL} - - key: UNLEASH_URL - scope: RUN_TIME - value: ${APP_URL} + - name: unleash-server + git: + branch: main + repo_clone_url: https://github.com/Unleash/unleash.git + build_command: 'yarn build' + run_command: 'yarn start' + envs: + - key: DATABASE_URL + scope: RUN_TIME + value: ${unleash-db.DATABASE_URL} + - key: UNLEASH_URL + scope: RUN_TIME + value: ${APP_URL} databases: - - name: unleash-db + - name: unleash-db diff --git a/src/lib/openapi/index.ts b/src/lib/openapi/index.ts index 3084503d78..0066627a04 100644 --- a/src/lib/openapi/index.ts +++ b/src/lib/openapi/index.ts @@ -49,6 +49,10 @@ import { validateTagTypeSchema } from './spec/validate-tag-type-schema'; import { variantSchema } from './spec/variant-schema'; import { variantsSchema } from './spec/variants-schema'; import { versionSchema } from './spec/version-schema'; +import { addonSchema } from './spec/addon-schema'; +import { addonsSchema } from './spec/addons-schema'; +import { addonParameterSchema } from './spec/addon-parameter-schema'; +import { addonTypeSchema } from './spec/addon-type-schema'; import { applicationSchema } from './spec/application-schema'; import { applicationsSchema } from './spec/applications-schema'; import { tagWithVersionSchema } from './spec/tag-with-version-schema'; @@ -60,6 +64,10 @@ import { exportParametersSchema } from './spec/export-parameters-schema'; // All schemas in `openapi/spec` should be listed here. export const schemas = { + addonSchema, + addonsSchema, + addonTypeSchema, + addonParameterSchema, apiTokenSchema, apiTokensSchema, applicationSchema, diff --git a/src/lib/openapi/spec/addon-parameter-schema.ts b/src/lib/openapi/spec/addon-parameter-schema.ts new file mode 100644 index 0000000000..640da55e67 --- /dev/null +++ b/src/lib/openapi/spec/addon-parameter-schema.ts @@ -0,0 +1,33 @@ +import { FromSchema } from 'json-schema-to-ts'; + +export const addonParameterSchema = { + $id: '#/components/schemas/addonParameterSchema', + type: 'object', + required: ['name', 'displayName', 'type', 'required', 'sensitive'], + properties: { + name: { + type: 'string', + }, + displayName: { + type: 'string', + }, + type: { + type: 'string', + }, + description: { + type: 'string', + }, + placeholder: { + type: 'string', + }, + required: { + type: 'boolean', + }, + sensitive: { + type: 'boolean', + }, + }, + components: {}, +} as const; + +export type AddonParameterSchema = FromSchema; diff --git a/src/lib/openapi/spec/addon-schema.test.ts b/src/lib/openapi/spec/addon-schema.test.ts new file mode 100644 index 0000000000..f75b9798b8 --- /dev/null +++ b/src/lib/openapi/spec/addon-schema.test.ts @@ -0,0 +1,17 @@ +import { validateSchema } from '../validate'; +import { AddonSchema } from './addon-schema'; + +test('addonSchema', () => { + const data: AddonSchema = { + provider: 'some-provider', + enabled: true, + parameters: { + someKey: 'some-value', + }, + events: ['some-event'], + }; + + expect( + validateSchema('#/components/schemas/addonSchema', data), + ).toBeUndefined(); +}); diff --git a/src/lib/openapi/spec/addon-schema.ts b/src/lib/openapi/spec/addon-schema.ts new file mode 100644 index 0000000000..88194e175b --- /dev/null +++ b/src/lib/openapi/spec/addon-schema.ts @@ -0,0 +1,39 @@ +import { FromSchema } from 'json-schema-to-ts'; + +export const addonSchema = { + $id: '#/components/schemas/addonSchema', + type: 'object', + required: ['provider', 'enabled', 'parameters', 'events'], + properties: { + id: { + type: 'number', + }, + createdAt: { + type: 'string', + format: 'date-time', + nullable: true, + }, + provider: { + type: 'string', + }, + description: { + type: 'string', + }, + enabled: { + type: 'boolean', + }, + parameters: { + type: 'object', + additionalProperties: true, + }, + events: { + type: 'array', + items: { + type: 'string', + }, + }, + }, + components: {}, +} as const; + +export type AddonSchema = FromSchema; diff --git a/src/lib/openapi/spec/addon-type-schema.ts b/src/lib/openapi/spec/addon-type-schema.ts new file mode 100644 index 0000000000..e25b820cb2 --- /dev/null +++ b/src/lib/openapi/spec/addon-type-schema.ts @@ -0,0 +1,49 @@ +import { FromSchema } from 'json-schema-to-ts'; +import { addonParameterSchema } from './addon-parameter-schema'; +import { tagTypeSchema } from './tag-type-schema'; + +export const addonTypeSchema = { + $id: '#/components/schemas/addonTypeSchema', + type: 'object', + required: ['name', 'displayName', 'documentationUrl', 'description'], + properties: { + name: { + type: 'string', + }, + displayName: { + type: 'string', + }, + documentationUrl: { + type: 'string', + }, + description: { + type: 'string', + }, + tagTypes: { + type: 'array', + items: { + $ref: '#/components/schemas/tagTypeSchema', + }, + }, + parameters: { + type: 'array', + items: { + $ref: '#/components/schemas/addonParameterSchema', + }, + }, + events: { + type: 'array', + items: { + type: 'string', + }, + }, + }, + components: { + schemas: { + tagTypeSchema, + addonParameterSchema, + }, + }, +} as const; + +export type AddonTypeSchema = FromSchema; diff --git a/src/lib/openapi/spec/addons-schema.test.ts b/src/lib/openapi/spec/addons-schema.test.ts new file mode 100644 index 0000000000..0369cf7980 --- /dev/null +++ b/src/lib/openapi/spec/addons-schema.test.ts @@ -0,0 +1,36 @@ +import { validateSchema } from '../validate'; +import { AddonsSchema } from './addons-schema'; + +test('addonsSchema', () => { + const data: AddonsSchema = { + addons: [ + { + parameters: { someKey: 'some-value' }, + events: ['some-event'], + enabled: true, + provider: 'some-name', + }, + ], + providers: [ + { + name: 'some-name', + displayName: 'some-display-name', + documentationUrl: 'some-url', + description: 'some-description', + parameters: [ + { + name: 'some-name', + displayName: 'some-display-name', + type: 'some-type', + required: true, + sensitive: true, + }, + ], + }, + ], + }; + + expect( + validateSchema('#/components/schemas/addonsSchema', data), + ).toBeUndefined(); +}); diff --git a/src/lib/openapi/spec/addons-schema.ts b/src/lib/openapi/spec/addons-schema.ts new file mode 100644 index 0000000000..a59757f5b2 --- /dev/null +++ b/src/lib/openapi/spec/addons-schema.ts @@ -0,0 +1,35 @@ +import { FromSchema } from 'json-schema-to-ts'; +import { addonSchema } from './addon-schema'; +import { addonTypeSchema } from './addon-type-schema'; +import { addonParameterSchema } from './addon-parameter-schema'; +import { tagTypeSchema } from './tag-type-schema'; + +export const addonsSchema = { + $id: '#/components/schemas/addonsSchema', + type: 'object', + required: ['addons', 'providers'], + properties: { + addons: { + type: 'array', + items: { + $ref: '#/components/schemas/addonSchema', + }, + }, + providers: { + type: 'array', + items: { + $ref: '#/components/schemas/addonTypeSchema', + }, + }, + }, + components: { + schemas: { + addonSchema, + addonTypeSchema, + tagTypeSchema, + addonParameterSchema, + }, + }, +} as const; + +export type AddonsSchema = FromSchema; diff --git a/src/lib/routes/admin-api/addon.ts b/src/lib/routes/admin-api/addon.ts index fc43adea08..724b976d8f 100644 --- a/src/lib/routes/admin-api/addon.ts +++ b/src/lib/routes/admin-api/addon.ts @@ -1,79 +1,186 @@ import { Request, Response } from 'express'; import Controller from '../controller'; -import { IUnleashConfig } from '../../types/option'; -import { IUnleashServices } from '../../types/services'; +import { IUnleashConfig, IUnleashServices } from '../../types'; import { Logger } from '../../logger'; import AddonService from '../../services/addon-service'; import { extractUsername } from '../../util/extract-user'; import { CREATE_ADDON, - UPDATE_ADDON, DELETE_ADDON, + NONE, + UPDATE_ADDON, } from '../../types/permissions'; import { IAuthRequest } from '../unleash-types'; +import { createRequestSchema, createResponseSchema } from '../../openapi'; +import { OpenApiService } from '../../services/openapi-service'; +import { emptyResponse } from '../../openapi/spec/empty-response'; +import { AddonSchema, addonSchema } from '../../openapi/spec/addon-schema'; +import { serializeDates } from '../../types/serialize-dates'; +import { AddonsSchema, addonsSchema } from '../../openapi/spec/addons-schema'; + +type AddonServices = Pick; + +const PATH = '/'; class AddonController extends Controller { private logger: Logger; private addonService: AddonService; + private openApiService: OpenApiService; + constructor( config: IUnleashConfig, - { addonService }: Pick, + { addonService, openApiService }: AddonServices, ) { super(config); this.logger = config.getLogger('/admin-api/addon.ts'); this.addonService = addonService; + this.openApiService = openApiService; - this.get('/', this.getAddons); - this.post('/', this.createAddon, CREATE_ADDON); - this.get('/:id', this.getAddon); - this.put('/:id', this.updateAddon, UPDATE_ADDON); - this.delete('/:id', this.deleteAddon, DELETE_ADDON); + this.route({ + method: 'get', + path: '', + permission: NONE, + handler: this.getAddons, + middleware: [ + openApiService.validPath({ + tags: ['admin'], + operationId: 'getAddons', + responses: { + 200: createResponseSchema('addonsSchema'), + }, + }), + ], + }); + + this.route({ + method: 'post', + path: '', + handler: this.createAddon, + permission: CREATE_ADDON, + middleware: [ + openApiService.validPath({ + tags: ['admin'], + operationId: 'createAddon', + requestBody: createRequestSchema('addonSchema'), + responses: { 200: createResponseSchema('addonSchema') }, + }), + ], + }); + + this.route({ + method: 'get', + path: `${PATH}:id`, + handler: this.getAddon, + permission: NONE, + middleware: [ + openApiService.validPath({ + tags: ['admin'], + operationId: 'getAddon', + responses: { 200: createResponseSchema('addonSchema') }, + }), + ], + }); + + this.route({ + method: 'put', + path: `${PATH}:id`, + handler: this.updateAddon, + permission: UPDATE_ADDON, + middleware: [ + openApiService.validPath({ + tags: ['admin'], + operationId: 'updateAddon', + requestBody: createRequestSchema('addonSchema'), + responses: { 200: createResponseSchema('addonSchema') }, + }), + ], + }); + + this.route({ + method: 'delete', + path: `${PATH}:id`, + handler: this.deleteAddon, + acceptAnyContentType: true, + permission: DELETE_ADDON, + middleware: [ + openApiService.validPath({ + tags: ['admin'], + operationId: 'deleteAddon', + responses: { 200: emptyResponse }, + }), + ], + }); } - async getAddons(req: Request, res: Response): Promise { + async getAddons(req: Request, res: Response): Promise { const addons = await this.addonService.getAddons(); const providers = this.addonService.getProviderDefinitions(); - res.json({ addons, providers }); + + this.openApiService.respondWithValidation(200, res, addonsSchema.$id, { + addons: serializeDates(addons), + providers: serializeDates(providers), + }); } async getAddon( req: Request<{ id: number }, any, any, any>, - res: Response, + res: Response, ): Promise { const { id } = req.params; const addon = await this.addonService.getAddon(id); - res.json(addon); + this.openApiService.respondWithValidation( + 200, + res, + addonSchema.$id, + serializeDates(addon), + ); } async updateAddon( req: IAuthRequest<{ id: number }, any, any, any>, - res: Response, + res: Response, ): Promise { const { id } = req.params; const createdBy = extractUsername(req); const data = req.body; const addon = await this.addonService.updateAddon(id, data, createdBy); - res.status(200).json(addon); + + this.openApiService.respondWithValidation( + 200, + res, + addonSchema.$id, + serializeDates(addon), + ); } - async createAddon(req: IAuthRequest, res: Response): Promise { + async createAddon( + req: IAuthRequest, + res: Response, + ): Promise { const createdBy = extractUsername(req); const data = req.body; const addon = await this.addonService.createAddon(data, createdBy); - res.status(201).json(addon); + + this.openApiService.respondWithValidation( + 201, + res, + addonSchema.$id, + serializeDates(addon), + ); } async deleteAddon( req: IAuthRequest<{ id: number }, any, any, any>, - res: Response, + res: Response, ): Promise { const { id } = req.params; const username = extractUsername(req); await this.addonService.removeAddon(id, username); + res.status(200).end(); } } diff --git a/src/lib/services/addon-service.ts b/src/lib/services/addon-service.ts index dc851f1e1a..74f5f9fab0 100644 --- a/src/lib/services/addon-service.ts +++ b/src/lib/services/addon-service.ts @@ -9,8 +9,7 @@ import { IFeatureToggleStore } from '../types/stores/feature-toggle-store'; import { Logger } from '../logger'; import TagTypeService from './tag-type-service'; import { IAddon, IAddonDto, IAddonStore } from '../types/stores/addon-store'; -import { IUnleashStores } from '../types/stores'; -import { IUnleashConfig } from '../types/option'; +import { IUnleashStores, IUnleashConfig } from '../types'; import { IAddonDefinition } from '../types/model'; import { minutesToMilliseconds } from 'date-fns'; @@ -196,7 +195,7 @@ export default class AddonService { id: number, data: IAddonDto, userName: string, - ): Promise { + ): Promise { const addonConfig = await addonSchema.validateAsync(data); await this.validateRequiredParameters(addonConfig); if (this.sensitiveParams[addonConfig.provider].length > 0) { @@ -214,13 +213,14 @@ export default class AddonService { {}, ); } - await this.addonStore.update(id, addonConfig); + const result = await this.addonStore.update(id, addonConfig); await this.eventStore.store({ type: events.ADDON_CONFIG_UPDATED, createdBy: userName, data: { id, provider: addonConfig.provider }, }); this.logger.info(`User ${userName} updated addon ${id}`); + return result; } async removeAddon(id: number, userName: string): Promise { diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts index 6ba2953b55..8fd7319616 100644 --- a/src/lib/types/index.ts +++ b/src/lib/types/index.ts @@ -1,2 +1,3 @@ export * from './services'; export * from './stores'; +export * from './option'; diff --git a/src/lib/types/stores/addon-store.ts b/src/lib/types/stores/addon-store.ts index 7dadb54fb5..c0864b23b5 100644 --- a/src/lib/types/stores/addon-store.ts +++ b/src/lib/types/stores/addon-store.ts @@ -4,7 +4,7 @@ export interface IAddonDto { provider: string; description: string; enabled: boolean; - parameters: object; + parameters: Record; events: string[]; } diff --git a/src/test/e2e/api/openapi/__snapshots__/openapi.e2e.test.ts.snap b/src/test/e2e/api/openapi/__snapshots__/openapi.e2e.test.ts.snap index 906abc5dbb..232d1f1de3 100644 --- a/src/test/e2e/api/openapi/__snapshots__/openapi.e2e.test.ts.snap +++ b/src/test/e2e/api/openapi/__snapshots__/openapi.e2e.test.ts.snap @@ -51,6 +51,139 @@ exports[`should serve the OpenAPI spec 1`] = ` Object { "components": Object { "schemas": Object { + "addonParameterSchema": Object { + "properties": Object { + "description": Object { + "type": "string", + }, + "displayName": Object { + "type": "string", + }, + "name": Object { + "type": "string", + }, + "placeholder": Object { + "type": "string", + }, + "required": Object { + "type": "boolean", + }, + "sensitive": Object { + "type": "boolean", + }, + "type": Object { + "type": "string", + }, + }, + "required": Array [ + "name", + "displayName", + "type", + "required", + "sensitive", + ], + "type": "object", + }, + "addonSchema": Object { + "properties": Object { + "createdAt": Object { + "format": "date-time", + "nullable": true, + "type": "string", + }, + "description": Object { + "type": "string", + }, + "enabled": Object { + "type": "boolean", + }, + "events": Object { + "items": Object { + "type": "string", + }, + "type": "array", + }, + "id": Object { + "type": "number", + }, + "parameters": Object { + "additionalProperties": true, + "type": "object", + }, + "provider": Object { + "type": "string", + }, + }, + "required": Array [ + "provider", + "enabled", + "parameters", + "events", + ], + "type": "object", + }, + "addonTypeSchema": Object { + "properties": Object { + "description": Object { + "type": "string", + }, + "displayName": Object { + "type": "string", + }, + "documentationUrl": Object { + "type": "string", + }, + "events": Object { + "items": Object { + "type": "string", + }, + "type": "array", + }, + "name": Object { + "type": "string", + }, + "parameters": Object { + "items": Object { + "$ref": "#/components/schemas/addonParameterSchema", + }, + "type": "array", + }, + "tagTypes": Object { + "items": Object { + "$ref": "#/components/schemas/tagTypeSchema", + }, + "type": "array", + }, + }, + "required": Array [ + "name", + "displayName", + "documentationUrl", + "description", + ], + "type": "object", + }, + "addonsSchema": Object { + "properties": Object { + "addons": Object { + "items": Object { + "$ref": "#/components/schemas/addonSchema", + }, + "type": "array", + }, + "providers": Object { + "items": Object { + "$ref": "#/components/schemas/addonTypeSchema", + }, + "type": "array", + }, + }, + "required": Array [ + "addons", + "providers", + ], + "type": "object", + }, "apiTokenSchema": Object { "additionalProperties": false, "properties": Object { @@ -1497,6 +1630,145 @@ Object { }, "openapi": "3.0.3", "paths": Object { + "/api/admin/addons": Object { + "get": Object { + "operationId": "getAddons", + "responses": Object { + "200": Object { + "content": Object { + "application/json": Object { + "schema": Object { + "$ref": "#/components/schemas/addonsSchema", + }, + }, + }, + "description": "addonsSchema", + }, + }, + "tags": Array [ + "admin", + ], + }, + "post": Object { + "operationId": "createAddon", + "requestBody": Object { + "content": Object { + "application/json": Object { + "schema": Object { + "$ref": "#/components/schemas/addonSchema", + }, + }, + }, + "description": "addonSchema", + "required": true, + }, + "responses": Object { + "200": Object { + "content": Object { + "application/json": Object { + "schema": Object { + "$ref": "#/components/schemas/addonSchema", + }, + }, + }, + "description": "addonSchema", + }, + }, + "tags": Array [ + "admin", + ], + }, + }, + "/api/admin/addons/{id}": Object { + "delete": Object { + "operationId": "deleteAddon", + "parameters": Array [ + Object { + "in": "path", + "name": "id", + "required": true, + "schema": Object { + "type": "string", + }, + }, + ], + "responses": Object { + "200": Object { + "description": "emptyResponse", + }, + }, + "tags": Array [ + "admin", + ], + }, + "get": Object { + "operationId": "getAddon", + "parameters": Array [ + Object { + "in": "path", + "name": "id", + "required": true, + "schema": Object { + "type": "string", + }, + }, + ], + "responses": Object { + "200": Object { + "content": Object { + "application/json": Object { + "schema": Object { + "$ref": "#/components/schemas/addonSchema", + }, + }, + }, + "description": "addonSchema", + }, + }, + "tags": Array [ + "admin", + ], + }, + "put": Object { + "operationId": "updateAddon", + "parameters": Array [ + Object { + "in": "path", + "name": "id", + "required": true, + "schema": Object { + "type": "string", + }, + }, + ], + "requestBody": Object { + "content": Object { + "application/json": Object { + "schema": Object { + "$ref": "#/components/schemas/addonSchema", + }, + }, + }, + "description": "addonSchema", + "required": true, + }, + "responses": Object { + "200": Object { + "content": Object { + "application/json": Object { + "schema": Object { + "$ref": "#/components/schemas/addonSchema", + }, + }, + }, + "description": "addonSchema", + }, + }, + "tags": Array [ + "admin", + ], + }, + }, "/api/admin/api-tokens": Object { "get": Object { "operationId": "getAllApiTokens", diff --git a/website/docs/user_guide/create-feature-toggle.md b/website/docs/user_guide/create-feature-toggle.md index 5c015da4f2..6ff89835aa 100644 --- a/website/docs/user_guide/create-feature-toggle.md +++ b/website/docs/user_guide/create-feature-toggle.md @@ -8,6 +8,7 @@ title: How to create a feature toggle You can perform every action both via the UI and the admin API. This guide includes screenshots to highlight the relevant UI controls and links to the relevant API methods for each step. This guide is split into three sections: + 1. [Prerequisites](#prerequisites): you need these before you can create a toggle. 2. [Required steps](#required-steps): all the required steps to create a toggle and activate it in production. 3. [Optional steps](#optional-steps): optional steps you can take to further target and configure your feature toggle and its audience. @@ -15,6 +16,7 @@ This guide is split into three sections: ## Prerequisites To be able to create a feature toggle in an Unleash system you will need: + - A running Unleash instance - A project to hold the toggle - A user with an **editor** or **admin** role OR a user with the following permissions inside the target project: @@ -44,7 +46,6 @@ Use the [Admin API endpoint for creating a feature toggle](../api/admin/feature- In the project that you want to create the toggle in, use the "new feature toggle" button and fill the form out with your desired configuration. Refer to the [feature toggle reference documentation](../reference/feature-toggles.mdx) for the full list of configuration options and explanations. - ![](/img/create-toggle-new-toggle.png) ### Step 2: Add a strategy {#step-2} @@ -77,14 +78,12 @@ These optional steps allow you to further configure your feature toggles to add ### Add constraints and segmentation - -Constraints and segmentation allow you to set filters on your strategies, so that they will only be evaluated for users and applications that match the specified preconditions. Refer to the [strategy constraints](../advanced/strategy-constraints.md "strategy constraints reference documentation") and [segments reference documentation](../reference/segments.mdx) for more information. +Constraints and segmentation allow you to set filters on your strategies, so that they will only be evaluated for users and applications that match the specified preconditions. Refer to the [strategy constraints](../advanced/strategy-constraints.md 'strategy constraints reference documentation') and [segments reference documentation](../reference/segments.mdx) for more information. To add constraints and segmentation, use the "edit strategy" button for the desired strategy. ![](/img/create-toggle-edit-strategy.png) - #### Constraints :::info @@ -95,13 +94,12 @@ Constraints aren't fixed and can be changed later to further narrow your audienc :::tip API: Add constraints -You can either [add constraints when you add the strategy](../api/admin/feature-toggles-api-v2.md#add-strategy) or [PUT](../api/admin/feature-toggles-api-v2.md#update-strategy "PUT an activation strategy") or [PATCH the strategy afterwards](../api/admin/feature-toggles-api-v2.md#put-strategy) +You can either [add constraints when you add the strategy](../api/admin/feature-toggles-api-v2.md#add-strategy) or [PUT](../api/admin/feature-toggles-api-v2.md#update-strategy 'PUT an activation strategy') or [PATCH the strategy afterwards](../api/admin/feature-toggles-api-v2.md#put-strategy) ::: In the strategy configuration screen for the strategy that you want to configure, use the "add custom constraint" button to add a custom constraint. - ![](/img/create-toggle-add-constraint.png) #### Segments @@ -114,16 +112,16 @@ This can be done after you have created a strategy. :::tip API: add segments -Use the [API for adding segments to a strategy](../api/admin/segments.mdx#replace-activation-strategy-segments) to add segments to your strategy. +Use the [API for adding segments to a strategy](../api/admin/segments.mdx#replace-activation-strategy-segments) to add segments to your strategy. ::: - In the strategy configuration screen for the strategy that you want to configure, use the "select segments" dropdown to add segments. ![](/img/create-toggle-add-segment.png) ### Add variants + :::info This can be done at any point after you've created your toggle. @@ -132,12 +130,10 @@ This can be done at any point after you've created your toggle. :::tip API: add variants - Use the [update variants endpoint](../api/admin/feature-toggles-api-v2.md#update-variants). The payload should be your desired variant configuration. ::: -[Variants](../advanced/feature-toggle-variants.md) give you the ability to further target your users and split them into groups of your choosing, such as for A/B testing. -On the toggle overview page, select the variants tab. Use the "new variant" button to add the variants that you want. +[Variants](../advanced/feature-toggle-variants.md) give you the ability to further target your users and split them into groups of your choosing, such as for A/B testing. On the toggle overview page, select the variants tab. Use the "new variant" button to add the variants that you want. ![](/img/create-toggle-add-variants.png)