Feat/add services imports #783

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

KillianCourvoisier wants to merge 39 commits into master from feat/addServicesImports

manifest.webapp

-Original file line number
+Diff line change
@@ Expand Up / @@ -60,7 +60,7 @@ @@
         "accounts": {
           "description": "Required to manage accounts associated to konnectors",
           "type": "io.cozy.accounts",
-          "verbs": ["GET"]
+          "verbs": ["GET", "POST", "DELETE"]
         },
         "jobs": {
           "description": "Required to send emails to support",
@@ Expand Down @@

package.json

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -71,7 +71,7 @@
  
        "@sentry/react": "7.118.0",

        "classnames": "2.3.1",

        "cozy-bar": "^27.0.0",

        "cozy-client": "^60.14.0",

        "cozy-client": "^60.18.0",

        "cozy-dataproxy-lib": "^4.11.0",

        "cozy-device-helper": "^3.8.0",

        "cozy-devtools": "^1.3.0",

    @@ -85,7 +85,7 @@
  
        "cozy-realtime": "^5.6.4",

        "cozy-search": "^0.13.0",

        "cozy-sharing": "^27.0.0",

        "cozy-stack-client": "^60.6.0",

        "cozy-stack-client": "^60.18.0",

        "cozy-ui": "^134.0.0",

        "cozy-ui-plus": "^3.0.0",

        "identity-obj-proxy": "^3.0.0",

src/components/AppProviders.jsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,7 @@ import { @@
     } from 'cozy-ui/transpiled/react/styles'
     import CozyTheme from 'cozy-ui-plus/dist/providers/CozyTheme'
+    import { ImportsProvider } from '@/components/Imports/ImportsContext'
     import { PremiumProvider } from '@/components/Premium/PremiumProvider'
     import { FILES_DOCTYPE, CONTACTS_DOCTYPE, APPS_DOCTYPE } from '@/doctypes'
@@ Expand Down Expand Up / @@ -57,7 +58,9 @@ const AppProviders = ({ client, store, children }) => { @@
                         >
                           <BarProvider>
                             <PremiumProvider>
-                              <HashRouter>{children}</HashRouter>
+                              <ImportsProvider>
+                                <HashRouter>{children}</HashRouter>
+                              </ImportsProvider>
                             </PremiumProvider>
                           </BarProvider>
                         </DataProxyProvider>
@@ Expand Down @@

src/components/AppRouter.jsx

-Original file line number
+Diff line change
@@ Expand Up @@
     import { DeleteAccount } from '@/components/DeleteAccount'
     import ChangeEmail from '@/components/Email/ChangeEmail'
+    import History from '@/components/Imports/History'
+    import Imports from '@/components/Imports/Imports'
+    import Run from '@/components/Imports/Run'
     import PermissionsApplication from '@/components/Permissions/AppPermissions/AppPermissions'
     import DataPermissions from '@/components/Permissions/DataPermissions/DataPermissions'
     import PermissionDetails from '@/components/Permissions/PermissionDetails/PermissionDetails'
@@ Expand Down Expand Up / @@ -52,6 +55,14 @@ const AppRouter = () => { @@
           <Route path="/connectedDevices/:deviceId" element={<Devices />} />
           <Route path="/sessions" element={<Sessions />} />
           <Route path="/storage" element={<Storage />} />
+          {flag('settings.imports') && (
+            <>
+              <Route path={routes.imports} element={<Imports />} />
+              <Route path={routes.importsRun} element={<Run />} />
+              <Route path={routes.importsHistory} element={<History />} />
+            </>
+          )}
           <Route path={routes.lockScreen} element={<LockScreen />} />
           <Route path="/permissions/:page" element={<PermissionsTab />} />
           <Route
@@ Expand Down @@

src/components/Imports/History.jsx

-Original file line number
+Diff line change
@@ -0,0 +1,33 @@
+    import React from 'react'
+    import { useSelector } from 'react-redux'
+    import Typography from 'cozy-ui/transpiled/react/Typography'
+    import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+    import Page from '@/components/Page'
+    const History = () => {
+      const { t } = useI18n()
+      const enabled = useSelector(state => state.importData?.enabled ?? false)
+      return (
+        <Page>
+          <Typography variant="h3" gutterBottom>
+            {t('ImportsHistory.title')}
+          </Typography>
+          <Typography variant="body1" gutterBottom>
+            {enabled
+              ? t('ImportsHistory.helper')
+              : t('ImportsHistory.disabled_helper')}
+          </Typography>
+          <div style={{ opacity: 0.7 }}>
+            <Typography variant="caption">
+              {t('ImportsHistory.placeholder')}
+            </Typography>
+          </div>
+        </Page>
+      )
+    }
+    export default History

src/components/Imports/ImportErrors.jsx

-Original file line number
+Diff line change
@@ -0,0 +1,48 @@
+    import React from 'react'
+    import Stack from 'cozy-ui/transpiled/react/Stack'
+    import Typography from 'cozy-ui/transpiled/react/Typography'
+    import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+    const ImportErrors = ({ error, failedItems }) => {
+      const { t } = useI18n()
+      if (!error && (!failedItems || failedItems.length === 0)) {
+        return null
+      }
+      return (
+        <Stack spacing="xs">
+          {error && (
+            <Typography variant="caption" color="error">
+              {String(error)}
+            </Typography>
+          )}
+          {failedItems && failedItems.length > 0 && (
+            <ul style={{ margin: 0, paddingLeft: 18 }}>
+              {failedItems.map((item, idx) => {
+                const path =
+                  item.path || item.name || t('ImportsRun.errors.unknown_path')
+                const statusCode =
+                  typeof item.status === 'number'
+                    ? item.status
+                    : t('ImportsRun.errors.status_na')
+                const reason = item.reason || ''
+                const line = reason
+                  ? `${path} - ${statusCode} (${reason})`
+                  : `${path} - ${statusCode}`
+                return (
+                  <li key={idx} style={{ fontSize: 11 }}>
+                    {line}
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+        </Stack>
+      )
+    }
+    export default ImportErrors

src/components/Imports/Imports.jsx

-Original file line number
+Diff line change
@@ -0,0 +1,67 @@
+    import React, { useCallback } from 'react'
+    import { useNavigate } from 'react-router-dom'
+    import Button from 'cozy-ui/transpiled/react/Button'
+    import Switch from 'cozy-ui/transpiled/react/Switch'
+    import Typography from 'cozy-ui/transpiled/react/Typography'
+    import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+    import styles from './imports.styl'
+    import { routes } from '../../constants/routes'
+    import { useImports } from '@/components/Imports/ImportsContext'
+    import Page from '@/components/Page'
+    import { PageHeader } from '@/components/PageHeader'
+    const Imports = () => {
+      const { t } = useI18n()
+      const navigate = useNavigate()
+      const { enabled, setEnabled } = useImports()
+      const onSwitchChange = useCallback(
+        ev => {
+          const next = !!ev?.target?.checked
+          setEnabled(next)
+        },
+        [setEnabled]
+      )
+      return (
+        <Page>
+          <PageHeader title={t('ImportsView.title')} />
+          <Typography variant="subtitle1" gutterBottom>
+            {t('ImportsView.subtitle')}
+          </Typography>
+          <Typography variant="body2" gutterBottom>
+            {t('ImportsView.helper')}
+          </Typography>
+          <div className={styles['ImportsView-switchRow']}>
+            <Switch checked={enabled} onChange={onSwitchChange} />
+            <Typography variant="body1">{t('ImportsView.toggle')}</Typography>
+          </div>
+          <div className={styles['ImportsView-actionsRow']}>
+            <Button
+              variant="primary"
+              disabled={!enabled}
+              onClick={() => navigate(routes.importsRun)}
+            >
+              {t('ImportsView.action_run')}
+            </Button>
+            <Button
+              variant="secondary"
+              disabled={!enabled}
+              onClick={() => navigate(routes.importsHistory)}
+            >
+              {t('ImportsView.action_history')}
+            </Button>
+          </div>
+        </Page>
+      )
+    }
+    export { Imports }
+    export default Imports

src/components/Imports/ImportsContent.jsx

-Original file line number
+Diff line change
@@ -0,0 +1,46 @@
+    import React from 'react'
+    import Box from 'cozy-ui/transpiled/react/Box'
+    import Button from 'cozy-ui/transpiled/react/Buttons'
+    import Circle from 'cozy-ui/transpiled/react/Circle'
+    import Icon from 'cozy-ui/transpiled/react/Icon'
+    import CloudRainbowIcon from 'cozy-ui/transpiled/react/Icons/CloudRainbow'
+    import Typography from 'cozy-ui/transpiled/react/Typography'
+    import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+    import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+    const ImportsContent = () => {
+      const { t } = useI18n()
+      const { isMobile } = useBreakpoints()
+      const onStartImport = () => {}
+      return (
+        <Box
+          className="u-flex u-flex-column u-flex-items-center u-mh-auto u-mv-0"
+          maxWidth={600}
+        >
+          <Circle size={100} backgroundColor="var(--defaultBackgroundColor)">
+            <Icon icon={CloudRainbowIcon} size={48} />
+          </Circle>
+          <Typography className="u-mt-1-half u-mb-2" variant="h3" align="center">
+            {t('ImportsView.subtitle')}
+          </Typography>
+          <Typography className="u-mb-2" align="center">
+            {t('ImportsView.helper')}
+          </Typography>
+          <Button
+            theme="primary"
+            onClick={onStartImport}
+            className={isMobile ? 'u-w-100' : ''}
+          >
+            {t('ImportsView.cta')}
+          </Button>
+        </Box>
+      )
+    }
+    export default ImportsContent

src/components/Imports/ImportsContext.jsx

-Original file line number
+Diff line change
@@ -0,0 +1,24 @@
+    import React, { createContext, useContext, useState } from 'react'
+    const ImportsContext = createContext(null)
+    export const ImportsProvider = ({ children }) => {
+      const [enabled, setEnabled] = useState(false)
+      const value = {
+        enabled,
+        setEnabled
+      }
+      return (
+        <ImportsContext.Provider value={value}>{children}</ImportsContext.Provider>
+      )
+    }
+    export const useImports = () => {
+      const ctx = useContext(ImportsContext)
+      if (!ctx) {
+        throw new Error('useImports must be used within an ImportsProvider')
+      }
+      return ctx
+    }

src/components/Imports/ImportsProgress.jsx

-Original file line number
+Diff line change
@@ -0,0 +1,64 @@
+    import React from 'react'
+    import { LinearProgress } from 'cozy-ui/transpiled/react/Progress'
+    import Stack from 'cozy-ui/transpiled/react/Stack'
+    import Typography from 'cozy-ui/transpiled/react/Typography'
+    import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+    const ImportsProgress = ({ title, progress, busy, status, summary }) => {
+      const { t } = useI18n()
+      const hasProgress = progress.total > 0
+      return (
+        <Stack spacing="s">
+          <Typography variant="h5">{title}</Typography>
+          {hasProgress && (
+            <div style={{ maxWidth: 500 }}>
+              <LinearProgress
+                variant="determinate"
+                value={
+                  progress.total === 0
+                    ? 0
+                    : Math.min(100, (progress.done / progress.total) * 100)
+                }
+                className="u-mv-half u-w-100 u-h-half u-bdrs-6"
+              />
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  marginTop: 4
+                }}
+              >
+                <Typography variant="caption">
+                  {t('ImportsRun.sections.progress.processed', {
+                    count: progress.done
+                  })}
+                </Typography>
+                <Typography variant="caption">
+                  {t('ImportsRun.sections.progress.total', {
+                    count: progress.total
+                  })}
+                </Typography>
+              </div>
+              {busy && progress.current && (
+                <Typography variant="caption">
+                  {t('ImportsRun.sections.progress.processing', {
+                    name: progress.current
+                  })}
+                </Typography>
+              )}
+            </div>
+          )}
+          {status && <Typography variant="caption">{status}</Typography>}
+          {summary && <Typography variant="caption">{summary}</Typography>}
+        </Stack>
+      )
+    }
+    export default ImportsProgress

src/components/Imports/ImportsProviderSelect.jsx

-Original file line number
+Diff line change
@@ -0,0 +1,25 @@
+    import React from 'react'
+    import Select from '@/components/Select'
+    const ImportsProviderSelect = ({
+      providerOptions,
+      providerValue,
+      providerFieldProps,
+      onChange
+    }) => {
+      return (
+        <Select
+          name="provider"
+          options={providerOptions}
+          fieldProps={providerFieldProps}
+          value={providerValue}
+          onChange={sel => {
+            onChange(sel ? sel.value : '')
+          }}
+          isSearchable={false}
+        />
+      )
+    }
+    export default ImportsProviderSelect

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/add services imports #783

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!

Feat/add services imports #783

Are you sure you want to change the base?

Uh oh!

Feat/add services imports #783

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!