From: Lucas Di Pentima <lucas.dipentima@curii.com>
Date: Fri, 17 Dec 2021 22:31:03 +0000 (-0300)
Subject: 18219: Unifies code for showing the list of properties on rsc forms.
X-Git-Tag: 2.4.0~21^2~7
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/aa0a2249b6bf5b3e5b69034dfa5fab4b809ae6ce

18219: Unifies code for showing the list of properties on rsc forms.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>
---

diff --git a/src/views-components/collection-properties/create-collection-properties-list.tsx b/src/views-components/collection-properties/create-collection-properties-list.tsx
deleted file mode 100644
index b6e02cb6..00000000
--- a/src/views-components/collection-properties/create-collection-properties-list.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import {
-    withStyles,
-    StyleRulesCallback,
-    WithStyles,
-} from '@material-ui/core';
-import { RootState } from 'store/store';
-import {
-    COLLECTION_CREATE_FORM_SELECTOR,
-    CollectionProperties,
-    COLLECTION_CREATE_FORM_NAME
-} from 'store/collections/collection-create-actions';
-import { ArvadosTheme } from 'common/custom-theme';
-import { getPropertyChip } from '../resource-properties-form/property-chip';
-import { removePropertyFromResourceForm } from 'store/resources/resources-actions';
-
-type CssRules = 'tag';
-
-const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    tag: {
-        marginRight: theme.spacing.unit,
-        marginBottom: theme.spacing.unit
-    }
-});
-
-interface CreateCollectionPropertiesListDataProps {
-    properties: CollectionProperties;
-}
-
-interface CreateCollectionPropertiesListActionProps {
-    handleDelete: (key: string, value: string) => void;
-}
-
-const mapStateToProps = (state: RootState): CreateCollectionPropertiesListDataProps => {
-    const properties = COLLECTION_CREATE_FORM_SELECTOR(state, 'properties');
-    return { properties };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch): CreateCollectionPropertiesListActionProps => ({
-    handleDelete: (key: string, value: string) => dispatch<any>(removePropertyFromResourceForm(key, value, COLLECTION_CREATE_FORM_NAME))
-});
-
-type CreateCollectionPropertiesListProps = CreateCollectionPropertiesListDataProps &
-    CreateCollectionPropertiesListActionProps & WithStyles<CssRules>;
-
-const List = withStyles(styles)(
-    ({ classes, handleDelete, properties }: CreateCollectionPropertiesListProps) =>
-        <div>
-            {properties &&
-                Object.keys(properties).map(k =>
-                    Array.isArray(properties[k])
-                    ? (properties[k] as string[]).map((v: string) =>
-                        getPropertyChip(
-                            k, v,
-                            () => handleDelete(k, v),
-                            classes.tag))
-                    : getPropertyChip(
-                        k, (properties[k] as string),
-                        () => handleDelete(k, (properties[k] as string)),
-                        classes.tag))
-                }
-        </div>
-);
-
-export const CreateCollectionPropertiesList = connect(mapStateToProps, mapDispatchToProps)(List);
\ No newline at end of file
diff --git a/src/views-components/collection-properties/update-collection-properties-list.tsx b/src/views-components/collection-properties/update-collection-properties-list.tsx
deleted file mode 100644
index 792786f2..00000000
--- a/src/views-components/collection-properties/update-collection-properties-list.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import {
-    withStyles,
-    StyleRulesCallback,
-    WithStyles,
-} from '@material-ui/core';
-import { RootState } from 'store/store';
-import {
-    COLLECTION_UPDATE_FORM_SELECTOR,
-    COLLECTION_UPDATE_FORM_NAME,
-} from 'store/collections/collection-update-actions';
-import { ArvadosTheme } from 'common/custom-theme';
-import { getPropertyChip } from '../resource-properties-form/property-chip';
-import { CollectionProperties } from 'store/collections/collection-create-actions';
-import { removePropertyFromResourceForm } from 'store/resources/resources-actions';
-
-type CssRules = 'tag';
-
-const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    tag: {
-        marginRight: theme.spacing.unit,
-        marginBottom: theme.spacing.unit
-    }
-});
-
-interface UpdateCollectionPropertiesListDataProps {
-    properties: CollectionProperties;
-}
-
-interface UpdateCollectionPropertiesListActionProps {
-    handleDelete: (key: string, value: string) => void;
-}
-
-const mapStateToProps = (state: RootState): UpdateCollectionPropertiesListDataProps => {
-    const properties = COLLECTION_UPDATE_FORM_SELECTOR(state, 'properties');
-    return { properties };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch): UpdateCollectionPropertiesListActionProps => ({
-    handleDelete: (key: string, value: string) => dispatch<any>(removePropertyFromResourceForm(key, value, COLLECTION_UPDATE_FORM_NAME))
-});
-
-type UpdateCollectionPropertiesListProps = UpdateCollectionPropertiesListDataProps &
-    UpdateCollectionPropertiesListActionProps & WithStyles<CssRules>;
-
-const List = withStyles(styles)(
-    ({ classes, handleDelete, properties }: UpdateCollectionPropertiesListProps) =>
-        <div>
-            {properties &&
-                Object.keys(properties).map(k =>
-                    Array.isArray(properties[k])
-                    ? (properties[k] as string[]).map((v: string) =>
-                        getPropertyChip(
-                            k, v,
-                            () => handleDelete(k, v),
-                            classes.tag))
-                    : getPropertyChip(
-                        k, (properties[k] as string),
-                        () => handleDelete(k, (properties[k] as string)),
-                        classes.tag))
-                }
-        </div>
-);
-
-export const UpdateCollectionPropertiesList = connect(mapStateToProps, mapDispatchToProps)(List);
\ No newline at end of file
diff --git a/src/views-components/dialog-create/dialog-collection-create.tsx b/src/views-components/dialog-create/dialog-collection-create.tsx
index b75ad50f..163eb983 100644
--- a/src/views-components/dialog-create/dialog-collection-create.tsx
+++ b/src/views-components/dialog-create/dialog-collection-create.tsx
@@ -5,7 +5,7 @@
 import React from 'react';
 import { InjectedFormProps, Field } from 'redux-form';
 import { WithDialogProps } from 'store/dialog/with-dialog';
