@dxos/plugin-github 0.6.8-main.046e6cf

package/src/components/GithubApiProviders/OctokitProvider.tsx

@@ -0,0 +1,60 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Octokit } from 'octokit';
+import React, { type Context, createContext, type PropsWithChildren, useContext, useEffect, useState } from 'react';
+
+import { log } from '@dxos/log';
+
+export type OctokitContextValue = {
+  pat?: string;
+  setPat: (pat?: string) => void;
+  patError: 'failed' | null; // TODO(burdon): Remove/generalize?
+  octokit: Octokit | null;
+};
+
+export const OctokitContext: Context<OctokitContextValue> = createContext<OctokitContextValue>({
+  setPat: () => {},
+  patError: null,
+  octokit: null,
+});
+
+export const useOctokitContext = () => useContext(OctokitContext);
+
+export const OctokitProvider = ({
+  pat,
+  onPatChanged,
+  children,
+}: PropsWithChildren<{ pat?: string; onPatChanged?: (pat: string | undefined) => void }>) => {
+  const [octokit, setOctokit] = useState<Octokit | null>(null);
+  const [patError, setPatError] = useState<OctokitContextValue['patError']>(null);
+
+  useEffect(() => {
+    if (pat && !octokit) {
+      void setPat(pat);
+    }
+  }, [pat, octokit]);
+
+  const setPat = async (pat?: string) => {
+    onPatChanged?.(pat);
+    if (pat) {
+      const octokit = new Octokit({ auth: pat });
+      return octokit.rest.users.getAuthenticated().then(
+        () => {
+          setPatError(null);
+          setOctokit(octokit);
+        },
+        (err) => {
+          log.warn('Failed to authenticate Octokit from PAT', err);
+          setPatError('failed');
+          setOctokit(null);
+        },
+      );
+    } else {
+      setOctokit(null);
+    }
+  };
+
+  return <OctokitContext.Provider value={{ pat, setPat, patError, octokit }}>{children}</OctokitContext.Provider>;
+};

package/src/components/GithubApiProviders/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './GitHubSettings';
+export * from './OctokitProvider';

package/src/components/GithubEchoResolverProviders/DocumentTreeItem.tsx

@@ -0,0 +1,26 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { TextAa } from '@phosphor-icons/react';
+import React from 'react';
+
+import { type DocumentType } from '@dxos/plugin-markdown/types';
+import { useTranslation, TreeItem } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { GITHUB_PLUGIN } from '../../meta';
+
+export const DocumentTreeItem = ({ document }: { document: DocumentType }) => {
+  const { t } = useTranslation(GITHUB_PLUGIN);
+  return (
+    <TreeItem.Root classNames='flex gap-2'>
+      <TreeItem.Heading classNames='contents'>
+        <TextAa weight='regular' className={mx(getSize(4), 'shrink-0 mbs-2')} />
+        <span className='grow mbs-2 text-sm no-leading'>
+          {document.name || t('document title placeholder', { ns: 'dxos.org/plugin/markdown' })}
+        </span>
+      </TreeItem.Heading>
+    </TreeItem.Root>
+  );
+};

package/src/components/GithubEchoResolverProviders/ResolverContext.tsx

