feat: Add a Badge to the first konnector folder

src/lib/doctypes.js

@@ -10,6 +10,7 @@ export const DOCTYPE_ALBUMS = 'io.cozy.photos.albums'
 export const DOCTYPE_PHOTOS_SETTINGS = 'io.cozy.photos.settings'
 export const DOCTYPE_APPS = 'io.cozy.apps'
 export const DOCTYPE_CONTACTS = 'io.cozy.contacts'
+export const DOCTYPE_KONNECTORS = 'io.cozy.konnectors'
 export const DOCTYPE_CONTACTS_VERSION = 2
 
 export const schema = {

src/modules/filelist/icons/BadgeKonnector.jsx

@@ -0,0 +1,75 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { getReferencedBy, isReferencedBy, useQuery } from 'cozy-client'
+import AppIcon from 'cozy-ui/transpiled/react/AppIcon'
+import Badge from 'cozy-ui/transpiled/react/Badge'
+import { makeStyles } from 'cozy-ui/transpiled/react/styles'
+
+import { DOCTYPE_KONNECTORS } from 'lib/doctypes'
+import { buildFileByIdQuery } from 'queries'
+
+const getKonnectorSlugFromFile = file => {
+  const konnector = getReferencedBy(file, DOCTYPE_KONNECTORS)[0]
+  if (konnector) {
+    return konnector.id.split('/')[1]
+  }
+  return null
+}
+
+const useStyle = makeStyles({
+  badge: {
+    backgroundColor: 'var(--white)',
+    height: '1.5rem',
+    minWidth: '1.5rem',
+    borderRadius: '0.375rem',
+    border: '1px solid var(--borderMainColor)'
+  },
+  appIcon: {
+    width: '75%',
+    height: '75%'
+  },
+  anchorOriginBottomRightCircular: {
+    bottom: '10px'
+  }
+})
+
+export const BadgeKonnector = ({ file, children }) => {
+  const { badge, anchorOriginBottomRightCircular, appIcon } = useStyle()
+  const konnectorSlug = getKonnectorSlugFromFile(file)
+
+  // Check if the parent folder is a konnector folder, because if have no file in your account folder, its considered as a konnector folder
+  const parentFolderQuery = buildFileByIdQuery(file.dir_id)
+  const { data: parentFolder } = useQuery(
+    parentFolderQuery.definition,
+    parentFolderQuery.options
+  )
+  const hasKonnectorParentFolder = isReferencedBy(
+    parentFolder,
+    DOCTYPE_KONNECTORS
+  )
+
+  if (hasKonnectorParentFolder) {
+    return <>{children}</>
+  }
+
+  return (
+    <Badge
+      classes={{ badge, anchorOriginBottomRightCircular }}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      badgeContent={
+        <AppIcon
+          className={appIcon}
+          type="konnector"
+          app={{ slug: konnectorSlug }}
+        />
+      }
+    >
+      {children}
+    </Badge>
+  )
+}
+
+BadgeKonnector.propTypes = {
+  file: PropTypes.object.isRequired
+}

src/modules/filelist/icons/FileThumbnail.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { models } from 'cozy-client'
+import { isReferencedBy, models } from 'cozy-client'
 import { isDirectory } from 'cozy-client/dist/models/file'
 import { SharedBadge, SharingOwnerAvatar } from 'cozy-sharing'
 import Box from 'cozy-ui/transpiled/react/Box'
@@ -13,6 +13,8 @@ import Spinner from 'cozy-ui/transpiled/react/Spinner'
 
 import IconServer from 'assets/icons/icon-type-server.svg'
 import type { File, FolderPickerEntry } from 'components/FolderPicker/types'
+import { DOCTYPE_KONNECTORS } from 'lib/doctypes'
+import { BadgeKonnector } from 'modules/filelist/icons/BadgeKonnector'
 import FileIcon from 'modules/filelist/icons/FileIcon'
 import FileIconMime from 'modules/filelist/icons/FileIconMime'
 import { SharingShortcutIcon } from 'modules/filelist/icons/SharingShortcutIcon'
@@ -77,21 +79,38 @@ const FileThumbnail: React.FC<FileThumbnailProps> = ({
   const isSimpleFile =
     !isSharingShortcut && !isRegularShortcut && !isInSyncFromSharing
   const isFolder = isSimpleFile && isDirectory(file)
+  const isKonnectorFolder = isReferencedBy(file, DOCTYPE_KONNECTORS)
 
-  if (isFolder && size && size >= 48)
+  if (isFolder) {
+    if (size && size >= 48) {
+      return (
+        <Box
+          width={size}
+          height={size}
+          bgcolor="var(--contrastBackgroundColor)"
+          borderRadius={8}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+        >
+          {isKonnectorFolder ? (
+            <BadgeKonnector file={file}>
+              <FileIcon file={file} size={48} isEncrypted={isEncrypted} />
+            </BadgeKonnector>
+          ) : (
+            <FileIcon file={file} size={48} isEncrypted={isEncrypted} />
+          )}
+        </Box>
+      )
+    }
+  }
+  if (isKonnectorFolder) {
     return (
-      <Box
-        width={size}
-        height={size}
-        bgcolor="var(--contrastBackgroundColor)"
-        borderRadius={8}
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-      >
-        <FileIcon file={file} size={48} isEncrypted={isEncrypted} />
-      </Box>
+      <BadgeKonnector file={file}>
+        <FileIcon file={file} size={size} isEncrypted={isEncrypted} />
+      </BadgeKonnector>
     )
+  }
 
   return (
     <>

src/queries/index.ts

@@ -306,7 +306,8 @@ export const buildFileByIdQuery: QueryBuilder<string> = fileId => ({
   options: {
     as: `io.cozy.files/${fileId}`,
     fetchPolicy: defaultFetchPolicy,
-    singleDocData: true
+    singleDocData: true,
+    enabled: !!fileId
   }
 })