feat: update description on project deletion (#7539)

Improving the project deletion experience by adding information about
API keys and refining the messaging, making it easier to comprehend.

frontend/src/component/project/Project/DeleteProject/DeleteProjectDialogue.tsx

@@ -4,6 +4,10 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import useToast from 'hooks/useToast';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { useUiFlag } from 'hooks/useUiFlag';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { Typography } from '@mui/material';
 
 interface IDeleteProjectDialogueProps {
     project: string;
@@ -21,6 +25,8 @@ export const DeleteProjectDialogue = ({
     const { deleteProject } = useProjectApi();
     const { refetch: refetchProjectOverview } = useProjects();
     const { setToastData, setToastApiError } = useToast();
+    const { isEnterprise } = useUiConfig();
+    const automatedActionsEnabled = useUiFlag('automatedActions');
 
     const onClick = async (e: React.SyntheticEvent) => {
         e.preventDefault();
@@ -45,6 +51,16 @@ export const DeleteProjectDialogue = ({
             onClick={onClick}
             onClose={onClose}
             title='Really delete project'
-        />
+        >
+            <Typography>
+                This will irreversibly remove the project, all feature flags
+                archived in it, all API keys scoped to only this project
+                <ConditionallyRender
+                    condition={isEnterprise() && automatedActionsEnabled}
+                    show=', and all actions configured for it'
+                />
+                .
+            </Typography>
+        </Dialogue>
     );
 };

frontend/src/component/project/Project/ProjectSettings/Settings/DeleteProject.tsx

@@ -36,41 +36,59 @@ export const DeleteProject = ({
     const automatedActionsEnabled = useUiFlag('automatedActions');
     const { actions } = useActions(projectId);
     const [showDelDialog, setShowDelDialog] = useState(false);
+    const actionsCount = actions.filter(({ enabled }) => enabled).length;
     const navigate = useNavigate();
     return (
         <StyledContainer>
             <p>
                 Before you can delete a project, you must first archive all the
-                feature flags associated with it. Keep in mind that deleting a
+                feature flags associated with it
-                project will permanently remove all the archived feature flags,
+                {isEnterprise() && automatedActionsEnabled
-                and they cannot be recovered once deleted.
+                    ? 'and disable all actions that are in it'
+                    : ''}
+                .
             </p>
             <ConditionallyRender
-                condition={isEnterprise() && automatedActionsEnabled}
+                condition={featureCount > 0}
                 show={
                     <p>
-                        Additionally, all configured actions for this project
+                        Currently there {featureCount <= 1 ? 'is' : 'are'}{' '}
-                        will no longer be executed as they will be permanently
-                        deleted.
-                    </p>
-                }
-            />
-            <p>
-                Currently there are{' '}
-                <strong>{featureCount} feature flags active</strong>
-            </p>
-            <ConditionallyRender
-                condition={isEnterprise() && automatedActionsEnabled}
-                show={
-                    <p>
-                        Currently there are{' '}
                         <strong>
-                            {actions.filter(({ enabled }) => enabled).length}{' '}
+                            {featureCount} active feature{' '}
-                            enabled actions
+                            {featureCount === 1 ? 'flag' : 'flags'}.
                         </strong>
                     </p>
                 }
             />
+            <ConditionallyRender
+                condition={
+                    isEnterprise() &&
+                    automatedActionsEnabled &&
+                    actionsCount > 0
+                }
+                show={
+                    <p>
+                        Currently there {actionsCount <= 1 ? 'is' : 'are'}{' '}
+                        <strong>
+                            {actionsCount} enabled{' '}
+                            {actionsCount === 1 ? 'action' : 'actions'}.
+                        </strong>
+                    </p>
+                }
+            />
+            <p>
+                Keep in mind that deleting a project{' '}
+                <strong>will permanently remove</strong>
+                <ul>
+                    <li>all archived feature flags in this project</li>
+                    <li>API keys configured to access only this project</li>
+                    <ConditionallyRender
+                        condition={isEnterprise() && automatedActionsEnabled}
+                        show={<li>all actions configured for this project</li>}
+                    />
+                </ul>
+                and they <strong>cannot be recovered</strong> once deleted.
+            </p>
             <StyledButtonContainer>
                 <PermissionButton
                     permission={DELETE_PROJECT}