chore: add PropTypes and mark translatable strings

packages/widgets/src/SharingDialog/AccessSelect.js

@@ -1,22 +1,32 @@
 import React from 'react'
-import {
-    SingleSelect,
-    SingleSelectOption,
-} from '../'
+
+import PropTypes from '@dhis2/prop-types'
+
+import i18n from '@dhis2/d2-i18n'
+
+import { SingleSelect, SingleSelectOption } from '../'
 import { accessStrings, ACCESS_NONE } from './sharingConstants'
-import { accessSelectStyles } from './SharingDialog.styles';
+import { accessSelectStyles } from './SharingDialog.styles'
 
 export const AccessSelect = ({ access, onChange, showNoAccessOption }) => (
     <SingleSelect
-      className="share-select"
-      placeholder="Select access"
-      selected={access}
-      onChange={({ selected }) => onChange(selected)}
+        className="share-select"
+        placeholder={i18n.t('Select access')}
+        selected={access}
+        onChange={({ selected }) => onChange(selected)}
     >
         <style jsx>{accessSelectStyles}</style>
-        {Object.entries(accessStrings).map(([value, strings]) => (
-            (value !== ACCESS_NONE || showNoAccessOption) &&
-                <SingleSelectOption label={strings.option} value={value} />
-        ))}
+        {Object.entries(accessStrings).map(
+            ([value, strings]) =>
+                (value !== ACCESS_NONE || showNoAccessOption) && (
+                    <SingleSelectOption label={strings.option} value={value} />
+                )
+        )}
     </SingleSelect>
-  );
+)
+
+AccessSelect.propTypes = {
+    access: PropTypes.object,
+    showNoAccessOption: PropTypes.bool,
+    onChange: PropTypes.func,
+}

packages/widgets/src/SharingDialog/ShareBlock.js

@@ -1,7 +1,12 @@
 import React, { useState } from 'react'
-import { Button, InputField } from '../';
-import { AccessSelect } from './AccessSelect';
-import { shareBlockStyles } from "./SharingDialog.styles";
+
+import PropTypes from '@dhis2/prop-types'
+
+import i18n from '@dhis2/d2-i18n'
+
+import { Button, InputField } from '../'
+import { AccessSelect } from './AccessSelect'
+import { shareBlockStyles } from './SharingDialog.styles'
 
 export const ShareBlock = ({ onAdd }) => {
     const [userOrGroup, setUserOrGroup] = useState(undefined)
@@ -14,20 +19,28 @@ export const ShareBlock = ({ onAdd }) => {
         setAccess(undefined)
     }
 
-    return <div className="share-block">
-      <style jsx>{shareBlockStyles}</style>
-      <p>Share with users and groups</p>
-      <form onSubmit={onSubmit} className="sharing-inputs">
-        <InputField
-          placeholder="Search for user, group or role"
-          inputWidth="400px"
-          value={userOrGroup}
-          onChange={({ value }) => setUserOrGroup(value)}
-        />
-        <div className="select-wrap">
-          <AccessSelect access={access} onChange={setAccess} />
+    return (
+        <div className="share-block">
+            <style jsx>{shareBlockStyles}</style>
+            <p>{i18n.t('Share with users and groups')}</p>
+            <form onSubmit={onSubmit} className="sharing-inputs">
+                <InputField
+                    placeholder={i18n.t('Search for user, group or role')}
+                    inputWidth="400px"
+                    value={userOrGroup}
+                    onChange={({ value }) => setUserOrGroup(value)}
+                />
+                <div className="select-wrap">
+                    <AccessSelect access={access} onChange={setAccess} />
+                </div>
+                <Button type="submit" large disabled={!userOrGroup || !access}>
+                    {i18n.t('Share')}
+                </Button>
+            </form>
         </div>
-        <Button type="submit" large disabled={!userOrGroup || !access}>Share</Button>
-      </form>
-    </div>
-};
+    )
+}
+
+ShareBlock.propTypes = {
+    onAdd: PropTypes.func,
+}

packages/widgets/src/SharingDialog/SharingDialog.js

