Merge pull request #24 from dhis2/feat/sharing-dialog

feat: add DHIS2 Sharing Dialog (TECH-274)

collections/widgets/src/index.js

@@ -23,3 +23,4 @@ export {
     DataTableRow,
     DataTableToolbar,
 } from '@dhis2-ui/table'
+// TODO export { SharingDialog } from '@dhis2-ui/sharing-dialog'

components/sharing-dialog/README.md

@@ -0,0 +1,6 @@
+> :warning:
+> This is currently considered internal, please use `@dhis2/ui`.
+>
+> See the [Getting started
+> guide](https://github.com/dhis2/ui/blob/master/docs/getting-started.md)
+> for more information.

components/sharing-dialog/d2.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    type: 'lib',
+    entryPoints: {
+        lib: 'src/index.js',
+    },
+}

components/sharing-dialog/i18n/en.pot

@@ -0,0 +1,140 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: i18next-conv\n"
+"MIME-Version: 1.0\n"
+"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-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"
+
+msgid "Search"
+msgstr "Search"
+
+msgid "User, group or role"
+msgstr "User, group or role"
+
+msgid "Access level"
+msgstr "Access level"
+
+msgid "Select a level"
+msgstr "Select a level"
+
+msgid "Give access"
+msgstr "Give access"
+
+msgid "No access"
+msgstr "No access"
+
+msgid "Anyone logged in can view"
+msgstr "Anyone logged in can view"
+
+msgid "Can view"
+msgstr "Can view"
+
+msgid "View only"
+msgstr "View only"
+
+msgid "Anyone logged in can view and edit"
+msgstr "Anyone logged in can view and edit"
+
+msgid "Can view and edit"
+msgstr "Can view and edit"
+
+msgid "View and edit"
+msgstr "View and edit"
+
+msgid "Sharing & Access"
+msgstr "Sharing & Access"
+
+msgid "Close"
+msgstr "Close"
+
+msgid "Metadata"
+msgstr "Metadata"
+
+msgid "Users, groups and roles that currently have access"
+msgstr "Users, groups and roles that currently have access"
+
+msgid "User / Group / Role"
+msgstr "User / Group / Role"
+
+msgid "External users"
+msgstr "External users"
+
+msgid "All users"
+msgstr "All users"

components/sharing-dialog/package.json

@@ -0,0 +1,63 @@
+{
+    "name": "@dhis2-ui/sharing-dialog",
+    "version": "6.16.0",
+    "description": "UI SharingDialog",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/dhis2/ui.git",
+        "directory": "components/sharing-dialog"
+    },
+    "homepage": "https://github.com/dhis2/ui#readme",
+    "license": "BSD-3-Clause",
+    "private": false,
+    "main": "./build/cjs/index.js",
+    "module": "./build/es/index.js",
+    "exports": {
+        "import": "./build/es/index.js",
+        "require": "./build/cjs/index.js"
+    },
+    "sideEffects": false,
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "build": "d2-app-scripts build"
+    },
+    "peerDependencies": {
+        "@dhis2/app-runtime": "^2",
+        "@dhis2/d2-i18n": "^1",
+        "react": "^16.8",
+        "react-dom": "^16.8",
+        "styled-jsx": "^3.2"
+    },
+    "dependencies": {
+        "@dhis2-ui/button": "6.16.0",
+        "@dhis2-ui/card": "6.16.0",
+        "@dhis2-ui/divider": "6.16.0",
+        "@dhis2-ui/input": "6.16.0",
+        "@dhis2-ui/layer": "6.16.0",
+        "@dhis2-ui/loader": "6.16.0",
+        "@dhis2-ui/menu": "6.16.0",
+        "@dhis2-ui/modal": "6.16.0",
+        "@dhis2-ui/notice-box": "6.16.0",
+        "@dhis2-ui/popper": "6.16.0",
+        "@dhis2-ui/select": "6.16.0",
+        "@dhis2-ui/tab": "6.16.0",
+        "@dhis2/prop-types": "^1.6.4",
+        "@dhis2/ui-constants": "6.16.0",
+        "@dhis2/ui-icons": "6.16.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.7.2"
+    },
+    "files": [
+        "build"
+    ],
+    "devDependencies": {
+        "@dhis2/app-runtime": "^2.7.1",
+        "@dhis2/d2-i18n": "^1.1.0",
+        "react": "16.13",
+        "react-dom": "16.13",
+        "styled-jsx": "^3.4.4"
+    }
+}

components/sharing-dialog/src/__tests__/AccessSelect.test.js

