feat: add smart view with custom json (#2000)

2022-11-15 18:58:13 +05:30
parent 7732f55a28
commit 68991abba7
10 changed files with 387 additions and 10 deletions
--- a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
+++ b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
@@ -10,35 +10,113 @@ import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
 import Spinner from '@/Components/Spinner/Spinner'
 import { Platform } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { AddSmartViewModalController } from './AddSmartViewModalController'
+import TabPanel from '../Tabs/TabPanel'
+import { useTabState } from '../Tabs/useTabState'
+import TabsContainer from '../Tabs/TabsContainer'
+import CopyableCodeBlock from '../Shared/CopyableCodeBlock'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
+import { classNames } from '@/Utils/ConcatenateClassNames'

 type Props = {
  controller: AddSmartViewModalController
  platform: Platform
 }

+const ConflictedNotesExampleCode = `{
+  "keypath": "content.conflict_of.length",
+  "operator": ">",
+  "value": 0
+}`
+
+const ComplexCompoundExampleCode = `{
+  "operator": "and",
+  "value": [
+    {
+      "operator": "not",
+      "value": {
+        "keypath": "tags",
+        "operator": "includes",
+        "value": {
+          "keypath": "title",
+          "operator": "=",
+          "value": "completed"
+        }
+      }
+    },
+    {
+      "keypath": "tags",
+      "operator": "includes",
+      "value": {
+        "keypath": "title",
+        "operator": "=",
+        "value": "todo"
+      }
+    }
+  ]
+}
+`
+
 const AddSmartViewModal = ({ controller, platform }: Props) => {
-  const { isSaving, title, setTitle, icon, setIcon, closeModal, saveCurrentSmartView, predicateController } = controller
+  const {
+    isSaving,
+    title,
+    setTitle,
+    icon,
+    setIcon,
+    closeModal,
+    saveCurrentSmartView,
+    predicateController,
+    customPredicateJson,
+    setCustomPredicateJson,
+    isCustomJsonValidPredicate,
+    setIsCustomJsonValidPredicate,
+    validateAndPrettifyCustomPredicate,
+  } = controller

  const titleInputRef = useRef<HTMLInputElement>(null)
+  const customJsonInputRef = useRef<HTMLTextAreaElement>(null)

  const [shouldShowIconPicker, setShouldShowIconPicker] = useState(false)
  const iconPickerButtonRef = useRef<HTMLButtonElement>(null)

+  const [shouldShowJsonExamples, setShouldShowJsonExamples] = useState(false)
+
  const toggleIconPicker = () => {
    setShouldShowIconPicker((shouldShow) => !shouldShow)
  }

+  const tabState = useTabState({
+    defaultTab: 'builder',
+  })
+
  const save = () => {
    if (!title.length) {
      titleInputRef.current?.focus()
      return
    }

+    if (tabState.activeTab === 'custom' && !isCustomJsonValidPredicate) {
+      validateAndPrettifyCustomPredicate()
+      return
+    }
+
    void saveCurrentSmartView()
  }

+  const canSave = tabState.activeTab === 'builder' || isCustomJsonValidPredicate
+
+  useEffect(() => {
+    if (!customJsonInputRef.current) {
+      return
+    }
+
+    if (tabState.activeTab === 'custom' && isCustomJsonValidPredicate === false) {
+      customJsonInputRef.current.focus()
+    }
+  }, [isCustomJsonValidPredicate, tabState.activeTab])
+
  return (
    <ModalDialog>
      <ModalDialogLabel closeDialog={closeModal}>Add Smart View</ModalDialogLabel>
@@ -88,17 +166,68 @@ const AddSmartViewModal = ({ controller, platform }: Props) => {
          </div>
          <div className="flex flex-col gap-2.5">
            <div className="text-sm font-semibold">Predicate:</div>
-            <CompoundPredicateBuilder controller={predicateController} />
+            <TabsContainer
+              tabs={[
+                {
+                  id: 'builder',
+                  title: 'Builder',
+                },
+                {
+                  id: 'custom',
+                  title: 'Custom (JSON)',
+                },
+              ]}
+              state={tabState}
+            >
+              <TabPanel state={tabState} id="builder" className="flex flex-col gap-2.5 p-4">
+                <CompoundPredicateBuilder controller={predicateController} />
+              </TabPanel>
+              <TabPanel state={tabState} id="custom">
+                <textarea
+                  className="h-full min-h-[10rem] w-full resize-none bg-default py-1.5 px-2.5 font-mono text-sm"
+                  value={customPredicateJson}
+                  onChange={(event) => {
+                    setCustomPredicateJson(event.target.value)
+                    setIsCustomJsonValidPredicate(undefined)
+                  }}
+                  spellCheck={false}
+                  ref={customJsonInputRef}
+                />
+                {customPredicateJson && isCustomJsonValidPredicate === false && (
+                  <div className="mt-2 border-t border-border px-2.5 py-1.5 text-sm text-danger">
+                    Invalid JSON. Double check your entry and try again.
+                  </div>
+                )}
+              </TabPanel>
+            </TabsContainer>
+            {tabState.activeTab === 'custom' && (
+              <Disclosure open={shouldShowJsonExamples} onChange={() => setShouldShowJsonExamples((show) => !show)}>
+                <div className="flex flex-col gap-1.5 rounded-md border-2 border-info-backdrop bg-info-backdrop py-3 px-4">
+                  <DisclosureButton className="flex items-center justify-between focus:shadow-none focus:outline-none">
+                    <div className="text-sm font-semibold">Examples</div>
+                    <Icon type={shouldShowJsonExamples ? 'chevron-up' : 'chevron-down'} />
+                  </DisclosureButton>
+                  <DisclosurePanel className={classNames(shouldShowJsonExamples && 'flex', 'flex-col gap-2.5')}>
+                    <div className="text-sm font-medium">1. List notes that are conflicted copies of another note:</div>
+                    <CopyableCodeBlock code={ConflictedNotesExampleCode} />
+                    <div className="text-sm font-medium">
+                      2. List notes that have the tag `todo` but not the tag `completed`:
+                    </div>
+                    <CopyableCodeBlock code={ComplexCompoundExampleCode} />
+                  </DisclosurePanel>
+                </div>
+              </Disclosure>
+            )}
          </div>
        </div>
      </ModalDialogDescription>
      <ModalDialogButtons>
-        <Button disabled={isSaving} onClick={save}>
-          {isSaving ? <Spinner className="h-4.5 w-4.5" /> : 'Save'}
-        </Button>
-        <Button disabled={isSaving} onClick={closeModal}>
+        <Button disabled={isSaving} onClick={closeModal} className="mr-auto">
          Cancel
        </Button>
+        <Button disabled={isSaving} onClick={save} colorStyle={canSave ? 'info' : 'default'} primary={canSave}>
+          {isSaving ? <Spinner className="h-4.5 w-4.5" /> : canSave ? 'Save' : 'Validate'}
+        </Button>
      </ModalDialogButtons>
    </ModalDialog>
  )
--- a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModalController.ts
+++ b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModalController.ts
@@ -1,6 +1,6 @@
 import { WebApplication } from '@/Application/Application'
 import { CompoundPredicateBuilderController } from '@/Components/SmartViewBuilder/CompoundPredicateBuilderController'
-import { predicateFromJson } from '@standardnotes/snjs'
+import { predicateFromJson, PredicateJsonForm } from '@standardnotes/snjs'
 import { action, makeObservable, observable } from 'mobx'

 export class AddSmartViewModalController {
@@ -13,6 +13,9 @@ export class AddSmartViewModalController {

  predicateController = new CompoundPredicateBuilderController()

+  customPredicateJson: string | undefined = undefined
+  isCustomJsonValidPredicate: boolean | undefined = undefined
+
  constructor(private application: WebApplication) {
    makeObservable(this, {
      isAddingSmartView: observable,
@@ -26,6 +29,11 @@ export class AddSmartViewModalController {

      icon: observable,
      setIcon: action,
+
+      customPredicateJson: observable,
+      isCustomJsonValidPredicate: observable,
+      setCustomPredicateJson: action,
+      setIsCustomJsonValidPredicate: action,
    })
  }

@@ -45,12 +53,22 @@ export class AddSmartViewModalController {
    this.icon = icon
  }

+  setCustomPredicateJson = (customPredicateJson: string) => {
+    this.customPredicateJson = customPredicateJson
+  }
+
+  setIsCustomJsonValidPredicate = (isCustomJsonValidPredicate: boolean | undefined) => {
+    this.isCustomJsonValidPredicate = isCustomJsonValidPredicate
+  }
+
  closeModal = () => {
    this.setIsAddingSmartView(false)
    this.setTitle('')
    this.setIcon('')
    this.setIsSaving(false)
    this.predicateController.resetState()
+    this.setCustomPredicateJson('')
+    this.setIsCustomJsonValidPredicate(undefined)
  }

  saveCurrentSmartView = async () => {
@@ -61,10 +79,36 @@ export class AddSmartViewModalController {
      return
    }

-    const predicate = predicateFromJson(this.predicateController.toJson())
+    const predicateJson =
+      this.customPredicateJson && this.isCustomJsonValidPredicate
+        ? JSON.parse(this.customPredicateJson)
+        : this.predicateController.toJson()
+    const predicate = predicateFromJson(predicateJson as PredicateJsonForm)
    await this.application.items.createSmartView(this.title, predicate, this.icon)

    this.setIsSaving(false)
    this.closeModal()
  }
+
+  validateAndPrettifyCustomPredicate = () => {
+    if (!this.customPredicateJson) {
+      this.setIsCustomJsonValidPredicate(false)
+      return
+    }
+
+    try {
+      const parsedPredicate: PredicateJsonForm = JSON.parse(this.customPredicateJson)
+      const predicate = predicateFromJson(parsedPredicate)
+
+      if (predicate) {
+        this.setCustomPredicateJson(JSON.stringify(parsedPredicate, null, 2))
+        this.setIsCustomJsonValidPredicate(true)
+      } else {
+        this.setIsCustomJsonValidPredicate(false)
+      }
+    } catch (error) {
+      this.setIsCustomJsonValidPredicate(false)
+      return
+    }
+  }
 }
--- a/packages/web/src/javascripts/Components/SmartViewBuilder/CompoundPredicateBuilder.tsx
+++ b/packages/web/src/javascripts/Components/SmartViewBuilder/CompoundPredicateBuilder.tsx
@@ -44,7 +44,7 @@ const CompoundPredicateBuilder = ({ controller }: Props) => {
      </div>
      {predicates.map((predicate, index) => (
        <div className="flex flex-col gap-2.5" key={index}>
-          <div className="flex w-full items-center gap-2">
+          <div className="flex w-full flex-col gap-2 md:flex-row md:items-center">
            {index !== 0 && <div className="mr-2 text-sm font-semibold">{operator === 'and' ? 'AND' : 'OR'}</div>}
            <select
              className="flex-grow rounded border border-border bg-default py-1.5 px-2 focus:outline focus:outline-1 focus:outline-info"