@@ -0,0 +1,140 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, {
+  type Context,
+  createContext,
+  type PropsWithChildren,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import { create } from '@dxos/echo-schema';
+import { log } from '@dxos/log';
+import { DocumentType, TextType } from '@dxos/plugin-markdown/types';
+import { useMulticastObservable } from '@dxos/react-client';
+import { getMeta, type Space, SpaceState, useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+
+import { type DocumentResolverProps, type SpaceResolverProps } from './ResolverProps';
+import { displayName, matchSpace } from './spaceResolvers';
+
+const getLocationIdentifier = () => {
+  const searchParams = new URLSearchParams(window.location.search);
+  const location = searchParams.get('location');
+  let source, id;
+  try {
+    const url = location ? new URL(location) : undefined;
+    source = url?.hostname.split('.').reverse().join('.');
+    id = url?.pathname.slice(1);
+  } catch (err) {
+    log.catch(err);
+  }
+  return [source, id];
+};
+
+export const SpaceResolverContext: Context<SpaceResolverProps> = createContext<SpaceResolverProps>({
+  space: null,
+  setSpace: (_space) => {},
+});
+
+export const SpaceResolverProvider = ({ children }: PropsWithChildren<{}>) => {
+  const identity = useIdentity();
+  const identityHex = identity?.identityKey.toHex();
+  const [source, id] = getLocationIdentifier();
+  const spaces = useSpaces({ all: true });
+
+  const [nextSpace, setSpace] = useState<Space | null>(null);
+
+  const space = useMemo(
+    () =>
+      nextSpace ?? (identityHex ? spaces.find((space) => matchSpace(space, identityHex, source, id)) ?? null : null),
+    [spaces, nextSpace, identityHex, source, id],
+  );
+
+  return (
+    <SpaceResolverContext.Provider value={{ space, setSpace, source, id, identityHex }}>
+      {children}
+    </SpaceResolverContext.Provider>
+  );
+};
+
+const defaultDocumentResolverContext: DocumentResolverProps = {
+  document: null,
+  setDocument: (_document) => {},
+};
+
+export const DocumentResolverContext: Context<DocumentResolverProps> =
+  createContext<DocumentResolverProps>(defaultDocumentResolverContext);
+
+const DocumentResolverProviderImpl = ({
+  space,
+  source,
+  id,
+  children,
+}: PropsWithChildren<{ space: Space; source: string; id: string }>) => {
+  const spaceState = useMulticastObservable(space.state);
+  const [document, setDocument] = useState<DocumentType | null>(null);
+  const defaultDisplayName = displayName(source, id);
+
+  const documents = useQuery(space, (obj) => {
+    const keys = getMeta(obj)?.keys;
+    return keys?.find((key: any) => key.source === source && key.id === id);
+  });
+
+  useEffect(() => {
+    const handler = (event: MessageEvent) => {
+      if (event.source !== window.parent || spaceState !== SpaceState.SPACE_READY) {
+        return;
+      }
+
+      if (event.data.type === 'initial-data') {
+        const nextDocument = space.db.add(
+          create(
+            DocumentType,
+            {
+              name: defaultDisplayName,
+              content: create(TextType, { content: event.data.content }),
+              threads: [],
+            },
+            {
+              keys: [{ source, id }],
+            },
+          ),
+        );
+
+        setDocument(nextDocument);
+      }
+    };
+
+    // todo(thure): Won't this always be the case initially?
+    if (documents.length === 0) {
+      window.addEventListener('message', handler);
+      window.parent.postMessage({ type: 'request-initial-data' }, 'https://github.com');
+      return () => window.removeEventListener('message', handler);
+    } else {
+      setDocument(documents[0] as DocumentType);
+    }
+  }, [spaceState, space, documents]);
+
+  return (
+    <DocumentResolverContext.Provider value={{ document, setDocument }}>{children}</DocumentResolverContext.Provider>
+  );
+};
+
+export const DocumentResolverProvider = ({ children }: PropsWithChildren<{}>) => {
+  const { space, source, id } = useContext(SpaceResolverContext);
+
+  return space && source && id ? (
+    <DocumentResolverProviderImpl space={space} source={source} id={id}>
+      {children}
+    </DocumentResolverProviderImpl>
+  ) : (
+    <DocumentResolverContext.Provider value={defaultDocumentResolverContext}>
+      {children}
+    </DocumentResolverContext.Provider>
+  );
+};

package/src/components/GithubEchoResolverProviders/ResolverDialog.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { Button, useTranslation } from '@dxos/react-ui';
+
+import { ResolverTree } from './ResolverTree';
+import { GITHUB_PLUGIN } from '../../meta';
+
+export const ResolverDialog = ({
+  handleJoinSpace,
+  handleCreateSpace,
+}: {
+  handleJoinSpace?: () => void;
+  handleCreateSpace?: () => void;
+}) => {
+  const { t } = useTranslation(GITHUB_PLUGIN);
+
+  return (
+    <>
+      <ResolverTree />
+      <div role='group' className='shrink-0 flex is-full gap-2'>
+        <Button classNames='grow' onClick={handleCreateSpace}>
+          {t('create space label', { ns: 'appkit' })}
+        </Button>
+        <Button classNames='grow' onClick={handleJoinSpace}>
+          {t('join space label', { ns: 'appkit' })}
+        </Button>
+      </div>
+    </>
+  );
+};

package/src/components/GithubEchoResolverProviders/ResolverProps.ts

@@ -0,0 +1,23 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Dispatch, type SetStateAction } from 'react';
+
+import { type DocumentType } from '@dxos/plugin-markdown/types';
+import { type Space } from '@dxos/react-client/echo';
+
+export type SpaceResolverProps = {
+  space: Space | null;
+  setSpace: Dispatch<SetStateAction<Space | null>>;
+  source?: string;
+  id?: string;
+  identityHex?: string;
+};
+
+export type DocumentResolverProps = {
+  document: DocumentType | null;
+  setDocument: Dispatch<SetStateAction<DocumentType | null>>;
+};
+
+export type ResolverProps = SpaceResolverProps & DocumentResolverProps;

package/src/components/GithubEchoResolverProviders/ResolverTree.tsx

@@ -0,0 +1,86 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useContext } from 'react';
+
+import { useClient } from '@dxos/react-client';
+import { useSpaces, type Space } from '@dxos/react-client/echo';
+import { Button, Dialog, Tree, useId, useTranslation } from '@dxos/react-ui';
+
+import { SpaceResolverContext } from './ResolverContext';
+import { SpacePickerTreeItem } from './SpacePickerTreeItem';
+import { bindSpace, unbindSpace } from './spaceResolvers';
+import { GITHUB_PLUGIN } from '../../meta';
+
+export const ResolverTree = () => {
+  const client = useClient();
+  const spaces = useSpaces({ all: true });
+  const treeLabel = useId('treeLabel');
+  const { t } = useTranslation(GITHUB_PLUGIN);
+  const {
+    space: selectedSpace,
+    setSpace: setSelectedSpace,
+    source,
+    id,
+    identityHex,
+  } = useContext(SpaceResolverContext);
+  const setSpace = useCallback(
+    (nextSpace: Space | null) => {
+      if (identityHex && source && id) {
+        selectedSpace && unbindSpace(selectedSpace, identityHex, source, id);
+        nextSpace && bindSpace(nextSpace, identityHex, source, id);
+      }
+      setSelectedSpace(nextSpace);
+    },
+    [selectedSpace, setSelectedSpace, identityHex, source, id],
+  );
+  return spaces.length ? (
+    <>
+      {' '}
+      <Dialog.Title tabIndex={-1} classNames='shrink-0'>
+        {t('resolver tree label')}
+      </Dialog.Title>
+      <Dialog.Description>{t('resolver tree description')}</Dialog.Description>
+      <div role='separator' className='shrink-0 bs-px bg-neutral-500/20 mlb-1' />
+      <Tree.Root
+        aria-label={t('resolver tree label')}
+        data-testid='composer.sidebarTree'
+        classNames='overflow-y-auto -mli-2 p-2'
+      >
+        {spaces.map((space) => {
+          return (
+            <SpacePickerTreeItem
+              key={space.key.toHex()}
+              {...{
+                space,
+                selected: selectedSpace === space,
+                setSpace,
+                identityHex: identityHex!,
+                source: source!,
+                id: id!,
+              }}
+            />
+          );
+        })}
+      </Tree.Root>
+    </>
+  ) : (
+    <>
+      <h1 className='text-lg font-normal' id={treeLabel}>
+        {t('resolver no spaces message')}
+      </h1>
+      <div role='separator' className='bs-px bg-neutral-500/20 mlb-2' />
+      <Button
+        classNames='block is-full'
+        onClick={async () => {
+          const space = await client.spaces.create();
+          bindSpace(space, identityHex!, source!, id!);
+          setSpace(space);
+        }}
+      >
+        {t('resolver create space label')}
+      </Button>
+    </>
+  );
+};