-import { CollectionCreateFormDialogData } from 'store/collections/collection-create-actions';
+import { CollectionCreateFormDialogData, COLLECTION_CREATE_FORM_NAME } from 'store/collections/collection-create-actions';
 import { FormDialog } from 'components/form-dialog/form-dialog';
 import {
     CollectionNameField,
@@ -14,9 +14,9 @@ import {
 } from 'views-components/form-fields/collection-form-fields';
 import { FileUploaderField } from '../file-uploader/file-uploader';
 import { ResourceParentField } from '../form-fields/resource-form-fields';
-import { CreateCollectionPropertiesList } from 'views-components/collection-properties/create-collection-properties-list';
 import { CreateCollectionPropertiesForm } from 'views-components/collection-properties/create-collection-properties-form';
 import { FormGroup, FormLabel } from '@material-ui/core';
+import { resourcePropertiesList } from 'views-components/resource-properties/resource-properties-list';
 
 type DialogCollectionProps = WithDialogProps<{}> & InjectedFormProps<CollectionCreateFormDialogData>;
 
@@ -28,6 +28,8 @@ export const DialogCollectionCreate = (props: DialogCollectionProps) =>
         {...props}
     />;
 
+const CreateCollectionPropertiesList = resourcePropertiesList(COLLECTION_CREATE_FORM_NAME);
+
 const CollectionAddFields = () => <span>
     <ResourceParentField />
     <CollectionNameField />
diff --git a/src/views-components/dialog-create/dialog-project-create.tsx b/src/views-components/dialog-create/dialog-project-create.tsx
index 81e9485c..34860599 100644
--- a/src/views-components/dialog-create/dialog-project-create.tsx
+++ b/src/views-components/dialog-create/dialog-project-create.tsx
@@ -5,13 +5,13 @@
 import React from 'react';
 import { InjectedFormProps } from 'redux-form';
 import { WithDialogProps } from 'store/dialog/with-dialog';
-import { ProjectCreateFormDialogData } from 'store/projects/project-create-actions';
+import { ProjectCreateFormDialogData, PROJECT_CREATE_FORM_NAME } from 'store/projects/project-create-actions';
 import { FormDialog } from 'components/form-dialog/form-dialog';
 import { ProjectNameField, ProjectDescriptionField } from 'views-components/form-fields/project-form-fields';
 import { CreateProjectPropertiesForm } from 'views-components/project-properties/create-project-properties-form';
-import { CreateProjectPropertiesList } from 'views-components/project-properties/create-project-properties-list';
 import { ResourceParentField } from '../form-fields/resource-form-fields';
 import { FormGroup, FormLabel } from '@material-ui/core';
+import { resourcePropertiesList } from 'views-components/resource-properties/resource-properties-list';
 
 type DialogProjectProps = WithDialogProps<{}> & InjectedFormProps<ProjectCreateFormDialogData>;
 
@@ -23,6 +23,8 @@ export const DialogProjectCreate = (props: DialogProjectProps) =>
         {...props}
     />;
 
+const CreateProjectPropertiesList = resourcePropertiesList(PROJECT_CREATE_FORM_NAME);
+
 const ProjectAddFields = () => <span>
     <ResourceParentField />
     <ProjectNameField />
diff --git a/src/views-components/dialog-update/dialog-collection-update.tsx b/src/views-components/dialog-update/dialog-collection-update.tsx
index 5bdaa4f4..852dab1a 100644
--- a/src/views-components/dialog-update/dialog-collection-update.tsx
+++ b/src/views-components/dialog-update/dialog-collection-update.tsx
@@ -5,7 +5,7 @@
 import React from 'react';
 import { InjectedFormProps } from 'redux-form';
 import { WithDialogProps } from 'store/dialog/with-dialog';
-import { CollectionUpdateFormDialogData } from 'store/collections/collection-update-actions';
+import { CollectionUpdateFormDialogData, COLLECTION_UPDATE_FORM_NAME } from 'store/collections/collection-update-actions';
 import { FormDialog } from 'components/form-dialog/form-dialog';
 import {
     CollectionNameField,
@@ -13,8 +13,8 @@ import {
     CollectionStorageClassesField
 } from 'views-components/form-fields/collection-form-fields';
 import { UpdateCollectionPropertiesForm } from 'views-components/collection-properties/update-collection-properties-form';
-import { UpdateCollectionPropertiesList } from 'views-components/collection-properties/update-collection-properties-list';
 import { FormGroup, FormLabel } from '@material-ui/core';
+import { resourcePropertiesList } from 'views-components/resource-properties/resource-properties-list';
 
 type DialogCollectionProps = WithDialogProps<{}> & InjectedFormProps<CollectionUpdateFormDialogData>;
 
@@ -26,6 +26,8 @@ export const DialogCollectionUpdate = (props: DialogCollectionProps) =>
         {...props}
     />;
 
+const UpdateCollectionPropertiesList = resourcePropertiesList(COLLECTION_UPDATE_FORM_NAME);
+
 const CollectionEditFields = () => <span>
     <CollectionNameField />
     <CollectionDescriptionField />
diff --git a/src/views-components/dialog-update/dialog-project-update.tsx b/src/views-components/dialog-update/dialog-project-update.tsx
index 96e6d927..9737858a 100644
--- a/src/views-components/dialog-update/dialog-project-update.tsx
+++ b/src/views-components/dialog-update/dialog-project-update.tsx
@@ -5,13 +5,13 @@
 import React from 'react';
 import { InjectedFormProps } from 'redux-form';
 import { WithDialogProps } from 'store/dialog/with-dialog';
-import { ProjectUpdateFormDialogData } from 'store/projects/project-update-actions';
+import { ProjectUpdateFormDialogData, PROJECT_UPDATE_FORM_NAME } from 'store/projects/project-update-actions';
 import { FormDialog } from 'components/form-dialog/form-dialog';
 import { ProjectNameField, ProjectDescriptionField, UsersField } from 'views-components/form-fields/project-form-fields';
 import { GroupClass } from 'models/group';
 import { FormGroup, FormLabel } from '@material-ui/core';
 import { UpdateProjectPropertiesForm } from 'views-components/project-properties/update-project-properties-form';
-import { UpdateProjectPropertiesList } from 'views-components/project-properties/update-project-properties-list';
+import { resourcePropertiesList } from 'views-components/resource-properties/resource-properties-list';
 
 type DialogProjectProps = WithDialogProps<{sourcePanel: GroupClass, create?: boolean}> & InjectedFormProps<ProjectUpdateFormDialogData>;
 
@@ -34,6 +34,8 @@ export const DialogProjectUpdate = (props: DialogProjectProps) => {
     />;
 };
 
+const UpdateProjectPropertiesList = resourcePropertiesList(PROJECT_UPDATE_FORM_NAME);
+
 // Also used as "Group Edit Fields"
 const ProjectEditFields = () => <span>
     <ProjectNameField />
diff --git a/src/views-components/project-properties/update-project-properties-list.tsx b/src/views-components/project-properties/update-project-properties-list.tsx
deleted file mode 100644
index 5ac22b92..00000000
--- a/src/views-components/project-properties/update-project-properties-list.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import {
-    withStyles,
-    StyleRulesCallback,
-    WithStyles,
-} from '@material-ui/core';
-import { RootState } from 'store/store';
-import {
-    PROJECT_UPDATE_FORM_SELECTOR,
-    PROJECT_UPDATE_FORM_NAME,
-} from 'store/projects/project-update-actions';
-import { ArvadosTheme } from 'common/custom-theme';
-import { getPropertyChip } from '../resource-properties-form/property-chip';
-import { ProjectProperties } from 'store/projects/project-create-actions';
-import { removePropertyFromResourceForm } from 'store/resources/resources-actions';
-
-type CssRules = 'tag';
-
-const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    tag: {
-        marginRight: theme.spacing.unit,
-        marginBottom: theme.spacing.unit
-    }
-});
-
-interface UpdateProjectPropertiesListDataProps {
-    properties: ProjectProperties;
-}
-
-interface UpdateProjectPropertiesListActionProps {
-    handleDelete: (key: string, value: string) => void;
-}
-
-const mapStateToProps = (state: RootState): UpdateProjectPropertiesListDataProps => {
-    const properties = PROJECT_UPDATE_FORM_SELECTOR(state, 'properties');
-    return { properties };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch): UpdateProjectPropertiesListActionProps => ({
-    handleDelete: (key: string, value: string) => dispatch<any>(removePropertyFromResourceForm(key, value, PROJECT_UPDATE_FORM_NAME))
-});
-
-type UpdateProjectPropertiesListProps = UpdateProjectPropertiesListDataProps &
-    UpdateProjectPropertiesListActionProps & WithStyles<CssRules>;
-
-const List = withStyles(styles)(
-    ({ classes, handleDelete, properties }: UpdateProjectPropertiesListProps) =>
-        <div>
-            {properties &&
-                Object.keys(properties).map(k =>
-                    Array.isArray(properties[k])
-                    ? (properties[k] as string[]).map((v: string) =>
-                        getPropertyChip(
-                            k, v,
-                            () => handleDelete(k, v),
-                            classes.tag))
-                    : getPropertyChip(
-                        k, (properties[k] as string),
-                        () => handleDelete(k, (properties[k] as string)),
-                        classes.tag))
-                }
-        </div>
-);
-
-export const UpdateProjectPropertiesList = connect(mapStateToProps, mapDispatchToProps)(List);
\ No newline at end of file
diff --git a/src/views-components/project-properties/create-project-properties-list.tsx b/src/views-components/resource-properties/resource-properties-list.tsx
similarity index 58%
rename from src/views-components/project-properties/create-project-properties-list.tsx
rename to src/views-components/resource-properties/resource-properties-list.tsx
index ac7dc6fd..a7b58252 100644
--- a/src/views-components/project-properties/create-project-properties-list.tsx
+++ b/src/views-components/resource-properties/resource-properties-list.tsx
@@ -11,14 +11,10 @@ import {
     WithStyles,
 } from '@material-ui/core';
 import { RootState } from 'store/store';
