From 6a9f80c5546e8b1d9b5ea0cd6119cca8bcdf5324 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Thu, 15 Feb 2024 08:17:11 +0000
Subject: [PATCH] fix: misc UI/UX fixes (#6241)

https://linear.app/unleash/issue/UNL-338/adjustments-incoming-webhooks-actions

Includes misc UI/UX fixes, including a typo, the vertical alignment of
the Enterprise badge in project settings and the way incoming webhooks
are displayed in non-Enterprise plans.
---
 .../FeatureTypeForm/FeatureTypeForm.tsx          |  5 +++--
 .../incomingWebhooks/IncomingWebhooks.tsx        |  2 +-
 .../IntegrationList/IntegrationList.tsx          | 10 +++++++---
 .../ReportTable/ReportCard/ReportCard.tsx        |  2 +-
 .../Project/ProjectSettings/ProjectSettings.tsx  | 16 +++++++++++-----
 website/docs/reference/technical-debt.md         |  2 +-
 6 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/frontend/src/component/featureTypes/FeatureTypeEdit/FeatureTypeForm/FeatureTypeForm.tsx b/frontend/src/component/featureTypes/FeatureTypeEdit/FeatureTypeForm/FeatureTypeForm.tsx
index 956e4b45f5..eadee0a4cd 100644
--- a/frontend/src/component/featureTypes/FeatureTypeEdit/FeatureTypeForm/FeatureTypeForm.tsx
+++ b/frontend/src/component/featureTypes/FeatureTypeEdit/FeatureTypeForm/FeatureTypeForm.tsx
@@ -145,8 +145,9 @@ export const FeatureTypeForm: VFC<FeatureTypeFormProps> = ({
                         tooltip={
                             <>
                                 <p>
-                                    If your toggle exceeded lifetime of it's
-                                    type it will be marked as potencially stale.
+                                    If your toggle exceeds the expected lifetime
+                                    of its toggle type it will be marked as
+                                    potentially stale.
                                 </p>
                                 <br />
                                 <a
diff --git a/frontend/src/component/incomingWebhooks/IncomingWebhooks.tsx b/frontend/src/component/incomingWebhooks/IncomingWebhooks.tsx
index b9cf52d9d7..03c903e32e 100644
--- a/frontend/src/component/incomingWebhooks/IncomingWebhooks.tsx
+++ b/frontend/src/component/incomingWebhooks/IncomingWebhooks.tsx
@@ -23,7 +23,7 @@ export const IncomingWebhooks = ({
     const { isEnterprise } = useUiConfig();
 
     if (!isEnterprise()) {
-        return <PremiumFeature feature='incoming-webhooks' page />;
+        return <PremiumFeature feature='incoming-webhooks' />;
     }
 
     return (
diff --git a/frontend/src/component/integrations/IntegrationList/IntegrationList.tsx b/frontend/src/component/integrations/IntegrationList/IntegrationList.tsx
index b6e1924799..3cb0531427 100644
--- a/frontend/src/component/integrations/IntegrationList/IntegrationList.tsx
+++ b/frontend/src/component/integrations/IntegrationList/IntegrationList.tsx
@@ -15,6 +15,7 @@ import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { IIncomingWebhook } from 'interfaces/incomingWebhook';
 import { IncomingWebhooks } from 'component/incomingWebhooks/IncomingWebhooks';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 const StyledHeader = styled('div')(() => ({
     display: 'flex',
@@ -32,6 +33,7 @@ const StyledActions = styled('div')({
 });
 
 export const IntegrationList: VFC = () => {
+    const { isEnterprise } = useUiConfig();
     const { pathname } = useLocation();
     const navigate = useNavigate();
     const theme = useTheme();
@@ -94,9 +96,11 @@ export const IntegrationList: VFC = () => {
                             </StyledTabsContainer>
                             <StyledActions>
                                 <ConditionallyRender
-                                    condition={pathname.includes(
-                                        'incoming-webhooks',
-                                    )}
+                                    condition={
+                                        pathname.includes(
+                                            'incoming-webhooks',
+                                        ) && isEnterprise()
+                                    }
                                     show={
                                         <ResponsiveButton
                                             onClick={onNewIncomingWebhook}
diff --git a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportCard/ReportCard.tsx b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportCard/ReportCard.tsx
index b51e0cb10c..d9a064ae8f 100644
--- a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportCard/ReportCard.tsx
+++ b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportCard/ReportCard.tsx
@@ -107,7 +107,7 @@ export const ReportCard = ({ healthReport }: IReportCardProps) => {
         <HtmlTooltip
             title={
                 <>
-                    If your toggle exceeds the expected lifetime of it's toggle
+                    If your toggle exceeds the expected lifetime of its toggle
                     type it will be marked as potentially stale.
                     <Box sx={{ mt: 2 }}>
                         <a
diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectSettings.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectSettings.tsx
index 5ed36263d7..3830cd9378 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectSettings.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectSettings.tsx
@@ -15,10 +15,16 @@ import { ProjectDefaultStrategySettings } from './ProjectDefaultStrategySettings
 import { Settings } from './Settings/Settings';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge';
-import { Box } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import { ProjectActions } from './ProjectActions/ProjectActions';
 import { useUiFlag } from 'hooks/useUiFlag';
 
+const StyledBadgeContainer = styled(Box)({
+    marginLeft: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+});
+
 export const ProjectSettings = () => {
     const location = useLocation();
     const { isPro, isEnterprise } = useUiConfig();
@@ -45,9 +51,9 @@ export const ProjectSettings = () => {
                       id: 'change-requests',
                       label: 'Change request configuration',
                       icon: isPro() ? (
-                          <Box sx={{ marginLeft: 'auto' }}>
+                          <StyledBadgeContainer>
                               <EnterpriseBadge />
-                          </Box>
+                          </StyledBadgeContainer>
                       ) : undefined,
                   },
               ]
@@ -71,9 +77,9 @@ export const ProjectSettings = () => {
             id: 'actions',
             label: 'Actions',
             icon: isPro() ? (
-                <Box sx={{ marginLeft: 'auto' }}>
+                <StyledBadgeContainer>
                     <EnterpriseBadge />
-                </Box>
+                </StyledBadgeContainer>
             ) : undefined,
         });
     }
diff --git a/website/docs/reference/technical-debt.md b/website/docs/reference/technical-debt.md
index d9d5e26e2a..1414648c9e 100644
--- a/website/docs/reference/technical-debt.md
+++ b/website/docs/reference/technical-debt.md
@@ -32,7 +32,7 @@ The report card includes some statistics of your application. It lists the overa
 - **Kill switch** - Used to to gracefully degrade system functionality. _(permanent)_
 - **Permission** - Used to change the features or product experience that certain users receive. _(permanent)_
 
-If your toggle exceeds the expected lifetime of it's toggle type it will be marked as _potentially stale_.
+If your toggle exceeds the expected lifetime of its toggle type it will be marked as _potentially stale_.
 
 One thing to note is that the report card and corresponding list are showing stats related to the currently selected project. If you have more than one project, you will be provided with a project selector in order to swap between the projects.