package/src/components/GithubEchoResolverProviders/SpacePickerTreeItem.tsx

@@ -0,0 +1,105 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretDown, CaretRight } from '@phosphor-icons/react';
+import React, { useMemo, useState } from 'react';
+
+import { DocumentType } from '@dxos/plugin-markdown/types';
+import { getSpaceDisplayName } from '@dxos/plugin-space';
+import { useMulticastObservable } from '@dxos/react-client';
+import { type Space, SpaceState, useQuery, Filter } from '@dxos/react-client/echo';
+import { Button, Tag, Tooltip, Tree, TreeItem, useTranslation } from '@dxos/react-ui';
+import { staticDisabled } from '@dxos/react-ui-theme';
+
+import { DocumentTreeItem } from './DocumentTreeItem';
+import { matchSpace } from './spaceResolvers';
+import { GITHUB_PLUGIN } from '../../meta';
+
+export const SpacePickerTreeItem = ({
+  identityHex,
+  space,
+  source,
+  id,
+  setSpace,
+  selected,
+}: {
+  identityHex: string;
+  space: Space;
+  setSpace: (nextSpace: Space | null) => void;
+  source: string;
+  id: string;
+  selected?: boolean;
+}) => {
+  const { t } = useTranslation(GITHUB_PLUGIN);
+  const spaceSate = useMulticastObservable(space.state);
+  const disabled = spaceSate !== SpaceState.SPACE_READY;
+  const spaceDisplayName = getSpaceDisplayName(space);
+  const documents = useQuery(space, Filter.schema(DocumentType));
+  const hasDocuments = documents.length > 0;
+
+  const [open, setOpen] = useState(false);
+
+  const nBoundMembers = useMemo(() => {
+    return Object.keys(space.properties.members ?? {}).filter((identityHex) =>
+      matchSpace(space, identityHex, source, id),
+    ).length;
+  }, [source, id, space.properties]);
+
+  const OpenTriggerIcon = open ? CaretDown : CaretRight;
+
+  return (
+    <TreeItem.Root
+      collapsible
+      open={open}
+      onOpenChange={setOpen}
+      classNames={['mbe-2 block', disabled && staticDisabled]}
+      {...(disabled && { 'aria-disabled': true })}
+    >
+      <div role='none' className='flex items-center gap-2'>
+        {hasDocuments ? (
+          <TreeItem.OpenTrigger>
+            <OpenTriggerIcon />
+          </TreeItem.OpenTrigger>
+        ) : (
+          <TreeItem.OpenTrigger disabled classNames={staticDisabled}>
+            <CaretRight />
+          </TreeItem.OpenTrigger>
+        )}
+        <TreeItem.Heading
+          classNames='grow break-words pbs-1 text-base font-medium'
+          data-testid='composer.spaceTreeItemHeading'
+        >
+          {Array.isArray(spaceDisplayName) ? t(...spaceDisplayName) : spaceDisplayName}
+        </TreeItem.Heading>
+        {nBoundMembers > 0 && (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Tag palette='info' aria-label={t('bound members message', { count: nBoundMembers })}>
+                {nBoundMembers}
+              </Tag>
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content side='bottom'>
+                <Tooltip.Arrow />
+                {t('bound members message', { count: nBoundMembers })}
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+        )}
+        <Button disabled={selected} density='fine' classNames='shrink-0' onClick={() => setSpace(space)}>
+          {t(selected ? 'selected label' : 'select label')}
+        </Button>
+      </div>
+      <TreeItem.Body className='pis-4'>
+        {hasDocuments && (
+          <Tree.Branch>
+            {documents.map((document) => (
+              <DocumentTreeItem key={document.id} document={document} />
+            ))}
+          </Tree.Branch>
+        )}
+      </TreeItem.Body>
+    </TreeItem.Root>
+  );
+};

