fix: show files option in linking menu even if not entitled

2022-11-13 15:10:57 -06:00
parent 2b76d48392
commit f42657fa9e
10 changed files with 216 additions and 183 deletions
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
@@ -1,156 +1,17 @@
+import { FeatureName } from '@/Controllers/FeatureName'
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { FilesController } from '@/Controllers/FilesController'
 import { LinkingController } from '@/Controllers/LinkingController'
 import { classNames } from '@/Utils/ConcatenateClassNames'
-import { formatDateForContextMenu } from '@/Utils/DateUtils'
-import { getIconForItem } from '@/Utils/Items/Icons/getIconForItem'
 import { getLinkingSearchResults } from '@/Utils/Items/Search/getSearchResults'
-import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'
-import { formatSizeToReadableString } from '@standardnotes/filepicker'
-import { FileItem } from '@standardnotes/snjs'
-import { KeyboardKey } from '@standardnotes/ui-services'
 import { observer } from 'mobx-react-lite'
 import { ChangeEventHandler, useEffect, useRef, useState } from 'react'
 import { useApplication } from '../ApplicationView/ApplicationProvider'
-import { PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
 import ClearInputButton from '../ClearInputButton/ClearInputButton'
 import Icon from '../Icon/Icon'
 import DecoratedInput from '../Input/DecoratedInput'
-import MenuItem from '../Menu/MenuItem'
-import { MenuItemType } from '../Menu/MenuItemType'
-import Popover from '../Popover/Popover'
-import HorizontalSeparator from '../Shared/HorizontalSeparator'
-import LinkedFileMenuOptions from './LinkedFileMenuOptions'
-import LinkedItemMeta from './LinkedItemMeta'
 import LinkedItemSearchResults from './LinkedItemSearchResults'
-
-const LinkedItemsSectionItem = ({
-  activateItem,
-  item,
-  searchQuery,
-  unlinkItem,
-  handleFileAction,
-}: {
-  activateItem: LinkingController['activateItem']
-  item: LinkableItem
-  searchQuery?: string
-  unlinkItem: () => void
-  handleFileAction: FilesController['handleFileAction']
-}) => {
-  const menuButtonRef = useRef<HTMLButtonElement>(null)
-  const application = useApplication()
-
-  const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const toggleMenu = () => setIsMenuOpen((open) => !open)
-
-  const [isRenamingFile, setIsRenamingFile] = useState(false)
-
-  const [icon, className] = getIconForItem(item, application)
-  const title = item.title ?? ''
-
-  const renameFile = async (name: string) => {
-    if (!(item instanceof FileItem)) {
-      return
-    }
-    await handleFileAction({
-      type: PopoverFileItemActionType.RenameFile,
-      payload: {
-        file: item,
-        name: name,
-      },
-    })
-    setIsRenamingFile(false)
-  }
-
-  return (
-    <div className="relative flex items-center justify-between">
-      {isRenamingFile && item instanceof FileItem ? (
-        <div className="flex flex-grow items-center gap-4 py-2 pl-3 pr-12">
-          <Icon type={icon} className={classNames('flex-shrink-0', className)} />
-          <input
-            className="min-w-0 flex-grow text-sm"
-            defaultValue={title}
-            onKeyDown={(event) => {
-              if (event.key === KeyboardKey.Escape) {
-                setIsRenamingFile(false)
-              } else if (event.key === KeyboardKey.Enter) {
-                const newTitle = event.currentTarget.value
-                void renameFile(newTitle)
-              }
-            }}
-            ref={(node) => {
-              if (node) {
-                node.focus()
-              }
-            }}
-          />
-        </div>
-      ) : (
-        <button
-          className="flex max-w-full flex-grow items-center justify-between gap-4 py-2 pl-3 pr-12 text-sm hover:bg-info-backdrop focus:bg-info-backdrop"
-          onClick={() => activateItem(item)}
-          onContextMenu={(event) => {
-            event.preventDefault()
-            toggleMenu()
-          }}
-        >
-          <LinkedItemMeta item={item} searchQuery={searchQuery} />
-        </button>
-      )}
-      <button
-        className="absolute right-3 top-1/2 h-7 w-7 -translate-y-1/2 cursor-pointer rounded-full border-0 bg-transparent p-1 hover:bg-contrast"
-        onClick={toggleMenu}
-        ref={menuButtonRef}
-      >
-        <Icon type="more" className="text-neutral" />
-      </button>
-      <Popover
-        open={isMenuOpen}
-        togglePopover={toggleMenu}
-        anchorElement={menuButtonRef.current}
-        side="bottom"
-        align="center"
-        className="py-2"
-      >
-        <MenuItem
-          type={MenuItemType.IconButton}
-          onClick={() => {
-            unlinkItem()
-            toggleMenu()
-          }}
-        >
-          <Icon type="link-off" className="mr-2 text-danger" />
-          Unlink
-        </MenuItem>
-        {item instanceof FileItem && (
-          <LinkedFileMenuOptions
-            file={item}
-            closeMenu={toggleMenu}
-            handleFileAction={handleFileAction}
-            setIsRenamingFile={setIsRenamingFile}
-          />
-        )}
-        <HorizontalSeparator classes="my-2" />
-        <div className="mt-1 px-3 py-1 text-xs font-medium text-neutral">
-          <div className="mb-1">
-            <span className="font-semibold">Created at:</span> {formatDateForContextMenu(item.created_at)}
-          </div>
-          <div className="mb-1">
-            <span className="font-semibold">Modified at:</span> {formatDateForContextMenu(item.userModifiedDate)}
-          </div>
-          <div className="mb-1">
-            <span className="font-semibold">ID:</span> {item.uuid}
-          </div>
-          {item instanceof FileItem && (
-            <div>
-              <span className="font-semibold">Size:</span> {formatSizeToReadableString(item.decryptedSize)}
-            </div>
-          )}
-        </div>
-      </Popover>
-    </div>
-  )
-}
+import { LinkedItemsSectionItem } from './LinkedItemsSectionItem'

 const LinkedItemsPanel = ({
  linkingController,
@@ -178,7 +39,7 @@ const LinkedItemsPanel = ({
    activeItem,
  } = linkingController

-  const { hasFiles } = featuresController
+  const { entitledToFiles } = featuresController
  const application = useApplication()

  const fileInputRef = useRef<HTMLInputElement | null>(null)
@@ -214,6 +75,11 @@ const LinkedItemsPanel = ({
  }

  const selectAndUploadFiles = () => {
+    if (!entitledToFiles) {
+      void featuresController.showPremiumAlert(FeatureName.Files)
+      return
+    }
+
    if (!fileInputRef.current) {
      return
    }
@@ -307,37 +173,37 @@ const LinkedItemsPanel = ({
                </div>
              </div>
            )}
-            {(!!linkedFiles.length || hasFiles) && (
-              <div>
-                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Files</div>
-                <div className="my-1">
-                  <input
-                    type="file"
-                    className="absolute top-0 left-0 -z-50 h-px w-px opacity-0"
-                    multiple
-                    ref={fileInputRef}
-                    onChange={handleFileInputChange}
+
+            <div>
+              <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Files</div>
+              <div className="my-1">
+                <input
+                  type="file"
+                  className="absolute top-0 left-0 -z-50 h-px w-px opacity-0"
+                  multiple
+                  ref={fileInputRef}
+                  onChange={handleFileInputChange}
+                />
+                <button
+                  className="flex w-full cursor-pointer items-center gap-3 bg-transparent px-3 py-2 text-left text-base text-text hover:bg-info-backdrop hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
+                  onClick={selectAndUploadFiles}
+                >
+                  <Icon type="add" />
+                  Upload and link file(s)
+                </button>
+                {linkedFiles.map((link) => (
+                  <LinkedItemsSectionItem
+                    key={link.id}
+                    item={link.item}
+                    searchQuery={searchQuery}
+                    unlinkItem={() => unlinkItemFromSelectedItem(link.item)}
+                    activateItem={activateItem}
+                    handleFileAction={filesController.handleFileAction}
                  />
-                  <button
-                    className="flex w-full cursor-pointer items-center gap-3 bg-transparent px-3 py-2 text-left text-base text-text hover:bg-info-backdrop hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
-                    onClick={selectAndUploadFiles}
-                  >
-                    <Icon type="add" />
-                    Upload and link file(s)
-                  </button>
-                  {linkedFiles.map((link) => (
-                    <LinkedItemsSectionItem
-                      key={link.id}
-                      item={link.item}
-                      searchQuery={searchQuery}
-                      unlinkItem={() => unlinkItemFromSelectedItem(link.item)}
-                      activateItem={activateItem}
-                      handleFileAction={filesController.handleFileAction}
-                    />
-                  ))}
-                </div>
+                ))}
              </div>
-            )}
+            </div>
+
            {!!filesLinkingToActiveItem.length && (
              <div>
                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsSectionItem.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsSectionItem.tsx
@@ -0,0 +1,147 @@
+import { FilesController } from '@/Controllers/FilesController'
+import { LinkingController } from '@/Controllers/LinkingController'
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import { formatDateForContextMenu } from '@/Utils/DateUtils'
+import { getIconForItem } from '@/Utils/Items/Icons/getIconForItem'
+import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'
+import { formatSizeToReadableString } from '@standardnotes/filepicker'
+import { FileItem } from '@standardnotes/snjs'
+import { KeyboardKey } from '@standardnotes/ui-services'
+import { useRef, useState } from 'react'
+import { useApplication } from '../ApplicationView/ApplicationProvider'
+import { PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
+import Icon from '../Icon/Icon'
+import MenuItem from '../Menu/MenuItem'
+import { MenuItemType } from '../Menu/MenuItemType'
+import Popover from '../Popover/Popover'
+import HorizontalSeparator from '../Shared/HorizontalSeparator'
+import LinkedFileMenuOptions from './LinkedFileMenuOptions'
+import LinkedItemMeta from './LinkedItemMeta'
+
+export const LinkedItemsSectionItem = ({
+  activateItem,
+  item,
+  searchQuery,
+  unlinkItem,
+  handleFileAction,
+}: {
+  activateItem: LinkingController['activateItem']
+  item: LinkableItem
+  searchQuery?: string
+  unlinkItem: () => void
+  handleFileAction: FilesController['handleFileAction']
+}) => {
+  const menuButtonRef = useRef<HTMLButtonElement>(null)
+  const application = useApplication()
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const toggleMenu = () => setIsMenuOpen((open) => !open)
+
+  const [isRenamingFile, setIsRenamingFile] = useState(false)
+
+  const [icon, className] = getIconForItem(item, application)
+  const title = item.title ?? ''
+
+  const renameFile = async (name: string) => {
+    if (!(item instanceof FileItem)) {
+      return
+    }
+    await handleFileAction({
+      type: PopoverFileItemActionType.RenameFile,
+      payload: {
+        file: item,
+        name: name,
+      },
+    })
+    setIsRenamingFile(false)
+  }
+
+  return (
+    <div className="relative flex items-center justify-between">
+      {isRenamingFile && item instanceof FileItem ? (
+        <div className="flex flex-grow items-center gap-4 py-2 pl-3 pr-12">
+          <Icon type={icon} className={classNames('flex-shrink-0', className)} />
+          <input
+            className="min-w-0 flex-grow text-sm"
+            defaultValue={title}
+            onKeyDown={(event) => {
+              if (event.key === KeyboardKey.Escape) {
+                setIsRenamingFile(false)
+              } else if (event.key === KeyboardKey.Enter) {
+                const newTitle = event.currentTarget.value
+                void renameFile(newTitle)
+              }
+            }}
+            ref={(node) => {
+              if (node) {
+                node.focus()
+              }
+            }}
+          />
+        </div>
+      ) : (
+        <button
+          className="flex max-w-full flex-grow items-center justify-between gap-4 py-2 pl-3 pr-12 text-sm hover:bg-info-backdrop focus:bg-info-backdrop"
+          onClick={() => activateItem(item)}
+          onContextMenu={(event) => {
+            event.preventDefault()
+            toggleMenu()
+          }}
+        >
+          <LinkedItemMeta item={item} searchQuery={searchQuery} />
+        </button>
+      )}
+      <button
+        className="absolute right-3 top-1/2 h-7 w-7 -translate-y-1/2 cursor-pointer rounded-full border-0 bg-transparent p-1 hover:bg-contrast"
+        onClick={toggleMenu}
+        ref={menuButtonRef}
+      >
+        <Icon type="more" className="text-neutral" />
+      </button>
+      <Popover
+        open={isMenuOpen}
+        togglePopover={toggleMenu}
+        anchorElement={menuButtonRef.current}
+        side="bottom"
+        align="center"
+        className="py-2"
+      >
+        <MenuItem
+          type={MenuItemType.IconButton}
+          onClick={() => {
+            unlinkItem()
+            toggleMenu()
+          }}
+        >
+          <Icon type="link-off" className="mr-2 text-danger" />
+          Unlink
+        </MenuItem>
+        {item instanceof FileItem && (
+          <LinkedFileMenuOptions
+            file={item}
+            closeMenu={toggleMenu}
+            handleFileAction={handleFileAction}
+            setIsRenamingFile={setIsRenamingFile}
+          />
+        )}
+        <HorizontalSeparator classes="my-2" />
+        <div className="mt-1 px-3 py-1 text-xs font-medium text-neutral">
+          <div className="mb-1">
+            <span className="font-semibold">Created at:</span> {formatDateForContextMenu(item.created_at)}
+          </div>
+          <div className="mb-1">
+            <span className="font-semibold">Modified at:</span> {formatDateForContextMenu(item.userModifiedDate)}
+          </div>
+          <div className="mb-1">
+            <span className="font-semibold">ID:</span> {item.uuid}
+          </div>
+          {item instanceof FileItem && (
+            <div>
+              <span className="font-semibold">Size:</span> {formatSizeToReadableString(item.decryptedSize)}
+            </div>
+          )}
+        </div>
+      </Popover>
+    </div>
+  )
+}