feat: Add OpenExternalLinkItem component

And update OpenExternalLinkButton

src/modules/public/OpenExternalLinkButton.jsx

@@ -17,7 +17,7 @@ import { openExternalLink } from 'modules/public/helpers'
  * @param {boolean} isSharingShortcutCreated
  * @returns {React.Component}
  */
-const getIcon = (link, isSharingShortcutCreated) => {
+export const getLabel = (link, isSharingShortcutCreated) => {
   if (link === HOME_LINK_HREF) {
     return ToTheCloudIcon
   }
@@ -27,21 +27,36 @@ const getIcon = (link, isSharingShortcutCreated) => {
   return SyncIcon
 }
 
+/**
+ * Get the icon and label to display in the button
+ * @param {object} params
+ * @param {string} params.link
+ * @param {boolean} params.isSharingShortcutCreated
+ * @param {object} params.t
+ * @returns {{ icon: React.Component, label: string }}
+ */
+export const getIconWithlabel = ({ link, isSharingShortcutCreated, t }) => {
+  if (link === HOME_LINK_HREF) {
+    return { icon: ToTheCloudIcon, label: t('Share.create-cozy') }
+  }
+  if (!isSharingShortcutCreated) {
+    return { icon: CloudPlusOutlinedIcon, label: t('toolbar.add_to_mine') }
+  }
+  return { icon: SyncIcon, label: t('toolbar.menu_sync_cozy') }
+}
+
 export const OpenExternalLinkButton = ({ link, isSharingShortcutCreated }) => {
   const { t } = useI18n()
 
   const handleClick = () => {
     openExternalLink(link)
   }
 
-  const label =
-    link === HOME_LINK_HREF
-      ? t('Share.create-cozy')
-      : isSharingShortcutCreated
-      ? t('toolbar.menu_sync_cozy')
-      : t('toolbar.add_to_mine')
-
-  const icon = getIcon(link, isSharingShortcutCreated)
+  const { icon, label } = getIconWithlabel({
+    link,
+    isSharingShortcutCreated,
+    t
+  })
 
   return (
     <Button

src/modules/public/OpenExternalLinkItem.jsx

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { getIconWithlabel } from 'modules/public/OpenExternalLinkButton'
+import { openExternalLink } from 'modules/public/helpers'
+
+const OpenExternalLinkItem = ({ link, isSharingShortcutCreated }) => {
+  const { t } = useI18n()
+
+  const handleClick = () => {
+    openExternalLink(link)
+  }
+
+  const { icon, label } = getIconWithlabel({
+    link,
+    isSharingShortcutCreated,
+    t
+  })
+
+  return (
+    <ActionsMenuItem isListItem onClick={handleClick}>
+      <ListItemIcon>
+        <Icon icon={icon} />
+      </ListItemIcon>
+      <ListItemText primary={label} />
+    </ActionsMenuItem>
+  )
+}
+
+OpenExternalLinkItem.propTypes = {
+  link: PropTypes.string.isRequired,
+  isSharingShortcutCreated: PropTypes.bool
+}
+
+export default OpenExternalLinkItem