@strapi/admin 5.18.1 → 5.20.0

package/dist/admin/admin/src/pages/ProfilePage.js

@@ -9,6 +9,7 @@ var reactIntl = require('react-intl');
 var yup = require('yup');
 var Form = require('../components/Form.js');
 var Renderer = require('../components/FormInputs/Renderer.js');
+var Context = require('../components/GuidedTour/Context.js');
 var Layout = require('../components/Layouts/Layout.js');
 var PageHelpers = require('../components/PageHelpers.js');
 var hooks = require('../core/store/hooks.js');
@@ -59,7 +60,25 @@ const PROFILE_VALIDTION_SCHEMA = yup__namespace.object().shape({
 });
 /* -------------------------------------------------------------------------------------------------
  * ProfilePage
- * -----------------------------------------------------------------------------------------------*/ const ProfilePage = ()=>{
+ * -----------------------------------------------------------------------------------------------*/ const Panel = ({ children, ...flexProps })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+        background: "neutral0",
+        hasRadius: true,
+        shadow: "filterShadow",
+        paddingTop: 6,
+        paddingBottom: 6,
+        paddingLeft: 7,
+        paddingRight: 7,
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 4,
+            ...flexProps,
+            children: children
+        })
+    });
+};
+const ProfilePage = ()=>{
     const localeNames = hooks.useTypedSelector((state)=>state.admin_app.language.localeNames);
     const { formatMessage } = reactIntl.useIntl();
     const { trackUsage } = Tracking.useTracking();
@@ -195,7 +214,7 @@ const PROFILE_VALIDTION_SCHEMA = yup__namespace.object().shape({
                                 })
                             }),
                             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                paddingBottom: 10,
+                                paddingBottom: 6,
                                 children: /*#__PURE__*/ jsxRuntime.jsx(Layout.Layouts.Content, {
                                     children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                                         direction: "column",
@@ -213,6 +232,12 @@ const PROFILE_VALIDTION_SCHEMA = yup__namespace.object().shape({
                             })
                         ]
                     })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                paddingBottom: 10,
+                children: /*#__PURE__*/ jsxRuntime.jsx(Layout.Layouts.Content, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(GuidedTourSection, {})
+                })
             })
         ]
     });
