From 163545de8c04136f6c4ef2906cbb7c040228d0ed Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Tue, 17 Oct 2023 13:43:49 +0200
Subject: [PATCH] feat: warn about sdk update with feature dependencies (#5065)

---
 .../AddDependencyDialogue.test.tsx            |  2 ++
 .../Dependencies/AddDependencyDialogue.tsx    | 11 ++++++----
 .../Dependencies/DependenciesUpgradeAlert.tsx | 22 +++++++++++++++++++
 3 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/component/feature/Dependencies/DependenciesUpgradeAlert.tsx

diff --git a/frontend/src/component/feature/Dependencies/AddDependencyDialogue.test.tsx b/frontend/src/component/feature/Dependencies/AddDependencyDialogue.test.tsx
index c7d10f733209..ba04e8f11cad 100644
--- a/frontend/src/component/feature/Dependencies/AddDependencyDialogue.test.tsx
+++ b/frontend/src/component/feature/Dependencies/AddDependencyDialogue.test.tsx
@@ -114,6 +114,8 @@ test('Add dependency', async () => {
     const addButton = await screen.findByText('Add');
     userEvent.click(addButton);
 
+    await screen.findByText('Client SDK support for feature dependencies');
+
     await waitFor(() => {
         expect(closed).toBe(true);
     });
diff --git a/frontend/src/component/feature/Dependencies/AddDependencyDialogue.tsx b/frontend/src/component/feature/Dependencies/AddDependencyDialogue.tsx
index 43499ff04a2b..8c1f3be0ab05 100644
--- a/frontend/src/component/feature/Dependencies/AddDependencyDialogue.tsx
+++ b/frontend/src/component/feature/Dependencies/AddDependencyDialogue.tsx
@@ -13,6 +13,7 @@ import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequ
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import { DependenciesUpgradeAlert } from './DependenciesUpgradeAlert';
 
 interface IAddDependencyDialogueProps {
     project: string;
@@ -189,10 +190,12 @@ export const AddDependencyDialogue = ({
             secondaryButtonText='Cancel'
         >
             <Box>
-                Your feature will be evaluated only when the selected parent
-                feature is enabled in the same environment.
-                <br />
-                <br />
+                <DependenciesUpgradeAlert />
+                <Box sx={{ mt: 2, mb: 4 }}>
+                    Your feature will be evaluated only when the selected parent
+                    feature is enabled in the same environment.
+                </Box>
+
                 <Typography>What feature do you want to depend on?</Typography>
                 <ConditionallyRender
                     condition={showDependencyDialogue}
diff --git a/frontend/src/component/feature/Dependencies/DependenciesUpgradeAlert.tsx b/frontend/src/component/feature/Dependencies/DependenciesUpgradeAlert.tsx
new file mode 100644
index 000000000000..6fbe6bac4d04
--- /dev/null
+++ b/frontend/src/component/feature/Dependencies/DependenciesUpgradeAlert.tsx
@@ -0,0 +1,22 @@
+import { Alert } from '@mui/material';
+
+export const DependenciesUpgradeAlert = () => {
+    return (
+        <Alert severity='warning'>
+            Remember to update your Unleash client! Feature dependencies require
+            new SDK versions. Read more about <DependenciesDocsLink />.
+        </Alert>
+    );
+};
+
+const DependenciesDocsLink = () => {
+    return (
+        <a
+            href='https://docs.getunleash.io/reference/dependent-features#client-sdk-support'
+            target='_blank'
+            rel='noreferrer'
+        >
+            Client SDK support for feature dependencies
+        </a>
+    );
+};