@dxos/plugin-space 0.8.4-main.c1de068 → 0.8.4-main.c85a9c8dae

package/src/components/ObjectDetailsPanel.tsx

@@ -1,77 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback } from 'react';
-
-import { type JsonPath, setValue } from '@dxos/echo-schema';
-import { invariant } from '@dxos/invariant';
-import { useClient } from '@dxos/react-client';
-import { getSpace, Filter, useQuery, useSchema } from '@dxos/react-client/echo';
-import { Callout, useTranslation } from '@dxos/react-ui';
-import { useSelected } from '@dxos/react-ui-attention';
-import { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';
-import { type DataType } from '@dxos/schema';
-import { isNonNullable } from '@dxos/util';
-
-import { SPACE_PLUGIN } from '../meta';
-
-type RowDetailsPanelProps = { objectId: string; view: DataType.View };
-
-const ObjectDetailsPanel = ({ objectId, view }: RowDetailsPanelProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const client = useClient();
-  const space = getSpace(view);
-  const schema = useSchema(client, space, view.query?.typename);
-
-  const queriedObjects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
-  const selectedRows = useSelected(objectId, 'multi');
-  const selectedObjects = selectedRows.map((id) => queriedObjects.find((obj) => obj.id === id)).filter(isNonNullable);
-
-  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
-
-  const handleSave = useCallback(
-    (values: any, { changed }: { changed: Record<JsonPath, boolean> }) => {
-      const id = values.id;
-      invariant(typeof id === 'string');
-      const object = queriedObjects.find((obj) => obj.id === id);
-      invariant(object);
-
-      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
-      for (const path of changedPaths) {
-        const value = values[path];
-        setValue(object, path, value);
-      }
-    },
-    [queriedObjects],
-  );
-
-  if (selectedObjects.length === 0) {
-    return (
-      <div role='none' className='plb-cardSpacingBlock pli-cardSpacingInline'>
-        <Callout.Root classNames='is-full'>
-          <Callout.Title>{t('row details no selection label')}</Callout.Title>
-        </Callout.Root>
-      </div>
-    );
-  }
-
-  return (
-    <div role='none' className='bs-full is-full flex flex-col p-2 gap-1 overflow-y-auto'>
-      {schema &&
-        selectedObjects.map((object) => (
-          <div key={object.id} className='border border-separator rounded'>
-            <Form
-              autoSave
-              schema={schema}
-              values={object}
-              onSave={handleSave}
-              onQueryRefOptions={handleRefQueryLookup}
-            />
-          </div>
-        ))}
-    </div>
-  );
-};
-
-export default ObjectDetailsPanel;

package/src/components/ObjectSettings/AdvancedObjectSettings.tsx

@@ -1,80 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useCallback, useState } from 'react';
-
-import { Obj } from '@dxos/echo';
-import { ForeignKey } from '@dxos/echo-schema';
-import { IconButton, useTranslation } from '@dxos/react-ui';
-import { Form } from '@dxos/react-ui-form';
-
-import { ForeignKeys } from './ForeignKeys';
-import { SPACE_PLUGIN } from '../../meta';
-
-const initialValues = {
-  source: '',
-  id: '',
-};
-
-export type AdvancedObjectSettingsProps = {
-  object: Obj.Any;
-};
-
-export const AdvancedObjectSettings = ({ object }: AdvancedObjectSettingsProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const [adding, setAdding] = useState(false);
-  const { keys } = Obj.getMeta(object);
-
-  const handleNew = useCallback(() => setAdding(true), []);
-  const handleCancel = useCallback(() => setAdding(false), []);
-  const handleSave = useCallback(
-    (key: ForeignKey) => {
-      const index = keys.findIndex(({ source, id }) => source === key.source && id === key.id);
-      if (index === -1) {
-        keys.push(key);
-      }
-      setAdding(false);
-    },
-    [keys],
-  );
-  const handleDelete = useCallback(
-    (key: ForeignKey) => {
-      const index = keys.findIndex(({ source, id }) => source === key.source && id === key.id);
-      if (index !== -1) {
-        keys.splice(index, 1);
-      }
-    },
-    [keys],
-  );
-
-  // TODO(wittjosiah): This should be wrapped in an "Advanced" accordion.
-  return (
-    <>
-      <div className='p-2 flex flex-col gap-4'>
-        <h2>{t('advanced settings label')}</h2>
-        <div className='flex items-center'>
-          <h3 className='text-sm font-semibold'>{t('foreign keys')}</h3>
-          <div className='grow' />
-          <IconButton
-            classNames={adding && 'invisible'}
-            icon='ph--plus--regular'
-            label={t('add key')}
-            onClick={handleNew}
-          />
-        </div>
-        {!adding && <ForeignKeys keys={keys} onDelete={handleDelete} />}
-      </div>
-
-      {adding && (
-        <Form
-          outerSpacing={false}
-          schema={ForeignKey}
-          values={initialValues}
-          onSave={handleSave}
-          onCancel={handleCancel}
-        />
-      )}
-    </>
-  );
-};