@@ -0,0 +1,40 @@
+import { SingleSelectField } from '@dhis2-ui/select'
+import { shallow } from 'enzyme'
+import React from 'react'
+import { AccessSelect } from '../access-select.js'
+import { ACCESS_VIEW_ONLY, ACCESS_VIEW_AND_EDIT } from '../sharing-constants.js'
+
+describe('SharingDialog widget - AccessSelect component', () => {
+    let shallowAccessSelectComponent
+    let props
+
+    const onChange = jest.fn()
+
+    const getAccessSelectComponent = props => {
+        if (!shallowAccessSelectComponent) {
+            shallowAccessSelectComponent = shallow(<AccessSelect {...props} />)
+        }
+
+        return shallowAccessSelectComponent
+    }
+
+    beforeEach(() => {
+        shallowAccessSelectComponent = undefined
+        props = {
+            access: ACCESS_VIEW_ONLY,
+            accessOptions: [ACCESS_VIEW_ONLY, ACCESS_VIEW_AND_EDIT],
+            disabled: false,
+            label: 'Label',
+            placeholder: 'Placeholder',
+            prefix: 'Prefix',
+            showRemoveOption: false,
+            onChange,
+        }
+    })
+
+    it('renders a SingleSelectField component ', () => {
+        expect(
+            getAccessSelectComponent(props).find(SingleSelectField)
+        ).toHaveLength(1)
+    })
+})

components/sharing-dialog/src/__tests__/ShareBlock.test.js

@@ -0,0 +1,45 @@
+import { Button } from '@dhis2-ui/button'
+import { shallow } from 'enzyme'
+import React from 'react'
+import { AccessSelect } from '../access-select.js'
+import { Autocomplete } from '../autocomplete/autocomplete.js'
+import { ShareBlock } from '../share-block.js'
+
+describe('SharingDialog widget - ShareBlock component', () => {
+    let shallowShareBlockComponent
+    let props
+
+    const onAdd = jest.fn()
+
+    const getShareBlockComponent = props => {
+        if (!shallowShareBlockComponent) {
+            shallowShareBlockComponent = shallow(<ShareBlock {...props} />)
+        }
+
+        return shallowShareBlockComponent
+    }
+
+    beforeEach(() => {
+        shallowShareBlockComponent = undefined
+        props = {
+            onAdd,
+        }
+    })
+
+    it('renders the Autocomplete component ', () =>
+        expect(getShareBlockComponent(props).find(Autocomplete)).toHaveLength(
+            1
+        ))
+
+    it('renders the AccessSelect component', () =>
+        expect(getShareBlockComponent(props).find(AccessSelect)).toHaveLength(
+            1
+        ))
+
+    it('renders the Give access button', () => {
+        const button = getShareBlockComponent(props).find(Button)
+
+        expect(button).toHaveLength(1)
+        expect(button.html()).toMatch('Give access')
+    })
+})

components/sharing-dialog/src/__tests__/SharingDialog.test.js

@@ -0,0 +1,77 @@
+import { Button } from '@dhis2-ui/button'
+import { Modal, ModalTitle } from '@dhis2-ui/modal'
+import { shallow } from 'enzyme'
+import React from 'react'
+import { DashboardSharingContent } from '../dashboard-sharing-content.js'
+import { DefaultSharingContent } from '../default-sharing-content.js'
+import { defaultSharingSettings } from '../sharing-constants.js'
+import { SharingDialog } from '../sharing-dialog.js'
+
+describe('SharingDialog widget', () => {
+    const onClose = jest.fn()
+    const onSave = jest.fn()
+    const onError = jest.fn()
+
+    let shallowSharingDialog
+    let props
+
+    const getSharingDialogWidget = props => {
+        if (!shallowSharingDialog) {
+            shallowSharingDialog = shallow(<SharingDialog {...props} />)
+        }
+
+        return shallowSharingDialog
+    }
+
+    beforeEach(() => {
+        shallowSharingDialog = undefined
+        props = {
+            type: 'visualization',
+            onClose,
+            onError,
+            onSave,
+        }
+    })
+
+    it('renders a Modal', () =>
+        expect(getSharingDialogWidget(props).find(Modal)).toHaveLength(1))
+
+    it('renders the ModalTitle with the name of the AO if passed in props', () => {
+        props.initialSharingSettings = {
+            ...defaultSharingSettings,
+            name: 'test object',
+        }
+
+        expect(getSharingDialogWidget(props).find(ModalTitle).html()).toMatch(
+            props.initialSharingSettings.name
+        )
+    })
+
+    it('renders a Close button', () => {
+        const button = getSharingDialogWidget(props).find(Button)
+
+        expect(button).toHaveLength(1)
+        expect(button.html()).toMatch('Close')
+    })
+
+    it('calls the Close callback when the Close button is clicked', () => {
+        const button = getSharingDialogWidget(props).find(Button)
+
+        button.simulate('click')
+
+        expect(onClose).toHaveBeenCalled()
+    })
+
+    it('renders a DefaultSharingContent component when the type is not dashboard', () =>
+        expect(
+            getSharingDialogWidget(props).find(DefaultSharingContent)
+        ).toHaveLength(1))
+
+    it('renders a DashboardSharingContent component when the type is dashboard', () => {
+        props.type = 'dashboard'
+
+        expect(
+            getSharingDialogWidget(props).find(DashboardSharingContent)
+        ).toHaveLength(1)
+    })
+})