feat: implement cascade sharing for dashboard TECH-274

components/sharing-dialog/i18n/en.pot

@@ -5,12 +5,80 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2021-07-12T09:43:32.146Z\n"
-"PO-Revision-Date: 2021-07-12T09:43:32.146Z\n"
+"POT-Creation-Date: 2021-08-17T10:24:25.305Z\n"
+"PO-Revision-Date: 2021-08-17T10:24:25.305Z\n"
 
 msgid "Remove access"
 msgstr "Remove access"
 
+msgid "Apply dashboard sharing settings to dashboard items"
+msgstr "Apply dashboard sharing settings to dashboard items"
+
+msgid ""
+"All dashboard items will be updated. Users and groups with access to this "
+"dashboard will have the same access level for all dashboard items. Public "
+"sharing will not be applied to dashboard items. Applying sharing can not be "
+"undone, and needs to be performed each time you update a dashboard's "
+"sharing settings or items."
+msgstr ""
+"All dashboard items will be updated. Users and groups with access to this "
+"dashboard will have the same access level for all dashboard items. Public "
+"sharing will not be applied to dashboard items. Applying sharing can not be "
+"undone, and needs to be performed each time you update a dashboard's "
+"sharing settings or items."
+
+msgid ""
+"\n"
+"            {{dashboardItemsCount}} dashboard items will be updated with "
+"sharing settings\n"
+"                    from {{usersGroupsCount}} users and groups. Public "
+"access is not affected."
+msgstr ""
+"\n"
+"            {{dashboardItemsCount}} dashboard items will be updated with "
+"sharing settings\n"
+"                    from {{usersGroupsCount}} users and groups. Public "
+"access is not affected."
+
+msgid ""
+"There aren't any sharing settings to apply to dashboard items. Public "
+"access cannot be applied to items."
+msgstr ""
+"There aren't any sharing settings to apply to dashboard items. Public "
+"access cannot be applied to items."
+
+msgid "Apply sharing to dashboard items"
+msgstr "Apply sharing to dashboard items"
+
+msgid "Updating sharing settings..."
+msgstr "Updating sharing settings..."
+
+msgid ""
+"There was a problem updating dashboard items. No dashboard items were "
+"updated. Try again, or contact a system administrator"
+msgstr ""
+"There was a problem updating dashboard items. No dashboard items were "
+"updated. Try again, or contact a system administrator"
+
+msgid ""
+"{{updatedDashboardItemsCount}} dashboard items were updated, but "
+"{{ignoredDashboardItemsCount}} could not be updated. Check that you have "
+"permission to change sharing for all items."
+msgstr ""
+"{{updatedDashboardItemsCount}} dashboard items were updated, but "
+"{{ignoredDashboardItemsCount}} could not be updated. Check that you have "
+"permission to change sharing for all items."
+
+msgid ""
+"Successfully updated sharing for {{updatedDashboardItemsCount}} dashboard "
+"items"
+msgstr ""
+"Successfully updated sharing for {{updatedDashboardItemsCount}} dashboard "
+"items"
+
+msgid "Dashboard sharing"
+msgstr "Dashboard sharing"
+
 msgid "Give access to a user, group or role"
 msgstr "Give access to a user, group or role"
 

components/sharing-dialog/src/dashboard-auto-share-content.js

@@ -1,54 +1,132 @@
 import { Button } from '@dhis2-ui/button'
 import { CircularLoader } from '@dhis2-ui/loader'
+import { NoticeBox } from '@dhis2-ui/notice-box'
+import { useDataQuery, useDataMutation } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from '@dhis2/prop-types'
 import { colors } from '@dhis2/ui-constants'
-import { IconInfo16, IconWarning16 } from '@dhis2/ui-icons'
-import React from 'react'
-import { ACCESS_NONE } from './sharing-constants.js'
+import { IconInfo16, IconCheckmark16 } from '@dhis2/ui-icons'
+import React, { useMemo } from 'react'
 import { autoShareStyles } from './sharing-dialog.styles'
 
