Align ClusterAdd story with actual presentation

gravitational · Oct 30, 2024 · 0744271 · 0744271
1 parent 5280f4a
commit 0744271
Showing 1 changed file with 32 additions and 16 deletions.
diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterAdd/ClusterAdd.story.tsx b/web/packages/teleterm/src/ui/ClusterConnect/ClusterAdd/ClusterAdd.story.tsx
@@ -16,12 +16,16 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
+
+import Dialog from 'design/Dialog';
 
 import { MockAppContextProvider } from 'teleterm/ui/fixtures/MockAppContextProvider';
 import { MockAppContext } from 'teleterm/ui/fixtures/mocks';
 import { makeRootCluster } from 'teleterm/services/tshd/testHelpers';
 
+import { dialogCss } from '../ClusterConnect';
+
 import { ClusterAdd } from './ClusterAdd';
 
 import type * as tshd from 'teleterm/services/tshd/types';
@@ -33,23 +37,27 @@ export default {
 export const Story = () => {
   return (
     <MockAppContextProvider appContext={getMockAppContext()}>
-      <ClusterAdd
-        prefill={{ clusterAddress: undefined }}
-        onSuccess={() => {}}
-        onCancel={() => {}}
-      />
+      <Wrapper>
+        <ClusterAdd
+          prefill={{ clusterAddress: undefined }}
+          onSuccess={() => {}}
+          onCancel={() => {}}
+        />
+      </Wrapper>
     </MockAppContextProvider>
   );
 };
 
 export const WithPrefill = () => {
   return (
     <MockAppContextProvider appContext={getMockAppContext()}>
-      <ClusterAdd
-        prefill={{ clusterAddress: 'foo.example.com:3080' }}
-        onSuccess={() => {}}
-        onCancel={() => {}}
-      />
+      <Wrapper>
+        <ClusterAdd
+          prefill={{ clusterAddress: 'foo.example.com:3080' }}
+          onSuccess={() => {}}
+          onCancel={() => {}}
+        />
+      </Wrapper>
     </MockAppContextProvider>
   );
 };
@@ -62,11 +70,13 @@ export const ErrorOnSubmit = () => {
           Promise.reject(new Error('Oops, something went wrong.')),
       })}
     >
-      <ClusterAdd
-        prefill={{ clusterAddress: undefined }}
-        onSuccess={() => {}}
-        onCancel={() => {}}
-      />
+      <Wrapper>
+        <ClusterAdd
+          prefill={{ clusterAddress: undefined }}
+          onSuccess={() => {}}
+          onCancel={() => {}}
+        />
+      </Wrapper>
     </MockAppContextProvider>
   );
 };
@@ -81,3 +91,9 @@ function getMockAppContext(
     args.addRootCluster || (() => Promise.resolve(makeRootCluster()));
   return appContext;
 }
+
+const Wrapper = ({ children }: PropsWithChildren) => (
+  <Dialog dialogCss={dialogCss} open>
+    {children}
+  </Dialog>
+);