cozy-sharing 5.0.0 → 6.0.1

package/src/components/__snapshots__/ShareRecipientsInput.spec.jsx.snap

@@ -1,115 +1,99 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ShareRecipientsInput component should include groups only if all contacts are loaded 1`] = `
-<div>
-  <label
-    className="coz-form-label"
-    htmlFor="email"
-  >
-    Recipients
-  </label>
-  <ShareAutocomplete
-    contactsAndGroups={
-      Array [
-        Object {
-          "_id": "df563cc4-6440",
-          "_type": "io.cozy.contacts",
-          "id": "df563cc4-6440",
-          "name": Object {
-            "familyName": "Russel",
-            "givenName": "Michale",
-          },
+<ShareAutocomplete
+  contactsAndGroups={
+    Array [
+      Object {
+        "_id": "df563cc4-6440",
+        "_type": "io.cozy.contacts",
+        "id": "df563cc4-6440",
+        "name": Object {
+          "familyName": "Russel",
+          "givenName": "Michale",
         },
-        Object {
-          "_id": "5a3b4ccf-c257",
-          "_type": "io.cozy.contacts",
-          "id": "5a3b4ccf-c257",
-          "name": Object {
-            "familyName": "Wolf",
-            "givenName": "Teagan",
-          },
+      },
+      Object {
+        "_id": "5a3b4ccf-c257",
+        "_type": "io.cozy.contacts",
+        "id": "5a3b4ccf-c257",
+        "name": Object {
+          "familyName": "Wolf",
+          "givenName": "Teagan",
         },
-      ]
-    }
-    loading={false}
-    onFocus={[Function]}
-    onPick={[MockFunction onPick]}
-    onRemove={[MockFunction onRemove]}
-    placeholder="Enter recipients here"
-    recipients={
-      Array [
-        Object {
-          "id": "5a3b4ccf-c257",
-          "name": Object {
-            "familyName": "Wolf",
-            "givenName": "Teagan",
-          },
+      },
+    ]
+  }
+  loading={false}
+  onFocus={[Function]}
+  onPick={[MockFunction onPick]}
+  onRemove={[MockFunction onRemove]}
+  placeholder="Enter recipients here"
+  recipients={
+    Array [
+      Object {
+        "id": "5a3b4ccf-c257",
+        "name": Object {
+          "familyName": "Wolf",
+          "givenName": "Teagan",
         },
-      ]
-    }
-  />
-</div>
+      },
+    ]
+  }
+/>
 `;
 
 exports[`ShareRecipientsInput component should match snapshot 1`] = `
-<div>
-  <label
-    className="coz-form-label"
-    htmlFor="email"
-  >
-    Recipients
-  </label>
-  <ShareAutocomplete
-    contactsAndGroups={
-      Array [
-        Object {
-          "_id": "df563cc4-6440",
-          "_type": "io.cozy.contacts",
-          "id": "df563cc4-6440",
-          "name": Object {
-            "familyName": "Russel",
-            "givenName": "Michale",
-          },
+<ShareAutocomplete
+  contactsAndGroups={
+    Array [
+      Object {
+        "_id": "df563cc4-6440",
+        "_type": "io.cozy.contacts",
+        "id": "df563cc4-6440",
+        "name": Object {
+          "familyName": "Russel",
+          "givenName": "Michale",
         },
-        Object {
-          "_id": "5a3b4ccf-c257",
-          "_type": "io.cozy.contacts",
-          "id": "5a3b4ccf-c257",
-          "name": Object {
-            "familyName": "Wolf",
-            "givenName": "Teagan",
-          },
+      },
+      Object {
+        "_id": "5a3b4ccf-c257",
+        "_type": "io.cozy.contacts",
+        "id": "5a3b4ccf-c257",
+        "name": Object {
+          "familyName": "Wolf",
+          "givenName": "Teagan",
         },
-        Object {
-          "_id": "fe86af20-c6c5",
-          "_type": "io.cozy.contacts.groups",
-          "id": "fe86af20-c6c5",
-          "name": "The Night's Watch",
+      },
+      Object {
+        "_id": "fe86af20-c6c5",
+        "_type": "io.cozy.contacts.groups",
+        "id": "fe86af20-c6c5",
+        "name": "The Night's Watch",
+      },
+      Object {
+        "_id": "3d8193ab-2ce4",
+        "_type": "io.cozy.contacts.groups",
+        "id": "3d8193ab-2ce4",
+        "name": "The North",
+      },
+    ]
+  }
+  loading={false}
+  onFocus={[Function]}
+  onPick={[MockFunction onPick]}
+  onRemove={[MockFunction onRemove]}
+  placeholder="Enter recipients here"
+  recipients={
+    Array [
+      Object {
+        "id": "5a3b4ccf-c257",
+        "name": Object {
+          "familyName": "Wolf",
+          "givenName": "Teagan",
         },
-        Object {
-          "_id": "3d8193ab-2ce4",
-          "_type": "io.cozy.contacts.groups",
-          "id": "3d8193ab-2ce4",
-          "name": "The North",
-        },
-      ]
-    }
-    loading={false}
-    onFocus={[Function]}
-    onPick={[MockFunction onPick]}
-    onRemove={[MockFunction onRemove]}
-    placeholder="Enter recipients here"
-    recipients={
-      Array [
-        Object {
-          "id": "5a3b4ccf-c257",
-          "name": Object {
-            "familyName": "Wolf",
-            "givenName": "Teagan",
-          },
-        },
-      ]
-    }
-  />
-</div>
+      },
+    ]
+  }
+/>
 `;

package/src/components/autosuggest.styl

@@ -8,13 +8,12 @@
     box-sizing border-box
     position absolute
     top 100%
-    margin-top .0625rem
+    margin-top .25rem
     z-index $alert-index-mobile
     width 100%
-    max-height 10.625rem
-    overflow auto
-    border .0625rem solid var(--silver)
-    border-radius .25rem
+    overflow hidden
+    box-shadow 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12), 0px 2px 4px rgba(29, 33, 42, 0.0793047), 0px 4px 16px rgba(29, 33, 42, 0.06)
+    border-radius .5rem
     background var(--white)
     display none
 
@@ -25,56 +24,42 @@
     width 100%
 
 .suggestionsList
-    margin 0
-    padding .625rem 0
+    max-height 9rem
+    overflow auto
+    margin 0 -1px 0 0
+    padding .5rem 0
     list-style none
 
-.suggestion
-    padding 0 .625rem .625rem .625rem
-
 .suggestionHighlighted
-    background var(--paleGrey)
+    background var(--actionColorSelected)
 
 .recipientsContainer
     display flex
     flex-wrap wrap
-    padding .2rem .5rem
-    border-radius .125rem
-    border 1px solid var(--silver)
+    padding .25rem .5rem
+    border-radius .25rem
+    border 1px solid var(--borderMainColor)
+    min-height 2.5rem
     max-height 6.75rem
     overflow auto
 
     &:hover
-        border .0625rem solid var(--coolGrey)
+        border 1px solid var(--coolGrey)
+
+    &:focus-within
+        border 1px solid var(--primaryColor)
 
     input[type=email]
         width   auto
         flex-grow 1
         padding .5rem 0
+        margin auto
         border  none
         &:hover
         &:focus
             border none
+        &:only-child
+          padding .25rem .5rem
 
 .recipientChip
-    display inline-flex
-    align-items center
-    flex 0 0 auto
-    background-color var(--paleGrey)
-    border-radius .125rem
-    height 1.75rem
-    line-height 1.75rem
-    padding 0 .5rem
-    margin .25rem .5rem .25rem 0
-
-
-.removeRecipient
-    border 0
-    background-color transparent
-    padding .15rem 0 0 0
-    margin-left .3rem
-    cursor pointer
-    color var(--coolGrey)
-
-    &:hover
-        color var(--slateGrey)
+  margin .25rem .5rem .25rem 0

package/src/helpers/documentType.js

@@ -0,0 +1,6 @@
+export const DOCUMENT_TYPE = {
+  ALBUMS: 'Albums',
+  FILES: 'Files',
+  NOTES: 'Notes',
+  ORGANIZATIONS: 'Organizations'
+}

package/src/helpers/hooks.js

@@ -1,7 +1,17 @@
-import React, { useCallback, useRef } from 'react'
+import React, { useCallback, useRef, useEffect } from 'react'
 
 export const isServer = typeof window === 'undefined'
 
+export function usePrevious(value) {
+  const ref = useRef()
+
+  useEffect(() => {
+    ref.current = value
+  }, [value])
+
+  return ref.current
+}
+
 /**
  * based on : https://github.com/tannerlinsley/react-query/blob/79ad5a9ccbce1486c10e7e364d8fc28bef3fa19f/src/devtools/utils.ts#L61
  */

package/src/helpers/link.js

@@ -0,0 +1,4 @@
+import { DOCUMENT_TYPE } from './documentType'
+
+export const isOnlyReadOnlyLinkAllowed = ({ documentType }) =>
+  documentType === DOCUMENT_TYPE.ALBUMS

package/src/helpers/permissions.js

@@ -0,0 +1,15 @@
+import get from 'lodash/get'
+import { models } from 'cozy-client'
+
+export const checkIsReadOnlyPermissions = permissions => {
+  const permissionCategories = get(
+    permissions,
+    '[0].attributes.permissions',
+    {}
+  )
+  return (
+    Object.values(permissionCategories).filter(permissionCategory =>
+      models.permission.isReadOnly(permissionCategory)
+    ).length > 0
+  )
+}

package/src/helpers/recipients.js

@@ -0,0 +1,21 @@
+export const filterAndReworkRecipients = (recipients, previousRecipients) => {
+  return recipients
+    .filter(recipient => recipient.status !== 'owner')
+    .map(recipient => {
+      const recipientHasChanged =
+        previousRecipients &&
+        !previousRecipients.find(
+          previousRecipient =>
+            previousRecipient.name === recipient.name &&
+            previousRecipient.email === recipient.email
+        )
+
+      if (recipientHasChanged) {
+        return { ...recipient, hasBeenJustAdded: true }
+      }
+
+      return recipient
+    })
+}
+
+export const FADE_IN_DURATION = 600

package/src/helpers/sharings.js

@@ -16,26 +16,29 @@ export const getSharingObject = (internalSharing, sharing) => {
   }
 }
 
-export const createSharingInStore = (
+export const createSharingInStore = async ({
   client,
   doctype,
   dispatch,
   docsId,
   sharing
-) => {
+}) => {
   // TODO Check if we can getByIds to avoid query in map
-  docsId.map(async id => {
-    const file =
-      doctype === 'io.cozy.files'
-        ? await client.query(Q(doctype).getById(id))
-        : undefined
+  await Promise.all(
+    docsId.map(async id => {
+      const file =
+        doctype === 'io.cozy.files'
+          ? await client.query(Q(doctype).getById(id))
+          : undefined
 
-    const path =
-      file &&
-      (file.data.path || (await fetchFilesPaths(client, doctype, [file.data])))
+      const path =
+        file &&
+        (file.data.path ||
+          (await fetchFilesPaths(client, doctype, [file.data])))
 
-    dispatch(addSharing(sharing, path))
-  })
+      dispatch(addSharing(sharing, path))
+    })
+  )
 }
 
 export const updateSharingInStore = (dispatch, sharing) => {

package/src/helpers/synchronousJobQueue.js

@@ -0,0 +1,22 @@
+export class SynchronousJobQueue {
+  constructor() {
+    this.isRunning = false
+    this.queue = []
+  }
+
+  push(job) {
+    this.queue.push(job)
+    if (!this.isRunning) {
+      this.run()
+    }
+  }
+
+  async run() {
+    this.isRunning = true
+    while (this.queue.length > 0) {
+      const job = this.queue.shift()
+      await job.function(job.arguments)
+    }
+    this.isRunning = false
+  }
+}

package/src/helpers/synchronousJobQueue.spec.js

@@ -0,0 +1,75 @@
+import { SynchronousJobQueue } from './synchronousJobQueue'
+
+const flushPromises = () => new Promise(process.nextTick)
+
+const callback = jest.fn()
+
+const resolveAfter100Ms = jest.fn().mockImplementation(() => {
+  callback('100Ms start')
+  return new Promise(resolve => {
+    setTimeout(function () {
+      callback('100Ms end')
+      resolve()
+    }, 100)
+  })
+})
+
+const resolveAfter500Ms = jest.fn().mockImplementation(() => {
+  callback('500Ms start')
+  return new Promise(resolve => {
+    setTimeout(function () {
+      callback('500Ms end')
+      resolve()
+    }, 500)
+  })
+})
+
+describe('SynchronousJobQueue', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+    jest.clearAllMocks()
+  })
+
+  it('should execute job synchronously with SynchronousJobQueue', async () => {
+    const synchronousJobQueue = new SynchronousJobQueue()
+    synchronousJobQueue.push({ function: resolveAfter500Ms })
+    synchronousJobQueue.push({ function: resolveAfter100Ms })
+
+    jest.runAllTimers()
+    await flushPromises()
+    jest.runAllTimers()
+    await flushPromises()
+
+    const expectedCallbackOrder = [
+      ['500Ms start'],
+      ['500Ms end'],
+      ['100Ms start'],
+      ['100Ms end']
+    ]
+
+    expect(callback.mock.calls).toEqual(expectedCallbackOrder)
+  })
+
+  it('should execute job asynchronously without SynchronousJobQueue', async () => {
+    resolveAfter500Ms()
+    resolveAfter100Ms()
+
+    jest.runAllTimers()
+    await flushPromises()
+    jest.runAllTimers()
+    await flushPromises()
+
+    const expectedCallbackOrder = [
+      ['500Ms start'],
+      ['100Ms start'],
+      ['100Ms end'],
+      ['500Ms end']
+    ]
+
+    expect(callback.mock.calls).toEqual(expectedCallbackOrder)
+  })
+})

package/src/index.jsx

@@ -21,3 +21,4 @@ export { SharingBannerPlugin } from './SharingBanner'
 export { useSharingInfos } from './SharingBanner/hooks/useSharingInfos'
 export { ConfirmTrustedRecipientsDialog } from './ConfirmTrustedRecipientsDialog'
 export { ShareButtonWithRecipients } from './ShareButtonWithRecipients'
+export { DOCUMENT_TYPE } from './helpers/documentType'

package/src/queries/queries.js

@@ -0,0 +1,75 @@
+import { Q, fetchPolicies } from 'cozy-client'
+
+import { Contact, Group } from '../models'
+
+const DEFAULT_CACHE_TIMEOUT_QUERIES = 9 * 60 * 1000
+
+const defaultFetchPolicy = fetchPolicies.olderThan(
+  DEFAULT_CACHE_TIMEOUT_QUERIES
+)
+
+export const fetchApps = () => ({
+  definition: Q('io.cozy.apps'),
+  options: {
+    as: 'io.cozy.apps',
+    fetchPolicy: defaultFetchPolicy
+  }
+})
+
+export const buildSharingsByIdQuery = sharingId => ({
+  definition: Q('io.cozy.sharings').getById(sharingId),
+  options: {
+    as: `io.cozy.sharings/${sharingId}`,
+    fetchPolicy: defaultFetchPolicy
+  }
+})
+
+export const buildContactsQuery = () => ({
+  definition: Q(Contact.doctype)
+    .where({
+      _id: {
+        $gt: null
+      }
+    })
+    .partialIndex({
+      trashed: {
+        $or: [{ $eq: false }, { $exists: false }]
+      },
+      $or: [
+        {
+          cozy: {
+            $not: {
+              $size: 0
+            }
+          }
+        },
+        {
+          email: {
+            $not: {
+              $size: 0
+            }
+          }
+        }
+      ]
+    })
+    .indexFields(['_id'])
+    .limitBy(1000),
+  options: {
+    as: 'io.cozy.contacts'
+  }
+})
+
+export const buildGroupsQuery = () => ({
+  definition: Q(Group.doctype),
+  options: {
+    as: 'io.cozy.contacts.groups'
+  }
+})
+
+export const buildInstanceSettingsQuery = () => ({
+  definition: Q('io.cozy.settings').getById('instance'),
+  options: {
+    as: 'io.cozy.settings/instance',
+    singleDocData: true
+  }
+})

package/src/share.styl

@@ -21,10 +21,6 @@
     .coz-form-group
         flex-shrink 0
 
-    .coz-form-label
-        padding-top 0
-        margin-top  0
-
 .aligned-dropdown-button
   margin-right: -1rem
 
@@ -82,17 +78,6 @@
     .react-select__option:active
         background-color var(--paleGrey) !important
 
-    @media (max-width 32em)
-        .react-select__menu
-            width 100% !important
-
-@media (max-width 32em)
-    .share-type-control
-        flex-direction column
-
-        .select-wrapper
-            margin-bottom .5rem
-
 input[type=text]
     width 100%
 

package/dist/SharingBanner/helpers/queries.js

@@ -1,12 +0,0 @@
-import CozyClient, { Q } from 'cozy-client';
-var DEFAULT_CACHE_TIMEOUT_QUERIES = 9 * 60 * 1000;
-var defaultFetchPolicy = CozyClient.fetchPolicies.olderThan(DEFAULT_CACHE_TIMEOUT_QUERIES);
-export var buildSharingsByIdQuery = function buildSharingsByIdQuery(sharingId) {
-  return {
-    definition: Q('io.cozy.sharings').getById(sharingId),
-    options: {
-      as: "io.cozy.sharings/".concat(sharingId),
-      fetchPolicy: defaultFetchPolicy
-    }
-  };
-};

package/dist/components/ContactsAndGroupsDataLoader.js

@@ -1,50 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import { Component } from 'react';
-
-var ContactsAndGroupsDataLoader = /*#__PURE__*/function (_Component) {
-  _inherits(ContactsAndGroupsDataLoader, _Component);
-
-  var _super = _createSuper(ContactsAndGroupsDataLoader);
-
-  function ContactsAndGroupsDataLoader() {
-    _classCallCheck(this, ContactsAndGroupsDataLoader);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(ContactsAndGroupsDataLoader, [{
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps) {
-      return nextProps.contacts.hasMore !== this.props.contacts.hasMore || nextProps.contacts.fetchStatus !== this.props.contacts.fetchStatus || nextProps.contacts.data.length !== this.props.contacts.data.length || nextProps.groups.hasMore !== this.props.groups.hasMore || nextProps.groups.fetchStatus !== this.props.groups.fetchStatus || nextProps.groups.data.length !== this.props.groups.data.length;
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      if (this.props.contacts.hasMore) {
-        this.props.contacts.fetchMore();
-      }
-
-      if (this.props.groups.hasMore) {
-        this.props.groups.fetchMore();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return this.props.children;
-    }
-  }]);
-
-  return ContactsAndGroupsDataLoader;
-}(Component);
-
-export default ContactsAndGroupsDataLoader;