+const dashboardQuery = {
+    dashboard: {
+        resource: 'dashboards',
+        id: ({ id }) => id,
+        params: {
+            fields: 'itemCount',
+        },
+    },
+}
+
+const getCascadeSharingMutation = id => ({
+    resource: `dashboards/cascadeSharing/${id}`,
+    type: 'create',
+})
+
 export const DashboardAutoShareContent = ({ sharingSettings }) => {
-    // TODO use dataEngine for the actual query and use the loading state from there
-    const loading = false
+    const { data: queryResponse } = useDataQuery(dashboardQuery, {
+        variables: { id: sharingSettings.id },
+    })
+
+    const mutation = useMemo(
+        () => getCascadeSharingMutation(sharingSettings.id),
+        []
+    )
+
+    const [
+        mutate,
+        { loading, error, data: mutationResponse },
+    ] = useDataMutation(mutation)
+
+    const usersGroupsCount =
+        Object.keys(sharingSettings.users).length +
+        Object.keys(sharingSettings.groups).length
 
     return (
         <>
             <style jsx>{autoShareStyles}</style>
             <div className="title">
-                {i18n.t('Auto-sharing dashboard items')}
+                {i18n.t('Apply dashboard sharing settings to dashboard items')}
             </div>
             <div className="description">
                 {i18n.t(
-                    "Auto-share will apply the current dashboard sharing settings to all dashboard items. All dashboard items will be updated, and users and groups with access to this dashboard will have the same access level for all dashboard items. Auto-share can not be undone. Auto-share needs to be performed each time you update a dashboard's sharing settings or items."
+                    "All dashboard items will be updated. Users and groups with access to this dashboard will have the same access level for all dashboard items. Public sharing will not be applied to dashboard items. Applying sharing can not be undone, and needs to be performed each time you update a dashboard's sharing settings or items."
                 )}
             </div>
-            <div className="info-box">
+            <div className="box box-info">
                 <IconInfo16 color={colors.grey900} />
-                <span className="info-box-text">
-                    24 dashboard items will be updated with sharing settings
-                    from 8 users and groups.
+                <span className="box-text">
+                    {usersGroupsCount > 0
+                        ? i18n.t(
+                              `
+            {{dashboardItemsCount}} dashboard items will be updated with sharing settings
+                    from {{usersGroupsCount}} users and groups. Public access is not affected.`,
+                              {
+                                  dashboardItemsCount:
+                                      queryResponse?.dashboard.itemCount,
+                                  usersGroupsCount,
+                              }
+                          )
+                        : i18n.t(
+                              "There aren't any sharing settings to apply to dashboard items. Public access cannot be applied to items."
+                          )}
                 </span>
             </div>
-            {sharingSettings.public !== ACCESS_NONE && (
-                <div className="warning-box">
-                    <IconWarning16 color={colors.red500} />
-                    <span className="warning-box-text">
-                        Warning: This dashboard has public access. Auto-sharing
-                        will give public access to all 24 dashboard items.
-                    </span>
+            <Button
+                type="button"
+                disabled={loading || !usersGroupsCount}
+                secondary
+                onClick={() => mutate()}
+            >
+                {i18n.t('Apply sharing to dashboard items')}
+            </Button>
+            {loading && (
+                <div className="loading">
+                    <CircularLoader small />{' '}
+                    <span>{i18n.t('Updating sharing settings...')}</span>
                 </div>
             )}
-            <Button type="button" disabled={loading} secondary>
-                {i18n.t('Auto-share dashboard items')}
-            </Button>
             <div className="result-box">
-                {loading && (
-                    <div className="loading">
-                        <CircularLoader small />{' '}
-                        <span>{i18n.t('Auto-sharing dashboard items')}</span>
-                    </div>
+                {error && (
+                    <NoticeBox error>
+                        {i18n.t(
+                            'There was a problem updating dashboard items. No dashboard items were updated. Try again, or contact a system administrator'
+                        )}
+                    </NoticeBox>
                 )}
+                {mutationResponse &&
+                    mutationResponse?.countUpdatedDashboardItems !==
+                        queryResponse?.dashboard.itemCount && (
+                        <NoticeBox warning>
+                            {i18n.t(
+                                '{{updatedDashboardItemsCount}} dashboard items were updated, but {{ignoredDashboardItemsCount}} could not be updated. Check that you have permission to change sharing for all items.',
+                                {
+                                    updatedDashboardItemsCount:
+                                        mutationResponse.countUpdatedDashboardItems,
+                                    ignoredDashboardItemsCount:
+                                        queryResponse.dashboard.itemCount -
+                                        mutationResponse.countUpdatedDashboardItems,
+                                }
+                            )}
+                        </NoticeBox>
+                    )}
+                {mutationResponse &&
+                    mutationResponse?.countUpdatedDashboardItems ===
+                        queryResponse?.dashboard.itemCount && (
+                        <div className="box box-success">
+                            <IconCheckmark16 color={colors.grey700} />
+                            <span className="box-text">
+                                {i18n.t(
+                                    'Successfully updated sharing for {{updatedDashboardItemsCount}} dashboard items',
+                                    {
+                                        updatedDashboardItemsCount:
+                                            mutationResponse.countUpdatedDashboardItems,
+                                    }
+                                )}
+                            </span>
+                        </div>
+                    )}
             </div>
         </>
     )

components/sharing-dialog/src/dashboard-sharing-content.js

@@ -27,7 +27,7 @@ export const DashboardSharingContent = ({
                     onClick={() => setActiveTabIndex(1)}
                     selected={activeTabIndex === 1}
                 >
-                    {i18n.t('Auto-share dashboard items')}
+                    {i18n.t('Apply sharing to dashboard items')}
                 </Tab>
             </TabBar>
             <div className="tab-content">

components/sharing-dialog/src/sharing-dialog.js

@@ -123,6 +123,7 @@ export const SharingDialog = ({
                 ),
                 name:
                     data.sharing.object.displayName || data.sharing.object.name,
+                id: data.sharing.object.id,
             }))
         }
     }, [data])

components/sharing-dialog/src/sharing-dialog.styles.js

@@ -134,36 +134,33 @@ export const autoShareStyles = css`
         color: ${colors.grey800};
     }
 
-    .info-box {
+    .box {
         display: inline-flex;
-        margin-bottom: 8px;
+        margin-bottom: 14px;
         border-radius: 3px;
-        background-color: ${colors.grey200};
         padding: 8px 8px 6px 8px;
     }
-    .info-box-text {
+    .box-text {
         padding-left: 6px;
         font-size: 14px;
         color: ${colors.grey900};
         line-height: 19px;
     }
 
-    .warning-box {
-        display: inline-flex;
-        margin-bottom: 12px;
-        border-radius: 3px;
-        border: 1px solid ${colors.red500};
-        padding: 8px 8px 6px 8px;
+    .box-info {
+        background-color: ${colors.grey200};
     }
 
-    .warning-box-text {
-        padding-left: 6px;
-        font-size: 14px;
-        color: ${colors.red900};
-        line-height: 19px;
+    .box-success {
+        background-color: ${colors.green100};
+    }
+
+    .result-box {
+        margin-top: 14px;
     }
+
     .loading {
-        display: inline-flex;
+        display: flex;
         align-items: center;
         color: ${colors.grey800};
         font-size: 14px;