@instantdb/components 0.0.1

package/src/components/explorer/recently-deleted.tsx

@@ -0,0 +1,344 @@
+import React from 'react';
+import { ActionForm, Button, Divider, useDialog } from '@lib/components/ui';
+import { errorToast } from '../toast';
+import { SchemaNamespace, DBAttr } from '@lib/types';
+import useSWR from 'swr';
+import { InstantReactWebDatabase } from '@instantdb/react';
+import { useEffect, useState } from 'react';
+import { ArrowPathIcon, ClockIcon } from '@heroicons/react/24/outline';
+import { InstantAPIError } from '@instantdb/core';
+import { ExpandableDeletedAttr } from './expandable-deleted-attr';
+import { useAttrNotes } from '@lib/hooks/useAttrNotes';
+import { useMemo } from 'react';
+import { add, formatDistanceToNow, format } from 'date-fns';
+import { useExplorerProps } from '.';
+
+// -----
+// Types
+
+export type SoftDeletedAttr = Omit<DBAttr, 'metadata'> & {
+  'deletion-marked-at': string;
+  metadata: {
+    soft_delete_snapshot?: {
+      is_indexed: boolean;
+      is_required: boolean;
+      id_attr_id: string;
+    };
+  };
+};
+
+type DeletedNamespace = {
+  idAttr: SoftDeletedAttr;
+  remainingCols: SoftDeletedAttr[];
+};
+
+// -----
+// Hooks
+
+export const useRecentlyDeletedAttrs = (appId: string) => {
+  const explorerProps = useExplorerProps();
+
+  const token = explorerProps.adminToken;
+  const result = useSWR(['recently-deleted', appId], async () => {
+    const response = await fetch(
+      `${explorerProps.apiURI}/dash/apps/${appId}/soft_deleted_attrs`,
+      {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      },
+    );
+    const data = await response.json();
+    if (!response.ok) {
+      console.error('Failed to fetch recently deleted attrs', data);
+      throw new Error(
+        'Failed to fetch recently deleted attrs' + JSON.stringify(data),
+      );
+    }
+    const transformedData = {
+      ...data,
+      attrs: data.attrs.map(withoutDeletionMarkers),
+    };
+
+    const successfulData = transformedData as {
+      attrs: SoftDeletedAttr[];
+      'grace-period-days': number;
+    };
+
+    return successfulData;
+  });
+
+  return result;
+};
+
+export const useRecentlyDeletedNamespaces = (
+  appId: string,
+): DeletedNamespace[] => {
+  const { data } = useRecentlyDeletedAttrs(appId);
+  const deletedNamespaces = useMemo(() => {
+    const attrs = data?.attrs || [];
+    const idAttrs = attrs.filter((a) => {
+      return a['forward-identity'][2] === 'id';
+    });
+    const mapping = idAttrs.map((a) => {
+      const cols = attrs.filter(
+        (x) => x.metadata.soft_delete_snapshot?.id_attr_id === a.id,
+      );
+      return { idAttr: a, remainingCols: cols.filter((c) => a.id !== c.id) };
+    });
+
+    return mapping;
+  }, [data?.attrs]);
+
+  return deletedNamespaces;
+};
+
+// -------
+// RecentlyDeletedNamespaces
+
+export function RecentlyDeletedNamespaces({
+  appId,
+  db,
+}: {
+  db: InstantReactWebDatabase<any>;
+  appId: string;
+}) {
+  const { data, mutate } = useRecentlyDeletedAttrs(appId);
+  const deletedNamespaces = useRecentlyDeletedNamespaces(appId);
+  const gracePeriodDays = data?.['grace-period-days'] || 2;
+
+  const onRestore = async ({ idAttr, remainingCols }: DeletedNamespace) => {
+    if (!db) return;
+    if (!data) return;
+    const ids = [idAttr, ...remainingCols].map((a) => a.id);
+    await db.core._reactor.pushOps(
+      ids.map((attrId) => ['restore-attr', attrId]),
+    );
+    const idSet = new Set(ids);
+    mutate({
+      ...data,
+      attrs: data.attrs.filter((attr) => !idSet.has(attr.id)),
+    });
+  };
+
+  return (
+    <ActionForm className="flex max-w-2xl flex-col gap-4">
+      <h5 className="flex items-center gap-2 text-lg font-bold">
+        Recently Deleted Namespaces
+      </h5>
+      {deletedNamespaces.length ? (
+        <div className="flex flex-col gap-2">
+          {deletedNamespaces
+            .toSorted((a, b) => {
+              return (
+                +new Date(b.idAttr['deletion-marked-at']) -
+                +new Date(a.idAttr['deletion-marked-at'])
+              );
+            })
+            .map((ns) => {
+              const deletionMarkedAt = new Date(
+                ns.idAttr['deletion-marked-at'],
+              );
+              const expiresAt = add(deletionMarkedAt, {
+                days: gracePeriodDays,
+              });
+
+              return (
+                <div
+                  key={ns.idAttr.id}
+                  className="flex items-start justify-between gap-4 border-b py-3 last:border-b-0 dark:border-neutral-700"
+                >
+                  <div className="min-w-0 flex-1">
+                    <div className="font-semibold dark:text-white">
+                      {ns.idAttr['forward-identity'][1]}
+                    </div>
+                    <div className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
+                      Deleted {format(deletionMarkedAt, 'MMM d, h:mm a')} ·{' '}
+                      expires{' '}
+                      {formatDistanceToNow(expiresAt, {
+                        includeSeconds: false,
+                      })}
+                    </div>
+                    {ns.remainingCols.length > 0 ? (
+                      <div className="mt-1 truncate text-xs text-neutral-500 dark:text-neutral-400">
+                        Columns:{' '}
+                        {ns.remainingCols
+                          .map((attr) => attr['forward-identity'][2])
+                          .join(', ')}
+                      </div>
+                    ) : (
+                      <div className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
+                        No columns
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex shrink-0 items-center">
+                    <Button
+                      size="mini"
+                      variant="secondary"
+                      onClick={() => onRestore(ns)}
+                    >
+                      <ArrowPathIcon className="h-3.5 w-3.5" />
+                      Restore
+                    </Button>
+                  </div>
+                </div>
+              );
+            })}
+        </div>
+      ) : (
+        <p className="text-sm text-neutral-500 dark:text-neutral-400">
+          No recently deleted namespaces.
+        </p>
+      )}
+    </ActionForm>
+  );
+}
+
+// -------
+// RecentlyDeletedAttrs
+
+export const RecentlyDeletedAttrs: React.FC<{
+  namespace: SchemaNamespace;
+  appId: string;
+  db: InstantReactWebDatabase<any>;
+  notes: ReturnType<typeof useAttrNotes>;
+}> = ({ namespace, appId, db, notes }) => {
+  const { data, mutate, error } = useRecentlyDeletedAttrs(appId);
+
+  const [expandedAttr, setExpandedAttr] = useState<string | null>(null);
+
+  const dialog = useDialog();
+
+  const restoreAttr = async (attrId: string) => {
+    if (!db) return;
+    if (!data) return;
+    try {
+      await db.core._reactor.pushOps([['restore-attr', attrId]]);
+      mutate({
+        attrs: data.attrs.filter((attr) => attr.id !== attrId) ?? [],
+        'grace-period-days': data['grace-period-days'],
+      });
+
+      const attr = data.attrs.find((attr) => attr.id === attrId);
+      if (attr) {
+        const possibleMessage = getConstraintMessage(attr);
+        if (possibleMessage) {
+          notes.setNote(attrId, possibleMessage);
+        }
+      }
+    } catch (error) {
+      console.error(error);
+      if (error instanceof InstantAPIError) {
+        if (error.body?.type === 'record-not-unique') {
+          errorToast(
+            'Attribute already exists. Rename existing attribute first and then try again to restore.',
+          );
+        } else {
+          errorToast(error.message);
+        }
+      } else {
+        errorToast('Failed to restore attr');
+      }
+    }
+  };
+
+  const idAttrId = namespace.attrs.find((a) => a.name === 'id')?.id || 'unk';
+
+  const filtered = data?.attrs?.filter(
+    (attr) => attr.metadata?.soft_delete_snapshot?.id_attr_id === idAttrId,
+  );
+
+  useEffect(() => {
+    if (filtered?.length === 0) {
+      dialog.onClose();
+    }
+  }, [filtered]);
+
+  if (error || !filtered || filtered.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="pb-2">
+      <Divider className="pb-2">
+        <div className="flex w-full grow items-center justify-center gap-2 text-center opacity-60">
+          <ClockIcon width={16} />
+          Recently Deleted
+        </div>
+      </Divider>
+      <div className="flex flex-col gap-2">
+        {filtered?.map((attr) => (
+          <ExpandableDeletedAttr
+            isExpanded={expandedAttr === attr.id}
+            setIsExpanded={(isExpanded) => {
+              if (isExpanded) {
+                setExpandedAttr(attr.id);
+              } else {
+                setExpandedAttr(null);
+              }
+            }}
+            key={attr.id}
+            attr={attr}
+            gracePeriodDays={data?.['grace-period-days'] || 2}
+            onRestore={restoreAttr}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// -------
+// RecentlyDeletedNamespaces
+
+// --------
+// Helpers
+
+const deletedMarker = '_deleted$';
+
+const withoutDeletionMarkers = (attr: SoftDeletedAttr): SoftDeletedAttr => {
+  const newAttr = { ...attr };
+  const [fwdId, fwdEtype, fwdLabel] = attr['forward-identity'];
+  newAttr['forward-identity'] = [
+    fwdId,
+    removeDeletedMarker(fwdEtype),
+    removeDeletedMarker(fwdLabel),
+  ];
+  if (attr['reverse-identity']) {
+    const [revId, revEtype, revLabel] = attr['reverse-identity']!;
+    newAttr['reverse-identity'] = [
+      revId,
+      removeDeletedMarker(revEtype),
+      removeDeletedMarker(revLabel),
+    ];
+  }
+  return newAttr;
+};
+
+export const removeDeletedMarker = (s: string): string => {
+  const idx = s.indexOf(deletedMarker);
+  if (idx === -1) return s;
+  return s.slice(idx + deletedMarker.length);
+};
+
+const getConstraintMessage = (attr: SoftDeletedAttr): string | null => {
+  if (attr && attr?.metadata?.soft_delete_snapshot) {
+    if (
+      attr.metadata.soft_delete_snapshot.is_indexed &&
+      attr.metadata.soft_delete_snapshot.is_required
+    ) {
+      return 'Index and required constraints were dropped after restoring';
+    }
+
+    if (attr.metadata.soft_delete_snapshot.is_indexed) {
+      return 'Indexed constraint was dropped after restoring';
+    }
+    if (attr.metadata.soft_delete_snapshot.is_required) {
+      return 'Required constraint was dropped after restoring';
+    }
+    return null;
+  }
+  return null;
+};

package/src/components/explorer/search-input.tsx

@@ -0,0 +1,358 @@
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from '@headlessui/react';
+import { SearchFilter } from '@lib/hooks/explorer';
+import { SchemaAttr } from '@lib/types';
+import { debounce, last } from 'lodash';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { cn } from '../ui';
+
+const excludedSearchAttrs: [string, string][] = [
+  // Exclude computed fields
+  ['$files', 'url'],
+];
+const OPERATORS = [':', '>', '<'] as const;
+type ParsedQueryPart = {
+  field: string;
+  operator: (typeof OPERATORS)[number];
+  value: string;
+};
+function parseSearchQuery(s: string): ParsedQueryPart[] {
+  let fieldStart = 0;
+  let currentPart: ParsedQueryPart | undefined;
+  let valueStart;
+  const parts: ParsedQueryPart[] = [];
+  let i = -1;
+  for (const c of s) {
+    i++;
+
+    if (c === ' ' && !(OPERATORS as readonly string[]).includes(s[i + 1])) {
+      fieldStart = i + 1;
+      continue;
+    }
+    if ((OPERATORS as readonly string[]).includes(c)) {
+      if (currentPart && valueStart != null) {
+        currentPart.value = s.substring(valueStart, fieldStart).trim();
+        parts.push(currentPart);
+      }
+      currentPart = {
+        field: s.substring(fieldStart, i).trim(),
+        operator: c as (typeof OPERATORS)[number],
+        value: '',
+      };
+
+      valueStart = i + 1;
+      continue;
+    }
+  }
+  if (currentPart && valueStart != null) {
+    currentPart.value = s.substring(valueStart).trim();
+    // Might push twice here...
+    parts.push(currentPart);
+  }
+  return parts;
+}
+
+function opToInstaqlOp(op: ':' | '<' | '>'): '=' | '$gt' | '$lt' {
+  switch (op) {
+    case ':':
+      // Not really an instaql op, but we have special handling in
+      // explorer.tsx to turn `=` into {k: v}
+      return '=';
+    case '<':
+      return '$lt';
+    case '>':
+      return '$gt';
+    default:
+      throw new Error('what kind of op is this? ' + op);
+  }
+}
+
+function queryToFilters({
+  query,
+  attrsByName,
+  stringIndexed,
+}: {
+  query: string;
+  attrsByName: { [key: string]: SchemaAttr };
+  stringIndexed: SchemaAttr[];
+}): SearchFilter[] {
+  if (!query.trim()) {
+    return [];
+  }
+  const parsed = parseSearchQuery(query);
+  const parts: SearchFilter[] = parsed.flatMap(
+    (part: ParsedQueryPart): SearchFilter[] => {
+      const attr = attrsByName[part.field];
+      if (!attr || !part.value) {
+        return [];
+      }
+      if (
+        part.value.toLowerCase() === 'null' &&
+        part.operator === ':' &&
+        !attr.isRequired
+      ) {
+        return [[part.field, '$isNull', null]];
+      }
+
+      const res: SearchFilter[] = [];
+      if (attr.checkedDataType && attr.isIndex) {
+        if (attr.checkedDataType === 'string') {
+          const val = part.value;
+          return [
+            [
+              part.field,
+              val === val.toLowerCase() ? '$ilike' : '$like',
+              `%${part.value}%`,
+            ],
+          ];
+        }
+        if (attr.checkedDataType === 'number') {
+          try {
+            return [
+              [
+                part.field,
+                opToInstaqlOp(part.operator),
+                JSON.parse(part.value),
+              ],
+            ];
+          } catch (e) {}
+        }
+        if (attr.checkedDataType === 'date') {
+          try {
+            return [
+              [
+                part.field,
+                opToInstaqlOp(part.operator),
+                JSON.parse(part.value),
+              ],
+            ];
+          } catch (e) {
+            // Might be a string date
+            return [[part.field, opToInstaqlOp(part.operator), part.value]];
+          }
+        }
+      }
+      for (const inferredType of attr.inferredTypes || ['json']) {
+        switch (inferredType) {
+          case 'boolean':
+          case 'number': {
+            try {
+              res.push([
+                part.field,
+                opToInstaqlOp(part.operator),
+                JSON.parse(part.value),
+              ]);
+            } catch (e) {}
+            break;
+          }
+          default: {
+            res.push([part.field, opToInstaqlOp(part.operator), part.value]);
+            break;
+          }
+        }
+      }
+      return res;
+    },
+  );
+
+  if (!parsed.length && query.trim() && stringIndexed.length) {
+    for (const a of stringIndexed) {
+      parts.push([
+        a.name,
+        query.toLowerCase() === query ? '$ilike' : '$like',
+        `%${query.trim()}%`,
+      ]);
+    }
+  }
+  return parts;
+}
+
+function sameFilters(
+  oldFilters: [string, string, string][],
+  newFilters: [string, string, string][],
+): boolean {
+  if (newFilters.length === oldFilters.length) {
+    for (let i = 0; i < newFilters.length; i++) {
+      for (let j = 0; j < 3; j++) {
+        if (newFilters[i][j] !== oldFilters[i][j]) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+  return false;
+}
+
+export function SearchInput({
+  onSearchChange,
+  attrs,
+  initialFilters = [],
+}: {
+  onSearchChange: (filters: SearchFilter[]) => void;
+  attrs?: SchemaAttr[];
+  initialFilters?: SearchFilter[];
+}) {
+  const [query, setQuery] = useState('');
+  const lastFilters = useRef<SearchFilter[]>(initialFilters);
+
+  const { attrsByName, stringIndexed } = useMemo(() => {
+    const byName: { [key: string]: SchemaAttr } = {};
+    const stringIndexed = [];
+    for (const attr of attrs || []) {
+      byName[attr.name] = attr;
+      if (attr.isIndex && attr.checkedDataType === 'string') {
+        stringIndexed.push(attr);
+      }
+    }
+    return { attrsByName: byName, stringIndexed };
+  }, [attrs]);
+
+  const searchDebounce = useCallback(
+    debounce((query) => {
+      const filters = queryToFilters({ query, attrsByName, stringIndexed });
+      if (!sameFilters(lastFilters.current, filters)) {
+        lastFilters.current = filters;
+        onSearchChange(filters);
+      }
+    }, 80),
+    [attrsByName, stringIndexed, lastFilters],
+  );
+
+  const lastQuerySegment =
+    query.indexOf(':') !== -1 ? last(query.split(' ')) : query;
+
+  const comboOptions: { field: string; operator: string; display: string }[] = (
+    attrs || []
+  ).flatMap((a) => {
+    const isExcluded = excludedSearchAttrs.some(
+      ([ns, name]) => ns === a.namespace && name === a.name,
+    );
+    if (a.type === 'ref' || isExcluded) {
+      return [];
+    }
+
+    const ops = [];
+
+    const opCandidates = [];
+    opCandidates.push({
+      field: a.name,
+      operator: ':',
+      display: `${a.name}:`,
+    });
+    if (
+      a.isIndex &&
+      (a.checkedDataType === 'number' || a.checkedDataType === 'date')
+    ) {
+      const base = {
+        field: a.name,
+        query: null,
+      };
+      opCandidates.push({ ...base, operator: '<', display: `${a.name}<` });
+      opCandidates.push({ ...base, operator: '>', display: `${a.name}>` });
+    }
+
+    for (const op of opCandidates) {
+      if (
+        !lastQuerySegment ||
+        (op.display.startsWith(lastQuerySegment) &&
+          op.display !== lastQuerySegment)
+      ) {
+        ops.push(op);
+      }
+    }
+    return ops;
+  });
+
+  const activeOption = useRef<(typeof comboOptions)[0] | null>(null);
+
+  function completeQuery(optionDisplay: string) {
+    let q;
+    if (lastQuerySegment && optionDisplay.startsWith(lastQuerySegment)) {
+      q = `${query}${optionDisplay.substring(lastQuerySegment.length)}`;
+    } else {
+      q = `${query.trim()} ${optionDisplay}`;
+    }
+    setQuery(q);
+    searchDebounce(q);
+  }
+
+  // Set initial search query based on filters
+  useEffect(() => {
+    if (initialFilters.length > 0 && !query) {
+      // Simple conversion - this could be improved
+      setQuery(initialFilters.map((f) => `${f[0]}:${f[2]}`).join(' '));
+    }
+  }, [initialFilters]);
+
+  return (
+    <Combobox
+      value={query}
+      onChange={(option) => {
+        if (option) {
+          completeQuery(option);
+        }
+      }}
+      immediate={true}
+    >
+      <ComboboxInput
+        size={32}
+        className="rounded-md border border-neutral-300 px-3 py-2 text-sm dark:border-neutral-700 dark:bg-neutral-800 dark:text-white dark:placeholder:text-neutral-500"
+        value={query}
+        onChange={(e) => {
+          setQuery(e.target.value);
+          searchDebounce(e.target.value);
+        }}
+        onKeyDown={(e) => {
+          // Prevent the combobox's default action that inserts
+          // the active option and tabs out of the input.
+          // Inserting the option doesn't work in our case, because
+          // it's just the start of a query, you still need to add
+          // the value
+          if (e.key === 'Tab' && comboOptions.length) {
+            e.preventDefault();
+
+            const active = activeOption.current || comboOptions[0];
+            if (active) {
+              completeQuery(active.display);
+            }
+          }
+        }}
+        placeholder="Filter..."
+      />
+      <ComboboxOptions
+        anchor="bottom start"
+        modal={false}
+        className="z-10 mt-1 w-(--input-width) divide-y overflow-auto rounded-md border border-neutral-300 bg-white shadow-lg dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-800"
+      >
+        {comboOptions.map((o, i) => (
+          <ComboboxOption
+            key={i}
+            value={o.display}
+            className={cn(
+              'px-3 py-1 data-focus:bg-blue-100 dark:text-white dark:data-focus:bg-neutral-700',
+              {},
+            )}
+          >
+            {({ focus }) => {
+              if (focus) {
+                activeOption.current = o;
+              }
+              return <span>{o.display}</span>;
+            }}
+          </ComboboxOption>
+        ))}
+      </ComboboxOptions>
+    </Combobox>
+  );
+}