@dxos/plugin-space 0.7.4 → 0.7.5-labs.071a3e2

package/src/components/JoinDialog.tsx

@@ -4,92 +4,84 @@
 
 import React, { useCallback } from 'react';
 
-import { LayoutAction, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
-import { useGraph } from '@dxos/plugin-graph';
-import { ObservabilityAction } from '@dxos/plugin-observability/meta';
-import { useSpaces } from '@dxos/react-client/echo';
+import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+import { log } from '@dxos/log';
+import { ObservabilityAction } from '@dxos/plugin-observability/types';
+import { useClient } from '@dxos/react-client';
 import { type InvitationResult } from '@dxos/react-client/invitations';
-import { Dialog, useTranslation } from '@dxos/react-ui';
+import { Dialog } from '@dxos/react-ui';
 import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
 
 import { SPACE_PLUGIN } from '../meta';
 
+export const JOIN_DIALOG = `${SPACE_PLUGIN}/JoinDialog`;
+
 export type JoinDialogProps = JoinPanelProps & {
   navigableCollections?: boolean;
 };
 
 export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialogProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const dispatch = useIntentDispatcher();
-  const spaces = useSpaces();
-  const { graph } = useGraph();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const client = useClient();
+  const { graph } = useAppGraph();
 
   const handleDone = useCallback(
     async (result: InvitationResult | null) => {
       if (result?.spaceKey) {
         await Promise.all([
-          dispatch({
-            action: LayoutAction.SET_LAYOUT,
-            data: {
-              element: 'toast',
+          dispatch(
+            createIntent(LayoutAction.AddToast, {
+              part: 'toast',
               subject: {
                 id: `${SPACE_PLUGIN}/join-success`,
                 duration: 5_000,
-                title: t('join success label'),
-                closeLabel: t('dismiss label'),
+                title: ['join success label', { ns: SPACE_PLUGIN }],
+                closeLabel: ['dismiss label', { ns: SPACE_PLUGIN }],
+              },
+            }),
+          ),
+          dispatch(
+            createIntent(LayoutAction.UpdateDialog, {
+              part: 'dialog',
+              options: {
+                state: false,
               },
-            },
-          }),
-          dispatch({
-            action: LayoutAction.SET_LAYOUT,
-            data: {
-              element: 'dialog',
-              state: false,
-            },
-          }),
+            }),
+          ),
         ]);
       }
 
-      const space = spaces.find(({ key }) => result?.spaceKey?.equals(key));
+      const space = result?.spaceKey ? client.spaces.get(result.spaceKey) : undefined;
+      if (!space) {
+        log.warn('Space not found', result?.spaceKey);
+        return;
+      }
+
+      await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: space.id }));
+
       // TODO(wittjosiah): If navigableCollections is false and there's no target,
       //   should try to navigate to the first object of the space replicates.
       //   Potentially this could also be done on the inviters side to ensure there's always a target.
       const target = result?.target || (navigableCollections ? space?.id : undefined);
       if (target) {
-        // Wait for up to 1 second before navigating to the target node.
+        // Wait before navigating to the target node.
         // If the target has not yet replicated, this will trigger a loading toast.
         await graph.waitForPath({ target }).catch(() => {});
         await Promise.all([
-          dispatch({
-            action: NavigationAction.OPEN,
-            data: {
-              activeParts: { main: [target] },
-            },
-          }),
-          dispatch({
-            action: NavigationAction.EXPOSE,
-            data: {
-              id: target,
-            },
-          }),
+          dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [target] })),
+          dispatch(createIntent(LayoutAction.Expose, { part: 'navigation', subject: target })),
         ]);
       }
 
       await onDone?.(result);
 
       if (space) {
-        await dispatch({
-          action: ObservabilityAction.SEND_EVENT,
-          data: {
-            name: 'space.join',
-            properties: {
-              spaceId: space.id,
-            },
-          },
-        });
+        await dispatch(
+          createIntent(ObservabilityAction.SendEvent, { name: 'space.join', properties: { spaceId: space.id } }),
+        );
       }
     },
-    [dispatch, spaces],
+    [dispatch, client, graph],
   );
 
   return (

package/src/components/PersistenceStatus.tsx

@@ -76,7 +76,7 @@ export const PersistenceStatus = ({ db }: { db: EchoDatabase }) => {
             )}
           </Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Content classNames='z-10'>