-import {
-    PROJECT_CREATE_FORM_SELECTOR,
-    ProjectProperties,
-    PROJECT_CREATE_FORM_NAME
-} from 'store/projects/project-create-actions';
 import { ArvadosTheme } from 'common/custom-theme';
 import { getPropertyChip } from '../resource-properties-form/property-chip';
 import { removePropertyFromResourceForm } from 'store/resources/resources-actions';
+import { formValueSelector } from 'redux-form';
 
 type CssRules = 'tag';
 
@@ -29,28 +25,19 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     }
 });
 
-interface CreateProjectPropertiesListDataProps {
-    properties: ProjectProperties;
+interface ResourcePropertiesListDataProps {
+    properties: {[key: string]: string | string[]};
 }
 
-interface CreateProjectPropertiesListActionProps {
+interface ResourcePropertiesListActionProps {
     handleDelete: (key: string, value: string) => void;
 }
 
-const mapStateToProps = (state: RootState): CreateProjectPropertiesListDataProps => {
-    const properties = PROJECT_CREATE_FORM_SELECTOR(state, 'properties');
-    return { properties };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch): CreateProjectPropertiesListActionProps => ({
-    handleDelete: (key: string, value: string) => dispatch<any>(removePropertyFromResourceForm(key, value, PROJECT_CREATE_FORM_NAME))
-});
-
-type CreateProjectPropertiesListProps = CreateProjectPropertiesListDataProps &
-    CreateProjectPropertiesListActionProps & WithStyles<CssRules>;
+type ResourcePropertiesListProps = ResourcePropertiesListDataProps &
+ResourcePropertiesListActionProps & WithStyles<CssRules>;
 
 const List = withStyles(styles)(
-    ({ classes, handleDelete, properties }: CreateProjectPropertiesListProps) =>
+    ({ classes, handleDelete, properties }: ResourcePropertiesListProps) =>
         <div>
             {properties &&
                 Object.keys(properties).map(k =>
@@ -68,4 +55,12 @@ const List = withStyles(styles)(
         </div>
 );
 
-export const CreateProjectPropertiesList = connect(mapStateToProps, mapDispatchToProps)(List);
\ No newline at end of file
+export const resourcePropertiesList = (formName: string) =>
+    connect(
+        (state: RootState): ResourcePropertiesListDataProps => ({
+            properties: formValueSelector(formName)(state, 'properties')
+        }),
+        (dispatch: Dispatch): ResourcePropertiesListActionProps => ({
+                handleDelete: (key: string, value: string) => dispatch<any>(removePropertyFromResourceForm(key, value, formName))
+        })
+    )(List);
\ No newline at end of file