@dxos/plugin-debug 0.8.3 → 0.8.4-main.1c7ec43d41

package/src/components/DebugSettings.tsx

@@ -1,151 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useEffect, useState } from 'react';
-
-import { Capabilities, useCapabilities } from '@dxos/app-framework';
-import { type ConfigProto, defs, SaveConfig, Storage } from '@dxos/config';
-import { log } from '@dxos/log';
-import { useClient } from '@dxos/react-client';
-import { useTranslation, Button, Toast, Input, useFileDownload, Select, Icon } from '@dxos/react-ui';
-import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
-import { setDeep } from '@dxos/util';
-
-import { DEBUG_PLUGIN } from '../meta';
-import { type DebugSettingsProps } from '../types';
-
-type Toast = {
-  title: string;
-  description?: string;
-};
-
-const StorageAdapters = {
-  opfs: defs.Runtime.Client.Storage.StorageDriver.WEBFS,
-  idb: defs.Runtime.Client.Storage.StorageDriver.IDB,
-} as const;
-
-export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) => {
-  const { t } = useTranslation(DEBUG_PLUGIN);
-  const [toast, setToast] = useState<Toast>();
-  const client = useClient();
-  const download = useFileDownload();
-  // TODO(mykola): Get updates from other places that change Config.
-  const [storageConfig, setStorageConfig] = useState<ConfigProto>({});
-  const [upload] = useCapabilities(Capabilities.FileUploader);
-
-  useEffect(() => {
-    void Storage().then((config) => setStorageConfig(config));
-  }, []);
-
-  const handleToast = (toast: Toast) => {
-    setToast(toast);
-    const t = setTimeout(() => setToast(undefined), 5_000);
-    return () => clearTimeout(t);
-  };
-
-  const handleDownload = async () => {
-    const data = await client.diagnostics();
-    const file = new Blob([JSON.stringify(data, undefined, 2)], { type: 'text/plain' });
-    const fileName = `composer-${new Date().toISOString().replace(/\W/g, '-')}.json`;
-    download(file, fileName);
-
-    if (upload) {
-      const info = await upload(new File([file], fileName), client.spaces.default);
-      if (!info) {
-        log.error('diagnostics failed to upload to IPFS');
-        return;
-      }
-      handleToast({ title: t('settings uploaded'), description: t('settings uploaded to clipboard') });
-
-      // TODO(nf): move to IpfsPlugin?
-      const url = client.config.values.runtime!.services!.ipfs!.gateway + '/' + info.cid;
-      void navigator.clipboard.writeText(url);
-      handleToast({ title: t('settings uploaded'), description: t('settings uploaded to clipboard') });
-      log.info('diagnostics', { url });
-    }
-  };
-
-  const handleRepair = async () => {
-    try {
-      const info = await client.repair();
-      setStorageConfig(await Storage());
-      handleToast({ title: t('settings repair success'), description: JSON.stringify(info, undefined, 2) });
-    } catch (err: any) {
-      handleToast({ title: t('settings repair failed'), description: err.message });
-    }
-  };
-
-  return (
-    <DeprecatedFormContainer>
-      <DeprecatedFormInput label={t('settings wireframe')}>
-        <Input.Switch checked={settings.wireframe} onCheckedChange={(checked) => (settings.wireframe = !!checked)} />
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings download diagnostics')}>
-        <Button onClick={handleDownload}>
-          <Icon icon='ph--download-simple--regular' size={5} />
-        </Button>
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings repair')}>
-        <Button onClick={handleRepair}>
-          <Icon icon='ph--first-aid-kit--regular' size={5} />
-        </Button>
-      </DeprecatedFormInput>
-
-      {/* TODO(burdon): Move to layout? */}
-      {toast && (
-        <Toast.Root>
-          <Toast.Body>
-            <Toast.Title>
-              <Icon icon='ph--gift--duotone' size={5} classNames='inline mr-1' />
-              <span>{toast.title}</span>
-            </Toast.Title>
-            {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
-          </Toast.Body>
-        </Toast.Root>
-      )}
-
-      <DeprecatedFormInput label={t('settings choose storage adaptor')}>
-        <Select.Root
-          value={
-            Object.entries(StorageAdapters).find(
-              ([name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
-            )?.[0]
-          }
-          onValueChange={(value) => {
-            if (confirm(t('settings storage adapter changed alert'))) {
-              updateConfig(
-                storageConfig,
-                setStorageConfig,
-                ['runtime', 'client', 'storage', 'dataStore'],
-                StorageAdapters[value as keyof typeof StorageAdapters],
-              );
-            }
-          }}
-        >
-          <Select.TriggerButton placeholder={t('settings data store label')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {Object.keys(StorageAdapters).map((key) => (
-                  <Select.Option key={key} value={key}>
-                    {t(`settings storage adaptor ${key} label`)}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
-    </DeprecatedFormContainer>
-  );
-};
-
-const updateConfig = (config: ConfigProto, setConfig: (newConfig: ConfigProto) => void, path: string[], value: any) => {
-  const storageConfigCopy = JSON.parse(JSON.stringify(config ?? {}));
-  setDeep(storageConfigCopy, path, value);
-  setConfig(storageConfigCopy);
-  queueMicrotask(async () => {
-    await SaveConfig(storageConfigCopy);
-  });
-};

package/src/components/DevtoolsOverviewContainer.tsx

@@ -1,20 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { Surface } from '@dxos/app-framework';
-import { StatsPanel, useStats } from '@dxos/devtools';
-
-export const DevtoolsOverviewContainer = () => {
-  const [stats, refreshStats] = useStats();
-
-  return (
-    <StatsPanel stats={stats} onRefresh={refreshStats}>
-      <Surface role='devtools-overview' />
-    </StatsPanel>
-  );
-};
-
-export default DevtoolsOverviewContainer;

package/src/components/SpaceGenerator/SpaceGenerator.stories.tsx

@@ -1,52 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react';
-import React from 'react';
-
-import { IntentPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { useSpaces } from '@dxos/react-client/echo';
-import { render, withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { SpaceGenerator } from './SpaceGenerator';
-
-const DefaultStory = () => {
-  const [space] = useSpaces();
-  if (!space) {
-    return null;
-  }
-
-  return <SpaceGenerator space={space} />;
-};
-
-const meta: Meta = {
-  title: 'plugins/plugin-debug/SpaceGenerator',
-  component: SpaceGenerator,
-  render: render(DefaultStory),
-  decorators: [
-    withPluginManager({
-      plugins: [
-        ClientPlugin({
-          onClientInitialized: async (_, client) => {
-            await client.halo.createIdentity();
-          },
-        }),
-        IntentPlugin(),
-      ],
-    }),
-    withLayout(),
-    withTheme,
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-
-export const Default = {};

package/src/components/SpaceGenerator/SpaceGenerator.tsx

@@ -1,179 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useCallback, useMemo, useState } from 'react';
-
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { ComputeGraph } from '@dxos/conductor';
-import { Filter, Obj, Type } from '@dxos/echo';
-import { log } from '@dxos/log';
-import { DocumentType } from '@dxos/plugin-markdown/types';
-import { SheetType } from '@dxos/plugin-sheet/types';
-import { DiagramType } from '@dxos/plugin-sketch/types';
-import { SpaceAction } from '@dxos/plugin-space/types';
-import { useClient } from '@dxos/react-client';
-import { getTypename, type Space } from '@dxos/react-client/echo';
-import { IconButton, Input, Toolbar, useAsyncEffect } from '@dxos/react-ui';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { initializeTable, TableType } from '@dxos/react-ui-table';
-import { DataType } from '@dxos/schema';
-import { jsonKeyReplacer, sortKeys } from '@dxos/util';
-
-import { createGenerator, staticGenerators, type ObjectGenerator } from './ObjectGenerator';
-import { SchemaTable } from './SchemaTable';
-import { generator } from './presets';
-
-export type SpaceGeneratorProps = {
-  space: Space;
-  onCreateObjects?: (objects: Obj.Any[]) => void;
-};
-
-export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const client = useClient();
-  const staticTypes = [DocumentType, DiagramType, SheetType, ComputeGraph]; // TODO(burdon): Make extensible.
-  const mutableTypes = [DataType.Organization, DataType.Project, DataType.Person, DataType.Message];
-  const [count, setCount] = useState(1);
-  const [info, setInfo] = useState<any>({});
-  const presets = useMemo(() => generator(), []);
-
-  // Create type generators.
-  const typeMap = useMemo(() => {
-    client.addTypes([...staticTypes, ...presets.schemas]);
-    const mutableGenerators = new Map<string, ObjectGenerator<any>>(
-      mutableTypes.map((type) => [type.typename, createGenerator(type as any)]),
-    );
-
-    return new Map([...staticGenerators, ...presets.items, ...mutableGenerators]);
-  }, [client, mutableTypes]);
-
-  // Query space to get info.
-  const updateInfo = async () => {
-    // Create schema map.
-    const echoSchema = await space.db.schemaRegistry.query().run();
-    const staticSchema = space.db.graph.schemaRegistry.schemas;
-
-    // Create object map.
-    const { objects } = await space.db.query(Filter.everything()).run();
-    const objectMap = sortKeys(
-      objects.reduce<Record<string, number>>((map, obj) => {
-        const type = getTypename(obj);
-        if (type) {
-          const count = map[type] ?? 0;
-          map[type] = count + 1;
-        }
-        return map;
-      }, {}),
-    );
-
-    setInfo({
-      schema: {
-        static: staticSchema.length,
-        mutable: echoSchema.length,
-      },
-      objects: objectMap,
-    });
-  };
-
-  useAsyncEffect(updateInfo, [space]);
-
-  const handleCreateData = useCallback(
-    async (typename: string) => {
-      const constructor = typeMap.get(typename);
-      if (constructor) {
-        // TODO(burdon): Input to specify number of objects.
-        await constructor(space, count, onCreateObjects);
-        await updateInfo();
-      }
-    },
-    [typeMap, count],
-  );
-
-  // TODO(wittjosiah): Remove. Replace with proper echo import.
-  const handleLoadTables = useCallback(async () => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = '.json';
-
-    input.onchange = async (e) => {
-      const file = (e.target as HTMLInputElement).files?.[0];
-      if (!file) {
-        return;
-      }
-
-      try {
-        const content = await file.text();
-        const data = JSON.parse(content);
-        const schemas = await space.db.schemaRegistry.register(data.schemas.map(Type.toEffectSchema));
-        // TODO(wittjosiah): If the schema is already registered this should skip.
-        await Promise.all(
-          schemas.map(async (schema) => {
-            const parts = schema.typename.split('/');
-            const name = parts[parts.length - 1];
-            const table = Obj.make(TableType, { name, threads: [] });
-            await initializeTable({ client, space, table, typename: schema.typename });
-            await dispatch(createIntent(SpaceAction.AddObject, { target: space, object: table }));
-            return table;
-          }),
-        );
-        // TODO(wittjosiah): This should query the space for schemas.
-        await Promise.all(
-          data.objects.map(async ({ id, '@type': typename, ...fields }: any) => {
-            const schema = schemas.find((s) => `dxn:type:${s.typename}:${s.version}` === typename);
-            if (!schema) {
-              log.warn('Missing schema for object', { id, typename });
-              return;
-            }
-            const object = Obj.make(schema, fields);
-            space.db.add(object);
-            return object;
-          }),
-        );
-      } catch (err) {
-        log.catch(err);
-      }
-    };
-
-    input.click();
-  }, []);
-
-  return (
-    <div role='none' className='flex flex-col grow overflow-hidden'>
-      <Toolbar.Root classNames='border-be border-subduedSeparator'>
-        <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' onClick={updateInfo} />
-        <IconButton
-          icon='ph--file-arrow-up--regular'
-          iconOnly
-          label='Load tables from JSON'
-          onClick={handleLoadTables}
-        />
-        <Toolbar.Separator variant='gap' />
-        <Input.Root>
-          <Input.TextInput
-            type='number'
-            min={1}
-            max={100}
-            placeholder={'Count'}
-            classNames='!w-[4rem] !text-right'
-            size={8}
-            value={count}
-            onChange={(ev) => setCount(parseInt(ev.target.value))}
-          />
-        </Input.Root>
-      </Toolbar.Root>
-
-      <div className='flex flex-col overflow-y-auto divide-y divide-separator'>
-        <SchemaTable types={staticTypes} objects={info.objects} label='Static Types' onClick={handleCreateData} />
-        <SchemaTable types={mutableTypes} objects={info.objects} label='Mutable Types' onClick={handleCreateData} />
-        <SchemaTable types={presets.types} objects={info.objects} label='Presets' onClick={handleCreateData} />
-
-        <div>
-          <SyntaxHighlighter classNames='flex text-xs' language='json'>
-            {JSON.stringify({ space, ...info }, jsonKeyReplacer({ truncate: true }), 2)}
-          </SyntaxHighlighter>
-        </div>
-      </div>
-    </div>
-  );
-};