@@ -221,277 +246,295 @@ const PROFILE_VALIDTION_SCHEMA = yup__namespace.object().shape({
  * PasswordSection
  * -----------------------------------------------------------------------------------------------*/ const PasswordSection = ()=>{
     const { formatMessage } = reactIntl.useIntl();
-    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-        background: "neutral0",
-        hasRadius: true,
-        shadow: "filterShadow",
-        paddingTop: 6,
-        paddingBottom: 6,
-        paddingLeft: 7,
-        paddingRight: 7,
-        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-            direction: "column",
-            alignItems: "stretch",
-            gap: 4,
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                    variant: "delta",
-                    tag: "h2",
-                    children: formatMessage({
-                        id: 'global.change-password',
-                        defaultMessage: 'Change password'
-                    })
-                }),
+    return /*#__PURE__*/ jsxRuntime.jsxs(Panel, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                variant: "delta",
+                tag: "h2",
+                children: formatMessage({
+                    id: 'global.change-password',
+                    defaultMessage: 'Change password'
+                })
+            }),
+            [
                 [
-                    [
-                        {
-                            label: formatMessage({
-                                id: 'Auth.form.currentPassword.label',
-                                defaultMessage: 'Current Password'
-                            }),
-                            name: 'currentPassword',
-                            size: 6,
-                            type: 'password'
-                        }
-                    ],
-                    [
-                        {
-                            autoComplete: 'new-password',
-                            label: formatMessage({
-                                id: 'global.password',
-                                defaultMessage: 'Password'
-                            }),
-                            name: 'password',
-                            size: 6,
-                            type: 'password'
-                        },
-                        {
-                            autoComplete: 'new-password',
-                            label: formatMessage({
-                                id: 'Auth.form.confirmPassword.label',
-                                defaultMessage: 'Confirm Password'
-                            }),
-                            name: 'confirmPassword',
-                            size: 6,
-                            type: 'password'
-                        }
-                    ]
-                ].map((row, index)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
-                        gap: 5,
-                        children: row.map(({ size, ...field })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
-                                col: size,
-                                direction: "column",
-                                alignItems: "stretch",
-                                children: /*#__PURE__*/ jsxRuntime.jsx(Renderer.InputRenderer, {
-                                    ...field
-                                })
-                            }, field.name))
-                    }, index))
-            ]
-        })
+                    {
+                        label: formatMessage({
+                            id: 'Auth.form.currentPassword.label',
+                            defaultMessage: 'Current Password'
+                        }),
+                        name: 'currentPassword',
+                        size: 6,
+                        type: 'password'
+                    }
+                ],
+                [
+                    {
+                        autoComplete: 'new-password',
+                        label: formatMessage({
+                            id: 'global.password',
+                            defaultMessage: 'Password'
+                        }),
+                        name: 'password',
+                        size: 6,
+                        type: 'password'
+                    },
+                    {
+                        autoComplete: 'new-password',
+                        label: formatMessage({
+                            id: 'Auth.form.confirmPassword.label',
+                            defaultMessage: 'Confirm Password'
+                        }),
+                        name: 'confirmPassword',
+                        size: 6,
+                        type: 'password'
+                    }
+                ]
+            ].map((row, index)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
+                    gap: 5,
+                    children: row.map(({ size, ...field })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                            col: size,
+                            direction: "column",
+                            alignItems: "stretch",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(Renderer.InputRenderer, {
+                                ...field
+                            })
+                        }, field.name))
+                }, index))
+        ]
     });
 };
 const PreferencesSection = ({ localeNames })=>{
     const { formatMessage } = reactIntl.useIntl();
     const themesToDisplay = hooks.useTypedSelector((state)=>state.admin_app.theme.availableThemes);
-    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-        background: "neutral0",
-        hasRadius: true,
-        shadow: "filterShadow",
-        paddingTop: 6,
-        paddingBottom: 6,
-        paddingLeft: 7,
-        paddingRight: 7,
-        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-            direction: "column",
-            alignItems: "stretch",
-            gap: 4,
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                    direction: "column",
-                    alignItems: "stretch",
-                    gap: 1,
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                            variant: "delta",
-                            tag: "h2",
-                            children: formatMessage({
-                                id: 'Settings.profile.form.section.experience.title',
-                                defaultMessage: 'Experience'
-                            })
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                            children: formatMessage({
-                                id: 'Settings.profile.form.section.experience.interfaceLanguageHelp',
-                                defaultMessage: 'Preference changes will apply only to you. More information is available {here}.'
-                            }, {
-                                here: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                    tag: "a",
-                                    color: "primary600",
-                                    target: "_blank",
-                                    rel: "noopener noreferrer",
-                                    href: "https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#locales",
-                                    children: formatMessage({
-                                        id: 'Settings.profile.form.section.experience.here',
-                                        defaultMessage: 'here'
-                                    })
+    return /*#__PURE__*/ jsxRuntime.jsxs(Panel, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                direction: "column",
+                alignItems: "stretch",
+                gap: 1,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        variant: "delta",
+                        tag: "h2",
+                        children: formatMessage({
+                            id: 'Settings.profile.form.section.experience.title',
+                            defaultMessage: 'Experience'
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        children: formatMessage({
+                            id: 'Settings.profile.form.section.experience.interfaceLanguageHelp',
+                            defaultMessage: 'Preference changes will apply only to you. More information is available {here}.'
+                        }, {
+                            here: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                tag: "a",
+                                color: "primary600",
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                                href: "https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#locales",
+                                children: formatMessage({
+                                    id: 'Settings.profile.form.section.experience.here',
+                                    defaultMessage: 'here'
                                 })
                             })
                         })
-                    ]
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
-                    gap: 5,
-                    children: [
-                        {
-                            hint: formatMessage({
-                                id: 'Settings.profile.form.section.experience.interfaceLanguage.hint',
-                                defaultMessage: 'This will only display your own interface in the chosen language.'
-                            }),
-                            label: formatMessage({
-                                id: 'Settings.profile.form.section.experience.interfaceLanguage',
-                                defaultMessage: 'Interface language'
-                            }),
-                            name: 'preferedLanguage',
-                            options: Object.entries(localeNames).map(([value, label])=>({
-                                    label,
-                                    value
-                                })),
-                            placeholder: formatMessage({
-                                id: 'global.select',
-                                defaultMessage: 'Select'
-                            }),
-                            size: 6,
-                            type: 'enumeration'
-                        },
-                        {
-                            hint: formatMessage({
-                                id: 'Settings.profile.form.section.experience.mode.hint',
-                                defaultMessage: 'Displays your interface in the chosen mode.'
-                            }),
-                            label: formatMessage({
-                                id: 'Settings.profile.form.section.experience.mode.label',
-                                defaultMessage: 'Interface mode'
-                            }),
-                            name: 'currentTheme',
-                            options: [
-                                {
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
+                gap: 5,
+                children: [
+                    {
+                        hint: formatMessage({
+                            id: 'Settings.profile.form.section.experience.interfaceLanguage.hint',
+                            defaultMessage: 'This will only display your own interface in the chosen language.'
+                        }),
+                        label: formatMessage({
+                            id: 'Settings.profile.form.section.experience.interfaceLanguage',
+                            defaultMessage: 'Interface language'
+                        }),
+                        name: 'preferedLanguage',
+                        options: Object.entries(localeNames).map(([value, label])=>({
+                                label,
+                                value
+                            })),
+                        placeholder: formatMessage({
+                            id: 'global.select',
+                            defaultMessage: 'Select'
+                        }),
+                        size: 6,
+                        type: 'enumeration'
+                    },
+                    {
+                        hint: formatMessage({
+                            id: 'Settings.profile.form.section.experience.mode.hint',
+                            defaultMessage: 'Displays your interface in the chosen mode.'
+                        }),
+                        label: formatMessage({
+                            id: 'Settings.profile.form.section.experience.mode.label',
+                            defaultMessage: 'Interface mode'
+                        }),
+                        name: 'currentTheme',
+                        options: [
+                            {
+                                label: formatMessage({
+                                    id: 'Settings.profile.form.section.experience.mode.option-system-label',
+                                    defaultMessage: 'Use system settings'
+                                }),
+                                value: 'system'
+                            },
+                            ...themesToDisplay.map((theme)=>({
                                     label: formatMessage({
-                                        id: 'Settings.profile.form.section.experience.mode.option-system-label',
-                                        defaultMessage: 'Use system settings'
+                                        id: 'Settings.profile.form.section.experience.mode.option-label',
+                                        defaultMessage: '{name} mode'
+                                    }, {
+                                        name: formatMessage({
+                                            id: theme,
+                                            defaultMessage: upperFirst(theme)
+                                        })
                                     }),
-                                    value: 'system'
-                                },
-                                ...themesToDisplay.map((theme)=>({
-                                        label: formatMessage({
-                                            id: 'Settings.profile.form.section.experience.mode.option-label',
-                                            defaultMessage: '{name} mode'
-                                        }, {
-                                            name: formatMessage({
-                                                id: theme,
-                                                defaultMessage: upperFirst(theme)
-                                            })
-                                        }),
-                                        value: theme
-                                    }))
-                            ],
-                            placeholder: formatMessage({
-                                id: 'components.Select.placeholder',
-                                defaultMessage: 'Select'
-                            }),
-                            size: 6,
-                            type: 'enumeration'
-                        }
-                    ].map(({ size, ...field })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
-                            col: size,
-                            direction: "column",
-                            alignItems: "stretch",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(Renderer.InputRenderer, {
-                                ...field
-                            })
-                        }, field.name))
-                })
-            ]
-        })
+                                    value: theme
+                                }))
+                        ],
+                        placeholder: formatMessage({
+                            id: 'components.Select.placeholder',
+                            defaultMessage: 'Select'
+                        }),
+                        size: 6,
+                        type: 'enumeration'
+                    }
+                ].map(({ size, ...field })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                        col: size,
+                        direction: "column",
+                        alignItems: "stretch",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Renderer.InputRenderer, {
+                            ...field
+                        })
+                    }, field.name))
+            })
+        ]
     });
 };
 /* -------------------------------------------------------------------------------------------------
  * UserInfoSection
  * -----------------------------------------------------------------------------------------------*/ const UserInfoSection = ()=>{
     const { formatMessage } = reactIntl.useIntl();
-    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-        background: "neutral0",
-        hasRadius: true,
-        shadow: "filterShadow",
-        paddingTop: 6,
-        paddingBottom: 6,
-        paddingLeft: 7,
-        paddingRight: 7,
-        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-            direction: "column",
-            alignItems: "stretch",
-            gap: 4,
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                    variant: "delta",
-                    tag: "h2",
-                    children: formatMessage({
-                        id: 'global.profile',
-                        defaultMessage: 'Profile'
+    return /*#__PURE__*/ jsxRuntime.jsxs(Panel, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                variant: "delta",
+                tag: "h2",
+                children: formatMessage({
+                    id: 'global.profile',
+                    defaultMessage: 'Profile'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
+                gap: 5,
+                children: [
+                    {
+                        label: formatMessage({
+                            id: 'Auth.form.firstname.label',
+                            defaultMessage: 'First name'
+                        }),
+                        name: 'firstname',
+                        required: true,
+                        size: 6,
+                        type: 'string'
+                    },
+                    {
+                        label: formatMessage({
+                            id: 'Auth.form.lastname.label',
+                            defaultMessage: 'Last name'
+                        }),
+                        name: 'lastname',
+                        size: 6,
+                        type: 'string'
+                    },
+                    {
+                        label: formatMessage({
+                            id: 'Auth.form.email.label',
+                            defaultMessage: 'Email'
+                        }),
+                        name: 'email',
+                        required: true,
+                        size: 6,
+                        type: 'email'
+                    },
+                    {
+                        label: formatMessage({
+                            id: 'Auth.form.username.label',
+                            defaultMessage: 'Username'
+                        }),
+                        name: 'username',
+                        size: 6,
+                        type: 'string'
+                    }
+                ].map(({ size, ...field })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                        col: size,
+                        direction: "column",
+                        alignItems: "stretch",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Renderer.InputRenderer, {
+                            ...field
+                        })
+                    }, field.name))
+            })
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * GuidedTourSection
+ * -----------------------------------------------------------------------------------------------*/ const GuidedTourSection = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { toggleNotification } = Notifications.useNotification();
+    const dispatch = Context.useGuidedTour('ProfilePage', (s)=>s.dispatch);
+    const onClickReset = ()=>{
+        dispatch({
+            type: 'reset_all_tours'
+        });
+        toggleNotification({
+            type: 'success',
+            message: formatMessage({
+                id: 'tours.profile.notification.success.reset',
+                defaultMessage: 'Guided tour reset'
+            })
+        });
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(Panel, {
+        alignItems: "start",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                direction: "column",
+                alignItems: "start",
+                gap: 1,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        variant: "delta",
+                        tag: "h2",
+                        children: formatMessage({
+                            id: 'tours.profile.title',
+                            defaultMessage: 'Guided tour'
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        variant: "pi",
+                        children: formatMessage({
+                            id: 'tours.profile.description',
+                            defaultMessage: 'You can reset the guided tour at any time.'
+                        })
                     })
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
-                    gap: 5,
-                    children: [
-                        {
-                            label: formatMessage({
-                                id: 'Auth.form.firstname.label',
-                                defaultMessage: 'First name'
-                            }),
-                            name: 'firstname',
-                            required: true,
-                            size: 6,
-                            type: 'string'
-                        },
-                        {
-                            label: formatMessage({
-                                id: 'Auth.form.lastname.label',
-                                defaultMessage: 'Last name'
-                            }),
-                            name: 'lastname',
-                            size: 6,
-                            type: 'string'
-                        },
-                        {
-                            label: formatMessage({
-                                id: 'Auth.form.email.label',
-                                defaultMessage: 'Email'
-                            }),
-                            name: 'email',
-                            required: true,
-                            size: 6,
-                            type: 'email'
-                        },
-                        {
-                            label: formatMessage({
-                                id: 'Auth.form.username.label',
-                                defaultMessage: 'Username'
-                            }),
-                            name: 'username',
-                            size: 6,
-                            type: 'string'
-                        }
-                    ].map(({ size, ...field })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
-                            col: size,
-                            direction: "column",
-                            alignItems: "stretch",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(Renderer.InputRenderer, {
-                                ...field
-                            })
-                        }, field.name))
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                variant: "tertiary",
+                onClick: onClickReset,
+                children: formatMessage({
+                    id: 'tours.profile.reset',
+                    defaultMessage: 'Reset guided tour'
                 })
-            ]
-        })
+            })
+        ]
     });
 };