Merge pull request #15212 from akeneo/CXP-723

CXP-723: Extract scope list and add multi step wizard with permissions

.env

@@ -35,3 +35,4 @@ SRNT_GOOGLE_BUCKET_NAME=bucket
 XDEBUG_MODE=off
 FLAG_FREE_TRIAL_ENABLED=0
 FLAG_MARKETPLACE_ACTIVATE_ENABLED=0
+FLAG_CONNECT_APP_WITH_PERMISSIONS_ENABLED=0

config/packages/akeneo_feature_flag.yml

@@ -4,3 +4,4 @@ akeneo_feature_flag:
         - { feature: 'data_quality_insights', service: 'akeneo.pim.automation.data_quality_insights.feature' }
         - { feature: 'free_trial', service: 'akeneo.free_trial.feature' }
         - { feature: 'marketplace_activate', service: 'akeneo_connectivity.connection.marketplace_activate.feature' }
+        - { feature: 'connect_app_with_permissions', service: 'akeneo_connectivity.connection.connect_app_with_permissions.feature' }

src/Akeneo/Connectivity/Connection/back/Infrastructure/Symfony/Resources/config/feature_flag.yml

@@ -1,6 +1,16 @@
+parameters:
+    env(FLAG_MARKETPLACE_ACTIVATE_ENABLED): 0
+    env(FLAG_CONNECT_APP_WITH_PERMISSIONS_ENABLED): 0
+
 services:
     akeneo_connectivity.connection.marketplace_activate.feature:
         class: Akeneo\Platform\Bundle\FeatureFlagBundle\Configuration\EnvVarFeatureFlag
         arguments:
             - '%env(bool:FLAG_MARKETPLACE_ACTIVATE_ENABLED)%'
         public: true
+
+    akeneo_connectivity.connection.connect_app_with_permissions.feature:
+        class: Akeneo\Platform\Bundle\FeatureFlagBundle\Configuration\EnvVarFeatureFlag
+        arguments:
+            - '%env(bool:FLAG_CONNECT_APP_WITH_PERMISSIONS_ENABLED)%'
+        public: true

src/Akeneo/Connectivity/Connection/back/Infrastructure/Symfony/Resources/translations/jsmessages.en_US.yml

@@ -63,34 +63,43 @@ akeneo_connectivity.connection:
             unreachable: We can't reach the marketplace, please come back later.
             scroll_to_top: Scroll to the top
         apps:
+            wizard:
+                title: Connect
+                action:
+                    confirm: Confirm
+                    cancel: Cancel
+                    previous: Previous
+                    next: Next
+                    allow_and_next: Allow and next
+                progress:
+                    authorizations: Authorizations
+                    permissions: Permissions
+                    well_done: Well done!
+                authorize:
+                    title: 'App {{ app_name }} needs to'
+                    no_scope_title: 'The {{ app_name }} App would like to access your PIM.'
+                    no_scope: No specific authorizations have been requested.
+                    helper: To know more about about app authorization,
+                    helper_link: check out our Help Center for more information.
             title: Connect
-            action:
-                confirm: Confirm
-                cancel: Cancel
             activate:
                 flash:
                     error: Sorry, an error occurred while connecting the App.
-            authorize:
-                title: 'App {{ app_name }} needs to'
-                no_scope_title: 'The {{ app_name }} App would like to access your PIM.'
-                no_scope: No specific authorizations have been requested.
-                helper: To know more about about app authorization,
-                helper_link: check out our Help Center for more information.
-                error:
-                    sub_text: Please contact the app developer or Akeneo support
-                scope:
-                    type:
-                        view: 'View {{ entities }}'
-                        edit: 'View and edit {{ entities }}'
-                        delete: 'View, edit and delete {{ entities }}'
-                    entities:
-                        catalog_structure: attributes, attribute groups, families and family variants
-                        attribute_options: attribute options
-                        categories: categories
-                        channel_localization: locales and currencies
-                        channel_settings: channels
-                        association_types: association types
-                        products: products and product models
+            scope:
+                type:
+                    view: 'View {{ entities }}'
+                    edit: 'View and edit {{ entities }}'
+                    delete: 'View, edit and delete {{ entities }}'
+                entities:
+                    catalog_structure: attributes, attribute groups, families and family variants
+                    attribute_options: attribute options
+                    categories: categories
+                    channel_localization: locales and currencies
+                    channel_settings: channels
+                    association_types: association types
+                    products: products and product models
+            error:
+                sub_text: Please contact the app developer or Akeneo support
             constraint:
                 client_id:
                     not_blank: The client_id is required.

src/Akeneo/Connectivity/Connection/front/src/connect/components/AppWizard/AppWizard.tsx

@@ -2,9 +2,10 @@ import React, {FC, useEffect, useState} from 'react';
 import styled from 'styled-components';
 import {Button, getColor, getFontSize, Modal} from 'akeneo-design-system';
 import {useHistory} from 'react-router';