@@ -1,53 +1,72 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
 import PropTypes from '@dhis2/prop-types'
 
+import i18n from '@dhis2/d2-i18n'
+
+import {
+    Modal,
+    ModalTitle,
+    ModalContent,
+    ModalActions,
+    ButtonStrip,
+    Button,
+} from '../'
+import { SharingList } from './SharingList'
+import { ShareBlock } from './ShareBlock'
 import {
-  Modal,
-  ModalTitle,
-  ModalContent,
-  ModalActions,
-  ButtonStrip,
-  Button,
-} from "../";
-import { SharingList } from "./SharingList";
-import { ShareBlock } from "./ShareBlock";
-import i18n from "@dhis2/d2-i18n";
-import { defaultSharingSettings, sharingSettingsAreEqual } from "./sharingConstants";
+    defaultSharingSettings,
+    sharingSettingsAreEqual,
+} from './sharingConstants'
 
-export const SharingDialog = ({ name, initialSharingSettings = defaultSharingSettings }) => {
-  const [sharingSettings, updateSharingSettings] = useState(initialSharingSettings)
+export const SharingDialog = ({
+    name,
+    initialSharingSettings = defaultSharingSettings,
+}) => {
+    const [sharingSettings, updateSharingSettings] = useState(
+        initialSharingSettings
+    )
 
-  const addUserOrGroupAccess = ({ type, id, access }) => {
-    console.log(type, id, access)
-    updateSharingSettings({
-      ...sharingSettings,
-      [`${type}s`]: {
-        ...sharingSettings[`${type}s`],
-        [id]: access
-      }
-  })
-}
+    const addUserOrGroupAccess = ({ type, id, access }) => {
+        console.log(type, id, access)
+        updateSharingSettings({
+            ...sharingSettings,
+            [`${type}s`]: {
+                ...sharingSettings[`${type}s`],
+                [id]: access,
+            },
+        })
+    }
 
-  console.log(sharingSettings)
-
-  const dirty = !sharingSettingsAreEqual(initialSharingSettings, sharingSettings)
-  return (
-    <Modal large >
-      <ModalTitle>{i18n.t('Sharing settings')}{ name && `: ${name}` }</ModalTitle>
-      <ModalContent>
-          <ShareBlock onAdd={addUserOrGroupAccess} />
-          <SharingList sharingSettings={sharingSettings} onChange={updateSharingSettings} />
-      </ModalContent>
-      <ModalActions>
-          <ButtonStrip end>
-            <Button>Hide</Button>
-            <Button primary disabled={!dirty}>Save</Button>
-          </ButtonStrip>
-      </ModalActions>
-    </Modal>
-  );
+    const dirty = !sharingSettingsAreEqual(
+        initialSharingSettings,
+        sharingSettings
+    )
+    return (
+        <Modal large>
+            <ModalTitle>
+                {i18n.t('Sharing settings')}
+                {name && `: ${name}`}
+            </ModalTitle>
+            <ModalContent>
+                <ShareBlock onAdd={addUserOrGroupAccess} />
+                <SharingList
+                    sharingSettings={sharingSettings}
+                    onChange={updateSharingSettings}
+                />
+            </ModalContent>
+            <ModalActions>
+                <ButtonStrip end>
+                    <Button>{i18n.t('Hide')}</Button>
+                    <Button primary disabled={!dirty}>
+                        {i18n.t('Save')}
+                    </Button>
+                </ButtonStrip>
+            </ModalActions>
+        </Modal>
+    )
 }
 
-SharingDialog.propTYpes = {
-  name: PropTypes.string
-}
+SharingDialog.propTypes = {
+    initialSharingSettings: PropTypes.object,
+    name: PropTypes.string,
+}

packages/widgets/src/SharingDialog/SharingList.js

@@ -1,43 +1,92 @@
 import React from 'react'
 
-import { sharingListStyles } from "./SharingDialog.styles";
-import { SHARE_TARGET_PUBLIC, SHARE_TARGET_EXTERNAL, SHARE_TARGET_GROUP, SHARE_TARGET_USER } from "./sharingConstants";
-import { SharingListItem } from './SharingListItem';
-import i18n from '@dhis2/d2-i18n';
+import PropTypes from '@dhis2/prop-types'
+import i18n from '@dhis2/d2-i18n'
+
+import { sharingListStyles } from './SharingDialog.styles'
+import {
+    SHARE_TARGET_PUBLIC,
+    SHARE_TARGET_EXTERNAL,
+    SHARE_TARGET_GROUP,
+    SHARE_TARGET_USER,
+} from './sharingConstants'
+import { SharingListItem } from './SharingListItem'
 
 export const SharingList = ({ sharingSettings, onChange }) => (
-  <div>
-    <style jsx>{sharingListStyles}</style>
-    <p>{i18n.t('Users and groups that have access')}</p>
-    <table>
-      <tbody>
-        <SharingListItem name="External" target={SHARE_TARGET_EXTERNAL} access={sharingSettings.external} onChange={access => onChange({ ...sharingSettings, external: access })} />
-        <SharingListItem name="Public" target={SHARE_TARGET_PUBLIC} access={sharingSettings.public} onChange={access => onChange({ ...sharingSettings, public: access })} />
-        {Object.entries(sharingSettings.groups).map(([group, access]) =>
-            <SharingListItem name={group} target={SHARE_TARGET_GROUP} access={access} onChange={newAccess => onChange({ ...sharingSettings, groups: { ...sharingSettings.groups, [group]: newAccess } })} />
-        )}
-        {Object.entries(sharingSettings.users).map(([user, access]) =>
-            access && <SharingListItem
-                name={user}
-                target={SHARE_TARGET_USER}
-                access={access}
-                onChange={newAccess => onChange({
-                    ...sharingSettings,
-                    users: {
-                        ...sharingSettings.users,
-                        [user]: newAccess
+    <div>
+        <style jsx>{sharingListStyles}</style>
+        <p>{i18n.t('Users and groups that have access')}</p>
+        <table>
+            <tbody>
+                <SharingListItem
+                    name={i18n.t('External')}
+                    target={SHARE_TARGET_EXTERNAL}
+                    access={sharingSettings.external}
+                    onChange={access =>
+                        onChange({ ...sharingSettings, external: access })
                     }
-                })}
-                onRemove={() => onChange({
-                    ...sharingSettings,
-                    users: {
-                        ...sharingSettings.users,
-                        [user]: undefined
+                />
+                <SharingListItem
+                    name={i18n.t('Public')}
+                    target={SHARE_TARGET_PUBLIC}
+                    access={sharingSettings.public}
+                    onChange={access =>
+                        onChange({ ...sharingSettings, public: access })
                     }
-                })}
-            />
-        )}
-      </tbody>
-    </table>
-  </div>
-);
+                />
+                {Object.entries(sharingSettings.groups).map(
+                    ([group, access]) => (
+                        <SharingListItem
+                            key={group}
+                            name={group}
+                            target={SHARE_TARGET_GROUP}
+                            access={access}
+                            onChange={newAccess =>
+                                onChange({
+                                    ...sharingSettings,
+                                    groups: {
+                                        ...sharingSettings.groups,
+                                        [group]: newAccess,
+                                    },
+                                })
+                            }
+                        />
+                    )
+                )}
+                {Object.entries(sharingSettings.users).map(
+                    ([user, access]) =>
+                        access && (
+                            <SharingListItem
+                                name={user}
+                                target={SHARE_TARGET_USER}
+                                access={access}
+                                onChange={newAccess =>
+                                    onChange({
+                                        ...sharingSettings,
+                                        users: {
+                                            ...sharingSettings.users,
+                                            [user]: newAccess,
+                                        },
+                                    })
+                                }
+                                onRemove={() =>
+                                    onChange({
+                                        ...sharingSettings,
+                                        users: {
+                                            ...sharingSettings.users,
+                                            [user]: undefined,
+                                        },
+                                    })
+                                }
+                            />
+                        )
+                )}
+            </tbody>
+        </table>
+    </div>
+)
+
+SharingList.propTypes = {
+    sharingSettings: PropTypes.object,
+    onChange: PropTypes.func,
+}