package/src/components/GithubEchoResolverProviders/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './ResolverDialog';
+export * from './ResolverContext';

package/src/components/GithubEchoResolverProviders/spaceResolvers.ts

@@ -0,0 +1,86 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import get from 'lodash.get';
+import update from 'lodash.update';
+
+import { type Space } from '@dxos/react-client/echo';
+
+// todo(thure): Why is the value that gets set in `ghBind` always undefined by the time this is called?
+const ghMatch = (space: Space, identityHex: string, id: string): boolean => {
+  const [ghOwner, ghRepo, ..._ghEtc] = id.split('/');
+  return get(space.properties, ['members', identityHex, 'github', 'repos'], []).includes(`${ghOwner}/${ghRepo}`);
+};
+
+export const matchSpace = (space: Space, identityHex: string, source?: string, id?: string) => {
+  if (!id) {
+    return false;
+  }
+  switch (source) {
+    case 'github.com':
+      return ghMatch(space, identityHex, id);
+    default:
+      return false;
+  }
+};
+
+// todo(thure): Why does the new space.properties value not propagate?
+const ghBind = (space: Space, identityHex: string, id: string): string[] => {
+  const [ghOwner, ghRepo, ..._ghEtc] = id.split('/');
+  update(space.properties, ['members', identityHex, 'github', 'repos'], (ghBindings) => {
+    return [...(ghBindings ?? []), `${ghOwner}/${ghRepo}`];
+  });
+  return space.properties.members?.[identityHex]?.github?.repos ?? [];
+};
+
+export const bindSpace = (space: Space, identityHex: string, source: string, id: string): string[] => {
+  switch (source) {
+    case 'github.com':
+      return ghBind(space, identityHex, id);
+    default:
+      return [];
+  }
+};
+const ghUnbind = (space: Space, identityHex: string, id: string): string[] => {
+  const [ghOwner, ghRepo, ..._ghEtc] = id.split('/');
+  update(space.properties, ['members', identityHex, 'github', 'repos'], (ghBindings) => {
+    const index = ghBindings.indexOf(`${ghOwner}/${ghRepo}`);
+    if (index >= 0) {
+      const result = [...ghBindings];
+      result.splice(index, 1);
+      return result;
+    } else {
+      return ghBindings;
+    }
+  });
+  return space.properties.members?.[identityHex]?.github?.repos ?? [];
+};
+
+export const unbindSpace = (space: Space, identityHex: string, source: string, id: string): string[] => {
+  switch (source) {
+    case 'github.com':
+      return ghUnbind(space, identityHex, id);
+    default:
+      return [];
+  }
+};
+
+const ghDisplayName = (id: string): string => {
+  const [ghOwner, ghRepo, ghResource, ...etc] = id.split('/');
+  switch (ghResource) {
+    case 'issues':
+      return `${ghOwner}/${ghRepo} #${etc[0]}`;
+    default:
+      return `${ghOwner}/${ghRepo} ${[ghResource, ...etc].join('/')}`;
+  }
+};
+
+export const displayName = (source: string, id: string): string => {
+  switch (source) {
+    case 'github.com':
+      return ghDisplayName(id);
+    default:
+      return id;
+  }
+};

