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.

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

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 (

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}

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

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

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.