fix: integrations text review (#4706)

## About the changes
Update copy

Co-authored-by: Thomas Heartman <thomas@getunleash.ai>

frontend/src/component/integrations/IntegrationForm/IntegrationDelete/IntegrationDelete.tsx

@@ -46,8 +46,9 @@ export const IntegrationDelete: VFC<IIntegrationDeleteProps> = ({ id }) => {
         <>
             <StyledTitle>Delete integration</StyledTitle>
             <StyledHelpText>
-                Deleting an integration will delete the entire configuration and
+                Deleting an integration instance will delete all its
-                will automatically disable the integration
+                configuration. It will stop working immediately. Other instances
+                of the same integration are unaffected.
             </StyledHelpText>
             <StyledContainer>
                 <PermissionButton

frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx

@@ -259,7 +259,8 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
         <FormTemplate
             title={
                 <>
-                    {submitText} {name ? capitalizeFirst(`${name} `) : ''}
+                    {submitText}{' '}
+                    {displayName || (name ? capitalizeFirst(name) : '')}{' '}
                     integration
                 </>
             }
@@ -368,7 +369,7 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
                                 entityName="event"
                                 selectAllEnabled={false}
                                 error={errors.events}
-                                description="Select what events you want your integration to be notified about."
+                                description="Select which events you want your integration to be notified about."
                                 required
                             />
                         </div>

frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx

@@ -113,9 +113,8 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
                             Performance and security
                         </Typography>
                         <Typography variant="body2" color="text.secondary">
-                            Connect Unleash to private, scalable and distributed
+                            Connect Unleash to private, scalable, and
-                            relays. Additional layer for handling massive number
+                            distributed relays.
-                            of requests.
                         </Typography>
                     </div>
                     <StyledCardsGrid>

frontend/src/component/integrations/IntegrationList/AvailableIntegrations/SDKs.ts

@@ -10,28 +10,28 @@ export const OFFICIAL_SDKS: Sdk[] = [
     {
         name: 'go',
         displayName: 'GO SDK',
-        description: 'Officially Unleash Client for Go',
+        description: 'Official Unleash Client for Go',
         documentationUrl: 'https://docs.getunleash.io/reference/sdks/go',
         type: 'server',
     },
     {
         name: 'java',
         displayName: 'Java SDK',
-        description: 'Officially Unleash Client for Java',
+        description: 'Official Unleash Client for Java',
         documentationUrl: 'https://docs.getunleash.io/reference/sdks/java',
         type: 'server',
     },
     {
         name: 'node',
         displayName: 'Node.js SDK',
-        description: 'Officially Unleash Client for Node.js',
+        description: 'Official Unleash Client for Node.js',
         documentationUrl: 'https://docs.getunleash.io/reference/sdks/node',
         type: 'server',
     },
     {
         name: 'php',
         displayName: 'PHP SDK',
-        description: 'Officially Unleash Client for PHP',
+        description: 'Official Unleash Client for PHP',
         documentationUrl: 'https://docs.getunleash.io/reference/sdks/php',
         type: 'server',
     },
@@ -45,28 +45,28 @@ export const OFFICIAL_SDKS: Sdk[] = [
     {
         name: 'ruby',
         displayName: 'Ruby SDK',
-        description: 'Officially Unleash Client for Ruby',
+        description: 'Official Unleash Client for Ruby',
         documentationUrl: 'https://docs.getunleash.io/reference/sdks/ruby',
         type: 'server',
     },
     {
         name: 'rust',
         displayName: 'Rust SDK',
-        description: 'Officially Unleash Client for Rust',
+        description: 'Official Unleash Client for Rust',
         documentationUrl: 'https://docs.getunleash.io/reference/sdks/rust',
         type: 'server',
     },
     {
         name: 'dotnet',
-        displayName: '.Net SDK',
+        displayName: '.NET SDK',
-        description: 'Officially Unleash Client for .Net',
+        description: 'Official Unleash Client for .NET',
         documentationUrl: 'https://docs.getunleash.io/reference/sdks/dotnet ',
         type: 'server',
     },
     {
         name: 'android',
         displayName: 'Android SDK',
-        description: 'Officially Unleash Client for Android',
+        description: 'Official Unleash Client for Android',
         documentationUrl:
             'https://docs.getunleash.io/reference/sdks/android-proxy',
         type: 'client',
@@ -74,21 +74,21 @@ export const OFFICIAL_SDKS: Sdk[] = [
     {
         name: 'flutter',
         displayName: 'Flutter Proxy SDK',
-        description: 'Officially Unleash Client for Flutter',
+        description: 'Official Unleash Client for Flutter',
         documentationUrl: 'https://docs.getunleash.io/reference/sdks/flutter',
         type: 'client',
     },
     {
         name: 'swift',
         displayName: 'Swift Proxy SDK',
-        description: 'Officially Unleash Client for iOS',
+        description: 'Official Unleash Client for iOS',
         documentationUrl: 'https://docs.getunleash.io/reference/sdks/ios-proxy',
         type: 'client',
     },
     {
         name: 'javascript',
         displayName: 'Javascript Proxy SDK',
-        description: 'Officially Unleash Client for Javascript',
+        description: 'Official Unleash Client for Javascript',
         documentationUrl:
             'https://docs.getunleash.io/reference/sdks/javascript-browser',
         type: 'client',
@@ -96,21 +96,21 @@ export const OFFICIAL_SDKS: Sdk[] = [
     {
         name: 'react',
         displayName: 'React Proxy SDK',
-        description: 'Officially Unleash Client for React',
+        description: 'Official Unleash Client for React',
         documentationUrl: 'https://docs.getunleash.io/reference/sdks/react',
         type: 'client',
     },
     {
         name: 'svelte',
         displayName: 'Svelte Proxy SDK',
-        description: 'Officially Unleash Client for Svelte',
+        description: 'Official Unleash Client for Svelte',
         documentationUrl: 'https://docs.getunleash.io/reference/sdks/svelte',
         type: 'client',
     },
     {
         name: 'vue',
         displayName: 'Vue Proxy SDK',
-        description: 'Officially Unleash Client for Vue',
+        description: 'Official Unleash Client for Vue',
         documentationUrl: 'https://docs.getunleash.io/reference/sdks/vue',
         type: 'client',
     },

frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx

@@ -51,6 +51,7 @@ export const ConfiguredIntegrations: VFC<ConfiguredIntegrationsProps> = ({
                                 isEnabled={enabled}
                                 description={description || ''}
                                 link={`/integrations/edit/${id}`}
+                                configureActionText="Configure"
                             />
                         );
                     })}

frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCardMenu/IntegrationCardMenu.tsx

@@ -22,7 +22,6 @@ import useAddons from 'hooks/api/getters/useAddons/useAddons';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import { event } from 'cypress/types/jquery';
 
 interface IIntegrationCardMenuProps {
     addon: AddonSchema;

frontend/src/component/integrations/IntegrationList/RequestIntegrationCard/RequestIntegrationCard.tsx

@@ -34,7 +34,7 @@ export const RequestIntegrationCard: VFC = () => (
         rel="noopener noreferrer"
     >
         <Typography variant="body2" color="text.secondary" data-loading>
-            Are we missing any integration that you need?
+            Are we missing an integration that you need?
         </Typography>
         <Typography variant="body2" color="text.secondary" data-loading>
             Go ahead and request it!

frontend/src/themes/dark-theme.ts

@@ -47,6 +47,10 @@ const theme = {
             fontSize: '1rem',
             fontWeight: '700',
         },
+        h4: {
+            fontSize: '1rem',
+            fontWeight: '400',
+        },
         caption: {
             fontSize: `${12 / 16}rem`,
         },

frontend/src/themes/theme.ts

@@ -3,7 +3,7 @@ import { colors } from './colors';
 import { alpha } from '@mui/material';
 import { focusable } from 'themes/themeStyles';
 
-const theme = {
+export const theme = {
     breakpoints: {
         values: {
             xs: 0,

src/lib/addons/datadog-definition.ts

@@ -28,7 +28,7 @@ const dataDogDefinition: IAddonDefinition = {
             name: 'url',
             displayName: 'Datadog Events URL',
             description:
-                'Default url: https://api.datadoghq.com/api/v1/events. Needs to be changed if your not using the US1 site.',
+                "Default URL: https://api.datadoghq.com/api/v1/events. Needs to be changed if your're not using the US1 site.",
             type: 'url',
             required: false,
             sensitive: false,
@@ -37,7 +37,7 @@ const dataDogDefinition: IAddonDefinition = {
             name: 'apiKey',
             displayName: 'Datadog API key',
             placeholder: 'j96c23b0f12a6b3434a8d710110bd862',
-            description: '(Required) API key from Datadog',
+            description: '(Required) API key to connect to Datadog',
             type: 'text',
             required: true,
             sensitive: true,
@@ -57,7 +57,7 @@ const dataDogDefinition: IAddonDefinition = {
             placeholder:
                 '{\n"ISTIO_USER_KEY": "hunter2",\n"SOME_OTHER_CUSTOM_HTTP_HEADER": "SOMEVALUE"\n}',
             description:
-                '(Optional) Used to add extra HTTP Headers to the request the plugin fires off. Format here needs to be a valid json object of key value pairs where both key and value are strings',
+                '(Optional) Used to add extra HTTP Headers to the request the plugin fires off. This must be a valid json object of key-value pairs where both the key and the value are strings',
             required: false,
             sensitive: true,
             type: 'textfield',

src/lib/addons/slack-definition.ts

@@ -65,7 +65,7 @@ const slackDefinition: IAddonDefinition = {
             displayName: 'Extra HTTP Headers',
             placeholder:
                 '{\n"ISTIO_USER_KEY": "hunter2",\n"SOME_OTHER_CUSTOM_HTTP_HEADER": "SOMEVALUE"\n}',
-            description: `(Optional) Used to add extra HTTP Headers to the request the plugin fires off. Format here needs to be a valid json object of key value pairs where both key and value are strings`,
+            description: `(Optional) Used to add extra HTTP Headers to the request the plugin fires off. This must be a valid json object of key-value pairs where both the key and the value are strings`,
             required: false,
             sensitive: true,
             type: 'textfield',

src/lib/addons/teams-definition.ts

@@ -22,7 +22,7 @@ const teamsDefinition: IAddonDefinition = {
     displayName: 'Microsoft Teams',
     description: 'Allows Unleash to post updates to Microsoft Teams.',
     documentationUrl: 'https://docs.getunleash.io/docs/addons/teams',
-    howTo: 'The MicrosoftTeams integration allows Unleash to post Updates when a feature toggle is updated.',
+    howTo: 'The Microsoft Teams integration allows Unleash to post Updates when a feature toggle is updated.',
     parameters: [
         {
             name: 'url',
@@ -37,7 +37,7 @@ const teamsDefinition: IAddonDefinition = {
             displayName: 'Extra HTTP Headers',
             placeholder:
                 '{\n"ISTIO_USER_KEY": "hunter2",\n"SOME_OTHER_CUSTOM_HTTP_HEADER": "SOMEVALUE"\n}',
-            description: `(Optional) Used to add extra HTTP Headers to the request the plugin fires off. Format here needs to be a valid json object of key value pairs where both key and value are strings`,
+            description: `(Optional) Used to add extra HTTP Headers to the request the plugin fires off. This must be a valid json object of key-value pairs where both the key and the value are strings`,
             required: false,
             sensitive: true,
             type: 'textfield',

src/lib/addons/webhook-definition.ts

@@ -34,7 +34,7 @@ const webhookDefinition: IAddonDefinition = {
     description:
         'A Webhook is a generic way to post messages from Unleash to third party services.',
     documentationUrl: 'https://docs.getunleash.io/docs/addons/webhook',
-    howTo: 'The Webhook Addon introduces a generic way to post messages from Unleash to third party services. Unleash allows you to define a webhook which listens changes in Unleash and post them to a third party services.',
+    howTo: 'The Webhook Addon introduces a generic way to post messages from Unleash to third party services. Unleash allows you to define a webhook which listens for changes in Unleash and posts them to a third party services.',
     parameters: [
         {
             name: 'url',
@@ -85,7 +85,7 @@ const webhookDefinition: IAddonDefinition = {
             displayName: 'Extra HTTP Headers',
             placeholder:
                 '{\n"ISTIO_USER_KEY": "hunter2",\n"SOME_OTHER_CUSTOM_HTTP_HEADER": "SOMEVALUE"\n}',
-            description: `(Optional) Used to add extra HTTP Headers to the request the plugin fires off. Format here needs to be a valid json object of key value pairs where both key and value are strings`,
+            description: `(Optional) Used to add extra HTTP Headers to the request the plugin fires off. This must be a valid json object of key-value pairs where both the key and the value are strings`,
             required: false,
             sensitive: true,
             type: 'textfield',

src/lib/openapi/spec/addons-schema.ts

@@ -217,7 +217,7 @@ export const addonsSchema = {
                             name: 'url',
                             displayName: 'Datadog Events URL',
                             description:
-                                'Default url: https://api.datadoghq.com/api/v1/events. Needs to be changed if your not using the US1 site.',
+                                "Default URL: https://api.datadoghq.com/api/v1/events. Needs to be changed if your're not using the US1 site.",
                             type: 'url',
                             required: false,
                             sensitive: false,
@@ -226,7 +226,8 @@ export const addonsSchema = {
                             name: 'apiKey',
                             displayName: 'Datadog API key',
                             placeholder: 'j96c23b0f12a6b3434a8d710110bd862',
-                            description: '(Required) API key from Datadog',
+                            description:
+                                '(Required) API key to connect to Datadog',
                             type: 'text',
                             required: true,
                             sensitive: true,

website/docs/reference/addons/teams.md

@@ -5,7 +5,7 @@ title: Microsoft Teams
 
 > This feature was introduced in _Unleash v4.0.0_.
 
-The MicrosoftTeams addon allows Unleash to post Updates when a feature toggle is updated. To set up this addon, you need to set up a webhook connector for your channel. You can follow [Creating an Incoming Webhook for a channel](https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook) on how to do that.
+The Microsoft Teams addon allows Unleash to post Updates when a feature toggle is updated. To set up this addon, you need to set up a webhook connector for your channel. You can follow [Creating an Incoming Webhook for a channel](https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook) on how to do that.
 
 The Microsoft Teams addon will perform a single retry if the HTTP POST against the Microsoft Teams Webhook URL fails (either a 50x or network error). Duplicate events may happen, and you should never assume events always comes in order.
 

website/docs/reference/deploy/configuring-unleash.md

@@ -102,7 +102,7 @@ unleash.start(unleashOptions);
 - **preHook** (function) - this is a hook if you need to provide any middlewares to express before `unleash` adds any. Express app instance is injected as first argument.
 - **preRouterHook** (function) - use this to register custom express middlewares before the `unleash` specific routers are added.
 - **secureHeaders** (boolean) - use this to enable security headers (HSTS, CSP, etc) when serving Unleash from HTTPS. Can also be configured through the environment variable `SECURE_HEADERS`.
-- **additionalCspAllowedDomains** (CspAllowedDomains) - use this when you want to enable security headers but have additional domains you need to allow traffic to you can set the following environment variables:
+- **additionalCspAllowedDomains** (CspAllowedDomains) - use this when you want to enable security headers but have additional domains you need to allow traffic to. You can set the following environment variables:
   - `CSP_ALLOWED_DEFAULT` to allow new defaultSrc (comma separated list)
   - `CSP_ALLOWED_FONT` to allow new fontSrc (comma separated list)
   - `CSP_ALLOWED_STYLE` to allow new styleSrc (comma separated list)