package/src/components/ObjectSettings/BaseObjectSettings.tsx

@@ -1,47 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { type PropsWithChildren, useRef } from 'react';
-
-import { type Obj } from '@dxos/echo';
-import { Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-
-import { meta } from '../../meta';
-
-export type BaseObjectSettingsProps = ThemedClassName<
-  PropsWithChildren<{
-    object: Obj.Any;
-  }>
->;
-
-export const BaseObjectSettings = ({ classNames, children, object }: BaseObjectSettingsProps) => {
-  const { t } = useTranslation(meta.id);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // TODO(wittjosiah): This should be a form based on the schema of the object.
-  //  The form should only include fields with a specific settings annotation.
-  //  Perhaps also including the field of the title annotation as well.
-  return (
-    <>
-      <Input.Root>
-        <Input.Label>{t('name label')}</Input.Label>
-        <Input.TextInput
-          ref={inputRef}
-          placeholder={t('name placeholder')}
-          // TODO(burdon): Use annotation to get the name field.
-          value={(object as any).name ?? ''}
-          onChange={(event) => {
-            (object as any).name = event.target.value;
-          }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              inputRef.current?.blur();
-            }
-          }}
-        />
-      </Input.Root>
-      {children}
-    </>
-  );
-};

package/src/components/ObjectSettings/ObjectSettingsContainer.tsx

@@ -1,36 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { Surface } from '@dxos/app-framework';
-import { type Obj } from '@dxos/echo';
-import { Clipboard } from '@dxos/react-ui';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { BaseObjectSettings } from './BaseObjectSettings';
-
-export type ObjectSettingsContainerProps = {
-  object: Obj.Any;
-  role: string;
-};
-
-export const ObjectSettingsContainer = ({ object, role }: ObjectSettingsContainerProps) => {
-  const data = useMemo(() => ({ subject: object }), [object]);
-
-  return (
-    <Clipboard.Provider>
-      <StackItem.Content toolbar={false}>
-        <div role='none' className='overflow-y-auto pli-cardSpacingInline plb-cardSpacingBlock'>
-          <BaseObjectSettings object={object}>
-            <Surface role='base-object-settings' data={data} />
-          </BaseObjectSettings>
-          <Surface role='object-settings' data={data} />
-          {/* TODO(wittjosiah): Remove? */}
-          {/* <AdvancedObjectSettings object={object} /> */}
-        </div>
-      </StackItem.Content>
-    </Clipboard.Provider>
-  );
-};

package/src/components/ObjectSettings/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './ObjectSettingsContainer';

package/src/components/PersistenceStatus.tsx