-import {AppWizardData, useFetchAppWizardData} from '../../hooks/use-fetch-app-wizard-data';
+import {useFetchAppWizardData} from '../../hooks/use-fetch-app-wizard-data';
 import {useTranslate} from '../../../shared/translate';
-import {ScopeList} from './ScopeList';
+import {AppWizardData} from '../../../model/Apps/wizard-data';
+import {ScopeListContainer} from './ScopeListContainer';
 
 const Content = styled.div`
     display: grid;
@@ -44,7 +45,7 @@ const Connect = styled.h3`
     font-size: ${getFontSize('default')};
     text-transform: uppercase;
     font-weight: normal;
-    margin: 0;
+    margin: 0 0 6px 0;
 `;
 
 const ActionButton = styled(Button)`
@@ -76,7 +77,7 @@ export const AppWizard: FC<Props> = ({clientId}) => {
     return (
         <Modal
             onClose={redirectToMarketplace}
-            closeTitle={translate('akeneo_connectivity.connection.connect.apps.action.cancel')}
+            closeTitle={translate('akeneo_connectivity.connection.connect.apps.wizard.action.cancel')}
         >
             <Content>
                 <LogoContainer>
@@ -86,13 +87,13 @@ export const AppWizard: FC<Props> = ({clientId}) => {
                 </LogoContainer>
                 <InfoContainer>
                     <Connect>{translate('akeneo_connectivity.connection.connect.apps.title')}</Connect>
-                    <ScopeList appName={wizardData.appName} scopeMessages={wizardData.scopeMessages} />
+                    <ScopeListContainer appName={wizardData.appName} scopeMessages={wizardData.scopeMessages} />
                     <Actions>
                         <ActionButton level={'tertiary'} onClick={redirectToMarketplace}>
-                            {translate('akeneo_connectivity.connection.connect.apps.action.cancel')}
+                            {translate('akeneo_connectivity.connection.connect.apps.wizard.action.cancel')}
                         </ActionButton>
                         <ActionButton>
-                            {translate('akeneo_connectivity.connection.connect.apps.action.confirm')}
+                            {translate('akeneo_connectivity.connection.connect.apps.wizard.action.confirm')}
                         </ActionButton>
                     </Actions>
                 </InfoContainer>

src/Akeneo/Connectivity/Connection/front/src/connect/components/AppWizard/ScopeListContainer.tsx

@@ -0,0 +1,66 @@
+import React, {FC} from 'react';
+import styled from 'styled-components';
+import {getColor, getFontSize, Link, CheckRoundIcon} from 'akeneo-design-system';
+import {useTranslate} from '../../../shared/translate';
+import {ScopeItem, ScopeList} from '../ScopeList';
+import ScopeMessage from '../../../model/Apps/scope-message';
+
+const AppTitle = styled.h2`
+    color: ${getColor('grey', 140)};
+    font-size: 28px;
+    font-weight: normal;
+    line-height: 28px;
+    margin: 0;
+`;
+
+const Helper = styled.div`
+    color: ${getColor('grey', 120)};
+    font-size: ${getFontSize('default')};
+    font-weight: normal;
+    line-height: 18px;
+    margin: 17px 0 19px 0;
+    width: 280px;
+`;
+
+interface Props {
+    appName: string;
+    scopeMessages: ScopeMessage[];
+}
+
+export const ScopeListContainer: FC<Props> = ({appName, scopeMessages}) => {
+    const translate = useTranslate();
+
+    const title =
+        scopeMessages.length === 0
+            ? translate('akeneo_connectivity.connection.connect.apps.wizard.authorize.no_scope_title', {
+                  app_name: appName,
+              })
+            : translate('akeneo_connectivity.connection.connect.apps.wizard.authorize.title', {app_name: appName});
+
+    return (
+        <>
+            <AppTitle>{title}</AppTitle>
+            <Helper>
+                <p>{translate('akeneo_connectivity.connection.connect.apps.wizard.authorize.helper')}</p>
+                <Link
+                    href={
+                        'https://help.akeneo.com/pim/serenity/articles/how-to-connect-my-pim-with-apps.html#all-editions-authorization-step'
+                    }
+                >
+                    {translate('akeneo_connectivity.connection.connect.apps.wizard.authorize.helper_link')}
+                </Link>
+            </Helper>
+            {0 === scopeMessages.length ? (
+                <ScopeItem key='0'>
+                    <CheckRoundIcon
+                        size={24}
+                        title={translate('akeneo_connectivity.connection.connect.apps.wizard.authorize.no_scope')}
+                    />
+                    {translate('akeneo_connectivity.connection.connect.apps.wizard.authorize.no_scope')}
+                </ScopeItem>
+            ) : (
+                <ScopeList scopeMessages={scopeMessages} />
+            )}
+        </>
+    );
+};