+            <Tooltip.Content>
               {t('persisted locally message')}
               <Tooltip.Arrow />
             </Tooltip.Content>

package/src/components/PopoverRenameObject.tsx

@@ -10,6 +10,8 @@ import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 
+export const POPOVER_RENAME_OBJECT = `${SPACE_PLUGIN}/PopoverRenameObject`;
+
 export const PopoverRenameObject = ({ object: obj }: { object: ReactiveObject<any> }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const doneButton = useRef<HTMLButtonElement>(null);

package/src/components/PopoverRenameSpace.tsx

@@ -9,6 +9,8 @@ import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 
+export const POPOVER_RENAME_SPACE = `${SPACE_PLUGIN}/PopoverRenameSpace`;
+
 export const PopoverRenameSpace = ({ space }: { space: Space }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const doneButton = useRef<HTMLButtonElement>(null);

package/src/components/ShareSpaceButton.tsx

@@ -4,16 +4,17 @@
 
 import React from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { type Space } from '@dxos/react-client/echo';
 import { IconButton, useTranslation } from '@dxos/react-ui';
 
-import { SPACE_PLUGIN, SpaceAction } from '../meta';
+import { SPACE_PLUGIN } from '../meta';
+import { SpaceAction } from '../types';
 
 export const ShareSpaceButton = ({ space }: { space: Space }) => {
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
-  return <ShareSpaceButtonImpl onClick={() => dispatch({ action: SpaceAction.SHARE, data: { space } })} />;
+  return <ShareSpaceButtonImpl onClick={() => dispatch(createIntent(SpaceAction.Share, { space }))} />;
 };
 
 // TODO(wittjosiah): Better way to name pure/impure components?

package/src/components/SpacePluginSettings.tsx

@@ -4,31 +4,20 @@
 
 import React from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
 import { Input, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormInput } from '@dxos/react-ui-form';
+import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 
-import { SpaceAction, SPACE_PLUGIN } from '../meta';
+import { SPACE_PLUGIN } from '../meta';
 import { type SpaceSettingsProps } from '../types';
 
 export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
-  const dispatch = useIntentDispatcher();
 
   return (
-    <>
+    <DeprecatedFormContainer>
       <DeprecatedFormInput label={t('show hidden spaces label')}>
-        <Input.Switch
-          checked={settings.showHidden}
-          onCheckedChange={(checked) =>
-            dispatch({
-              plugin: SPACE_PLUGIN,
-              action: SpaceAction.TOGGLE_HIDDEN,
-              data: { state: !!checked },
-            })
-          }
-        />
+        <Input.Switch checked={settings.showHidden} onCheckedChange={(checked) => (settings.showHidden = !!checked)} />
       </DeprecatedFormInput>
-    </>
+    </DeprecatedFormContainer>
   );
 };

package/src/components/SpacePresence.stories.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React from 'react';
 
-import { PublicKey } from '@dxos/keys';
+import { IdentityDid, PublicKey } from '@dxos/keys';
 import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
@@ -17,7 +17,7 @@ import translations from '../translations';
 const nViewers = (n: number, currentlyAttended = true): Member[] =>
   Array.from({ length: n }, () => ({
     role: HaloSpaceMember.Role.ADMIN,
-    identity: { identityKey: PublicKey.random() },
+    identity: { did: IdentityDid.random(), identityKey: PublicKey.random() },
     presence: SpaceMember.PresenceState.ONLINE,
     lastSeen: Date.now(),
     currentlyAttended,
@@ -61,30 +61,38 @@ export const Full = (props: MemberPresenceProps) => {
   );
 };
 
-export const Small = (props: MemberPresenceProps) => {
-  const p: MemberPresenceProps = {
-    ...props,
-  };
-
+export const Small = () => {
   return (
     <div className='p-4'>
-      <div className='p-3'>
-        <SmallPresence count={0} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={0} />
+        <SmallPresence count={0} attended />
+        <SmallPresence count={0} containsAttended />
       </div>
-      <div className='p-3'>
-        <SmallPresence count={1} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={1} />
+        <SmallPresence count={1} attended />
+        <SmallPresence count={1} containsAttended />
       </div>
-      <div className='p-3'>
-        <SmallPresence count={2} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={2} />
+        <SmallPresence count={2} attended />
+        <SmallPresence count={2} containsAttended />
       </div>
-      <div className='p-3'>
-        <SmallPresence count={3} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={3} />
+        <SmallPresence count={3} attended />
+        <SmallPresence count={3} containsAttended />
       </div>
-      <div className='p-3'>
-        <SmallPresence count={4} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={4} />
+        <SmallPresence count={4} attended />
+        <SmallPresence count={4} containsAttended />
       </div>
-      <div className='p-3'>
-        <SmallPresence count={5} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={5} />
+        <SmallPresence count={5} attended />
+        <SmallPresence count={5} containsAttended />
       </div>
     </div>
   );

package/src/components/SpacePresence.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { usePlugin } from '@dxos/app-framework';
+import { useAppGraph, useCapability } from '@dxos/app-framework';
 import { generateName } from '@dxos/display-name';
 import { type Expando } from '@dxos/echo-schema';
 import { PublicKey, useClient } from '@dxos/react-client';
@@ -22,11 +22,13 @@ import {
   ListItem,
   useDefaultValue,
 } from '@dxos/react-ui';
-import { AttentionGlyph, useAttention } from '@dxos/react-ui-attention';
+import { AttentionGlyph, useAttended, useAttention, type AttentionGlyphProps } from '@dxos/react-ui-attention';
 import { ComplexMap, keyToFallback } from '@dxos/util';
 
+import { SpaceCapabilities } from '../capabilities';
+import { usePath } from '../hooks';
 import { SPACE_PLUGIN } from '../meta';
-import type { ObjectViewerProps, SpacePluginProvides } from '../types';
+import type { ObjectViewerProps } from '../types';
 
 // TODO(thure): Get/derive these values from protocol
 const REFRESH_INTERVAL = 5000;
@@ -39,7 +41,8 @@ const noViewers = new ComplexMap<PublicKey, ObjectViewerProps>(PublicKey.hash);
 const getName = (identity: Identity) => identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
 
 export const SpacePresence = ({ object, spaceKey }: { object: Expando; spaceKey?: PublicKey }) => {
-  const spacePlugin = usePlugin<SpacePluginProvides>(SPACE_PLUGIN);
+  // TODO(wittjosiah): Doesn't need to be mutable but readonly type messes with ComplexMap.
+  const spaceState = useCapability(SpaceCapabilities.MutableState);
   const client = useClient();
   const identity = useIdentity();
   const space = spaceKey ? client.spaces.get(spaceKey) : getSpace(object);
@@ -61,11 +64,10 @@ export const SpacePresence = ({ object, spaceKey }: { object: Expando; spaceKey?
 
   // TODO(thure): Could it be a smell to return early when there are interactions with `deepSignal` later, since it
   //  prevents reactivity?
-  if (!identity || !spacePlugin || !space) {
+  if (!identity || !spaceState || !space) {
     return null;
   }
 
-  const spaceState = spacePlugin.provides.space;
   const currentObjectViewers = spaceState.viewersByObject[fullyQualifiedId(object)] ?? noViewers;
 
   const membersForObject = spaceMembers
@@ -194,16 +196,30 @@ const PrensenceAvatar = ({ identity, showName, match, group, index, onClick }: P
   );
 };
 
-export const SmallPresenceLive = ({
-  id,
-  viewers,
-}: {
+export type SmallPresenceLiveProps = {
   id?: string;
+  open?: boolean;
   viewers?: ComplexMap<PublicKey, ObjectViewerProps>;
-}) => {
+};
+
+export const SmallPresenceLive = ({ id, open, viewers }: SmallPresenceLiveProps) => {
+  const { hasAttention, isAncestor, isRelated } = useAttention(id);
+  const isAttended = hasAttention || isAncestor || isRelated;
+
+  // TODO(wittjosiah): If the attended node is deep in the graph and the graph is not fully loaded
+  //   this will result in an empty path until the graph is connected.
+  // TODO(wittjosiah): Consider using this indicator for all open nodes instead of just attended.
+  const { graph } = useAppGraph();
+  const attended = useAttended();
+  const startOfAttention = attended.at(-1);
+  const path = usePath(graph, startOfAttention);
+  const containsAttended = !open && !isAttended && id && path ? path.includes(id) : false;
+
   const getActiveViewers = (viewers: ComplexMap<PublicKey, ObjectViewerProps>): ObjectViewerProps[] => {
     const moment = Date.now();
-    return Array.from(viewers.values()).filter(({ lastSeen }) => moment - lastSeen < ACTIVITY_DURATION);
+    return Array.from<ObjectViewerProps>(viewers.values()).filter(
+      (viewer) => moment - viewer.lastSeen < ACTIVITY_DURATION,
+    );
   };
 
   const [activeViewers, setActiveViewers] = useState(viewers ? getActiveViewers(viewers) : []);
@@ -218,24 +234,28 @@ export const SmallPresenceLive = ({
     }
   }, [viewers]);
 
-  return <SmallPresence id={id} count={activeViewers.length} />;
+  return <SmallPresence count={activeViewers.length} attended={isAttended} containsAttended={containsAttended} />;
 };
 
-export const SmallPresence = ({ id, count }: { id?: string; count: number }) => {
+export type SmallPresenceProps = {
+  count?: number;
+} & Pick<AttentionGlyphProps, 'attended' | 'containsAttended'>;
+
+export const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPresenceProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
-  const { hasAttention, isAncestor, isRelated } = useAttention(id);
-  const attention = hasAttention || isAncestor || isRelated;
 
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
-        {/* TODO(wittjosiah): Don't depend on data attribute just pass prop to AttentionGlyph. */}
-        <div role='none' className='flex' data-attention={attention}>
-          <AttentionGlyph presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'} classNames='self-center mie-1' />
-        </div>
+        <AttentionGlyph
+          attended={attended}
+          containsAttended={containsAttended}
+          presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'}
+          classNames='self-center mie-1'
+        />
       </Tooltip.Trigger>
       <Tooltip.Portal>
-        <Tooltip.Content side='bottom' classNames='z-[70]'>
+        <Tooltip.Content side='bottom'>
           <span>{t('presence label', { count })}</span>
           <Tooltip.Arrow />
         </Tooltip.Content>

package/src/components/SpaceSettings/SpaceSettingsDialog.stories.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { useStoryClientData, withClientProvider } from '@dxos/react-client/testing';
+import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { Dialog } from '@dxos/react-ui';
 import { osTranslations } from '@dxos/shell/react';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -16,8 +16,7 @@ import { SpaceSettingsDialog, type SpaceSettingsDialogProps } from './SpaceSetti
 import translations from '../../translations';
 
 const Story = (args: Partial<SpaceSettingsDialogProps>) => {
-  const { space } = useStoryClientData();
-
+  const { space } = useClientProvider();
   return (
     <Dialog.Root open>
       <Dialog.Overlay blockAlign='start'>

package/src/components/SpaceSettings/SpaceSettingsDialog.tsx

@@ -2,17 +2,21 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
+import { Surface, useCapabilities } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
 import { Button, Clipboard, Dialog, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Tabs, type TabsRootProps, type TabsActivePart } from '@dxos/react-ui-tabs';
 import { SpacePanel, type SpacePanelProps } from '@dxos/shell/react';
 
 import { SpaceSettingsPanel, type SpaceSettingsPanelProps } from './SpaceSettingsPanel';
+import { SpaceCapabilities } from '../../capabilities';
 import { SPACE_PLUGIN } from '../../meta';
 import { COMPOSER_SPACE_LOCK, getSpaceDisplayName } from '../../util';
 
+export const SPACE_SETTINGS_DIALOG = `${SPACE_PLUGIN}/SpaceSettingsDialog`;
+
 export type SpaceSettingsTab = 'members' | 'settings';
 
 export type SpaceSettingsDialogProps = {
@@ -34,12 +38,14 @@ export const SpaceSettingsDialog = ({
   const [selected, setSelected] = useState<SpaceSettingsTab>(initialTab);
   const locked = space.properties[COMPOSER_SPACE_LOCK];
   const name = getSpaceDisplayName(space, { personal: client.spaces.default === space, namesCache });
+  const panels = useCapabilities(SpaceCapabilities.SettingsPanel);
+  const data = useMemo(() => ({ subject: space }), [space]);
 
   return (
     // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
     //  Consider factoring it out to the tabs package.
     <Dialog.Content classNames='p-0 bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
-      <div role='none' className='flex justify-between pbs-3 pis-2 pie-3 @md:pbs-4 @md:pis-4 @md:pie-5'>
+      <div role='none' className='flex justify-between pbs-2 pis-2 pie-2 @md:pbs-4 @md:pis-4 @md:pie-4'>
         <Dialog.Title
           onClick={() => setTabsActivePart('list')}
           aria-description={t('click to return to tablist description')}
@@ -82,6 +88,11 @@ export const SpaceSettingsDialog = ({
                 <Tabs.Tab value='members' disabled={locked}>
                   {t('members tab label')}
                 </Tabs.Tab>
+                {panels.map((panel) => (
+                  <Tabs.Tab key={panel.id} value={panel.id}>
+                    {toLocalizedString(panel.label, t)}
+                  </Tabs.Tab>
+                ))}
               </div>
             </Tabs.Tablist>
           </div>
@@ -96,6 +107,12 @@ export const SpaceSettingsDialog = ({
               <SpacePanel space={space} hideHeading target={target} createInvitationUrl={createInvitationUrl} />
             </Clipboard.Provider>
           </Tabs.Tabpanel>
+
+          {panels.map((panel) => (
+            <Tabs.Tabpanel key={panel.id} value={panel.id} classNames='pli-3 @md:pli-5 max-bs-dvh overflow-y-auto'>
+              <Surface role={`space-settings--${panel.id}`} data={data} />
+            </Tabs.Tabpanel>
+          ))}
         </Tabs.Viewport>
       </Tabs.Root>
     </Dialog.Content>

package/src/components/SpaceSettings/SpaceSettingsPanel.stories.tsx

@@ -7,16 +7,15 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { useStoryClientData, withClientProvider } from '@dxos/react-client/testing';
+import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { SpaceSettingsPanel, type SpaceSettingsPanelProps } from './SpaceSettingsPanel';
 import translations from '../../translations';
 
 const Story = (args: Partial<SpaceSettingsPanelProps>) => {
-  const { space } = useStoryClientData();
-
-  return <SpaceSettingsPanel {...args} space={space!} />;
+  const { space } = useClientProvider();
+  return <SpaceSettingsPanel {...args} space={space!} classNames='p-2 border border-primary-500 rounded' />;
 };
 
 const meta: Meta = {
@@ -24,7 +23,10 @@ const meta: Meta = {
   component: SpaceSettingsPanel,
   render: Story,
   decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme],
-  parameters: { translations },
+  parameters: {
+    translations,
+    layout: 'centered',
+  },
 };
 
 export default meta;

package/src/components/SpaceSettings/SpaceSettingsPanel.tsx

@@ -8,16 +8,16 @@ import { log } from '@dxos/log';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { Input, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormInput } from '@dxos/react-ui-form';
+import { type ThemedClassName, Input, useTranslation } from '@dxos/react-ui';
+import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 
 import { SPACE_PLUGIN } from '../../meta';
 
-export type SpaceSettingsPanelProps = {
+export type SpaceSettingsPanelProps = ThemedClassName<{
   space: Space;
-};
+}>;
 
-export const SpaceSettingsPanel = ({ space }: SpaceSettingsPanelProps) => {
+export const SpaceSettingsPanel = ({ classNames, space }: SpaceSettingsPanelProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
 
   const client = useClient();
@@ -40,7 +40,7 @@ export const SpaceSettingsPanel = ({ space }: SpaceSettingsPanelProps) => {
   );
 
   return (
-    <div role='form' className='flex flex-col'>
+    <DeprecatedFormContainer>
       <DeprecatedFormInput label={t('name label')}>
         <Input.TextInput
           placeholder={t('unnamed space label')}
@@ -55,6 +55,6 @@ export const SpaceSettingsPanel = ({ space }: SpaceSettingsPanelProps) => {
           <Input.Switch checked={edgeReplication} onCheckedChange={toggleEdgeReplication} />
         </DeprecatedFormInput>
       )}
-    </div>
+    </DeprecatedFormContainer>
   );
 };