@@ -1,83 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useEffect, useState } from 'react';
-
-import { debounce } from '@dxos/async';
-import { type EchoDatabase } from '@dxos/react-client/echo';
-import { Icon, Tooltip, useTranslation } from '@dxos/react-ui';
-import { mx, staticPlaceholderText, warningText } from '@dxos/react-ui-theme';
-
-import { SPACE_PLUGIN } from '../meta';
-
-enum Status {
-  PERSISTED_LOCALLY = 0,
-  PENDING = 1,
-  ERROR = 2,
-}
-
-// TODO(zan): This now has no usages. Remove it?
-export const PersistenceStatus = ({ db }: { db: EchoDatabase }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const [displayMessage, setDisplayMessage] = useState(false);
-  const [status, naturalSetStatus] = useState<Status>(Status.PERSISTED_LOCALLY);
-  const [prevStatus, setPrevStatus] = useState<Status>(Status.PERSISTED_LOCALLY);
-  const _setStatus = debounce(naturalSetStatus, 500);
-
-  // TODO(dmaretskyi): Fix this when we have save status for automerge.
-  // useEffect(() => {
-  //   return db.pendingBatch.on(({ duration, error }) => {
-  //     if (error) {
-  //       setStatus(Status.ERROR);
-  //     } else if (duration === undefined) {
-  //       setStatus(Status.PENDING);
-  //     } else {
-  //       setStatus(Status.PERSISTED_LOCALLY);
-  //     }
-  //   });
-  // }, [db]);
-
-  useEffect(() => {
-    // If this is changed outside the effect it's batched with setStatus and the following condition will never be true.
-    setPrevStatus(status);
-
-    if (prevStatus !== status && status === Status.PERSISTED_LOCALLY) {
-      setDisplayMessage(true);
-      const timeout = setTimeout(() => setDisplayMessage(false), 5000);
-      return () => clearTimeout(timeout);
-    }
-  }, [status]); // `prevStatus` omitted from dependency array to prevent timeout from being reset.
-
-  switch (status) {
-    case Status.ERROR:
-      return (
-        <div className='flex items-center'>
-          <Icon icon='ph--warning--regular' size={4} classNames='me-1' />
-          <span className={mx('text-sm', warningText)}>{t('persistence error label')}</span>
-        </div>
-      );
-    case Status.PENDING:
-      return (
-        <div className='flex items-center'>
-          <Icon icon='ph--arrows-counter-clockwise--regular' size={4} classNames='me-1' />
-          <span className={mx('text-sm', staticPlaceholderText)}>{t('persistence pending label')}</span>
-        </div>
-      );
-    case Status.PERSISTED_LOCALLY:
-    default:
-      return (
-        <Tooltip.Trigger
-          delayDuration={400}
-          role='status'
-          content={t('persisted locally message')}
-          className='flex items-center'
-        >
-          <Icon icon='ph--check-circle--regular' size={4} classNames='me-1' />
-          {displayMessage && (
-            <span className={mx('text-sm', staticPlaceholderText)}>{t('persisted locally label')}</span>
-          )}
-        </Tooltip.Trigger>
-      );
-  }
-};

package/src/components/PopoverRenameObject.tsx

@@ -1,62 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useCallback, useRef, useState } from 'react';
-
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
-import { type Live } from '@dxos/live-object';
-import { log } from '@dxos/log';
-import { Button, Input, useTranslation } from '@dxos/react-ui';
-
-import { SPACE_PLUGIN } from '../meta';
-
-export const POPOVER_RENAME_OBJECT = `${SPACE_PLUGIN}/PopoverRenameObject`;
-
-export const PopoverRenameObject = ({ object: obj }: { object: Live<any> }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const doneButton = useRef<HTMLButtonElement>(null);
-  // TODO(wittjosiah): Use schema here.
-  const object = obj as any;
-  // TODO(burdon): Field should not be hardcoded field.
-  const [name, setName] = useState(object.name || object.title || '');
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-
-  const handleDone = useCallback(() => {
-    try {
-      object.name = name;
-    } catch (err) {
-      try {
-        object.title = name;
-      } catch {
-        log.error('Failed to rename object', { err });
-      }
-    }
-    void dispatch(
-      createIntent(LayoutAction.UpdatePopover, {
-        part: 'popover',
-        options: { variant: 'react', anchorId: '', state: false },
-      }),
-    );
-  }, [object, name]);
-
-  return (
-    <div role='none' className='p-2 flex gap-2'>
-      <div role='none' className='flex-1'>
-        <Input.Root>
-          <Input.Label srOnly>{t('object name label')}</Input.Label>
-          <Input.TextInput
-            placeholder={t('object placeholder')}
-            value={name}
-            data-testid='spacePlugin.renameObject.input'
-            onChange={({ target: { value } }) => setName(value)}
-            onKeyDown={({ key }) => key === 'Enter' && doneButton.current?.click()}
-          />
-        </Input.Root>
-      </div>
-      <Button ref={doneButton} classNames='self-stretch' onClick={handleDone}>
-        {t('done label', { ns: 'os' })}
-      </Button>
-    </div>
-  );
-};

package/src/components/SchemaContainer.tsx