package/src/components/ImportDialog.tsx

@@ -0,0 +1,72 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { log } from '@dxos/log';
+import { Button, Dialog, useTranslation } from '@dxos/react-ui';
+
+import { useOctokitContext } from './GithubApiProviders';
+import { GITHUB_PLUGIN } from '../meta';
+import type { GhFileIdentifier, GhIdentifier, GhIssueIdentifier } from '../types';
+
+export const ImportDialog = ({ docGhId, onUpdate }: { docGhId: GhIdentifier; onUpdate: (content: string) => void }) => {
+  const { t } = useTranslation(GITHUB_PLUGIN);
+  const { octokit } = useOctokitContext();
+
+  const importGhIssueContent = useCallback(async () => {
+    if (octokit && docGhId && 'issueNumber') {
+      try {
+        const { owner, repo, issueNumber } = docGhId as GhIssueIdentifier;
+        const { data } = await octokit.rest.issues.get({ owner, repo, issue_number: issueNumber });
+        onUpdate(data.body ?? '');
+      } catch (err) {
+        log.error('Failed to import from Github issue', err);
+      }
+    } else {
+      log.error('Not prepared to import from Github issue when requested.');
+    }
+  }, [octokit, docGhId]);
+
+  const importGhFileContent = useCallback(async () => {
+    if (octokit && docGhId && 'path' in docGhId) {
+      try {
+        const { owner, repo, path } = docGhId as GhFileIdentifier;
+        const { data } = await octokit.rest.repos.getContent({ owner, repo, path });
+        if (!Array.isArray(data) && data.type === 'file') {
+          onUpdate(atob(data.content));
+        } else {
+          log.error('Did not receive file with content from Github.');
+        }
+      } catch (err) {
+        log.error('Failed to import from Github file', err);
+      }
+    } else {
+      log.error('Not prepared to import from Github file when requested.');
+    }
+  }, [octokit, docGhId]);
+
+  const handleGhImport = useCallback(() => {
+    return (
+      docGhId && ('issueNumber' in docGhId ? importGhIssueContent() : 'path' in docGhId ? importGhFileContent() : null)
+    );
+  }, [importGhIssueContent, importGhFileContent, docGhId]);
+
+  return (
+    <Dialog.Content>
+      <Dialog.Title>{t('confirm import title')}</Dialog.Title>
+      <p className='plb-2'>{t('confirm import body')}</p>
+      <div role='none' className='flex justify-end gap-2'>
+        <Dialog.Close asChild>
+          <Button>{t('cancel label', { ns: 'appkit' })}</Button>
+        </Dialog.Close>
+        <Dialog.Close asChild>
+          <Button variant='primary' onClick={handleGhImport}>
+            {t('import from github label')}
+          </Button>
+        </Dialog.Close>
+      </div>
+    </Dialog.Content>
+  );
+};