@@ -1,59 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useState, useEffect } from 'react';
-
-import { type Type } from '@dxos/echo';
-import { type Space } from '@dxos/react-client/echo';
-import { useTranslation } from '@dxos/react-ui';
-import { controlItemClasses, ControlPage, ControlSection } from '@dxos/react-ui-form';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { SPACE_PLUGIN } from '../meta';
-
-type SchemaPanelProps = { space: Space };
-
-// TODO(ZaymonFC):
-//   - Support deleting Schema. This should tie in to some sort of
-//     'DangerZone™️' / 'Are you really sure?' / 'this might have consequences' component.
-
-/**
- * Subscribe to and retrieve all schemas from a space's schema registry.
- */
-export const useQuerySpaceSchemas = (space: Space): Type.Schema[] => {
-  const [schemas, setSchemas] = useState<Type.Schema[]>([]);
-
-  useEffect(() => {
-    const query = space.db.schemaRegistry.query();
-    const initialResults = query.runSync();
-    setSchemas(initialResults);
-
-    const unsubscribe = query.subscribe(() => setSchemas(query.results));
-    return () => unsubscribe();
-  }, [space]);
-
-  return schemas;
-};
-
-export const SchemaContainer = ({ space }: SchemaPanelProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const schemas = useQuerySpaceSchemas(space);
-
-  return (
-    <StackItem.Content classNames='block overflow-y-auto'>
-      <ControlPage>
-        <ControlSection title={t('schema verbose label')} description={t('schema description')}>
-          <div role='none' className={controlItemClasses}>
-            {schemas.length === 0 && <div className='text-center plb-4'>{t('no schemas found message')}</div>}
-            {schemas.map((schema) => (
-              <div key={schema.id}>
-                <div>{schema.typename}</div>
-              </div>
-            ))}
-          </div>
-        </ControlSection>
-      </ControlPage>
-    </StackItem.Content>
-  );
-};

package/src/components/SpacePluginSettings.tsx

@@ -1,53 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { useClient } from '@dxos/react-client';
-import { useSpaces } from '@dxos/react-client/echo';
-import { Input, toLocalizedString, useTranslation, List, ListItem, IconButton } from '@dxos/react-ui';
-import { controlItemClasses, ControlPage, ControlSection, DeprecatedFormInput } from '@dxos/react-ui-form';
-
-import { SPACE_PLUGIN } from '../meta';
-import { SpaceAction, type SpaceSettingsProps } from '../types';
-import { getSpaceDisplayName } from '../util';
-
-export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const client = useClient();
-  const spaces = useSpaces({ all: settings.showHidden });
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-
-  // TODO(wittjosiah): Migrate to new form container.
-  return (
-    <ControlPage>
-      <ControlSection title={t('space settings label')} description={t('space settings description')}>
-        <div className='pli-trimMd container-max-width'>
-          <DeprecatedFormInput label={t('show hidden spaces label')}>
-            <Input.Switch
-              checked={settings.showHidden}
-              onCheckedChange={(checked) => (settings.showHidden = !!checked)}
-            />
-          </DeprecatedFormInput>
-        </div>
-        <List classNames={[controlItemClasses, 'flex flex-col gap-trimSm']}>
-          {spaces.map((space) => (
-            <ListItem.Root key={space.id} classNames='is-full items-center'>
-              {/* TODO(burdon): Should auto center and truncate; NOTE truncate doesn't work with flex grow. */}
-              <ListItem.Heading classNames='grow truncate !min-bs-0'>
-                {toLocalizedString(getSpaceDisplayName(space, { personal: space === client.spaces.default }), t)}
-              </ListItem.Heading>
-              <IconButton
-                icon='ph--faders--regular'
-                onClick={() => dispatch(createIntent(SpaceAction.OpenSettings, { space }))}
-                label={t('open space settings label')}
-              />
-            </ListItem.Root>
-          ))}
-        </List>
-      </ControlSection>
-    </ControlPage>
-  );
-};

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

@@ -1,38 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/storybook-utils';
-
-import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
-import { translations } from '../../translations';
-
-const Story = (args: Partial<SpaceSettingsContainerProps>) => {
-  const { space } = useClientProvider();
-  return (
-    <div role='none' className='p-2 border border-primary-500 rounded'>
-      <SpaceSettingsContainer {...args} space={space!} />
-    </div>
-  );
-};
-
-const meta: Meta = {
-  title: 'plugins/plugin-space/SpaceSettingsContainer',
-  component: SpaceSettingsContainer,
-  render: Story,
-  decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme],
-  parameters: {
-    translations,
-    layout: 'centered',
-  },
-};
-
-export default meta;
-
-export const Default: StoryObj<typeof SpaceSettingsContainer> = {};