Merge remote-tracking branch 'origin/main' into 18207-Workbench2-is-not-clearing...

[arvados-workbench2.git] / src / views-components / resource-properties / resource-properties-list.tsx

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 57%
rename from src/views-components/project-properties/create-project-properties-list.tsx
rename to src/views-components/resource-properties/resource-properties-list.tsx
index 8a61dcf75b7a43a11457050d859110da3f343f6e..a7b5825244abc7c2e859e676db49a32321fa2b67 100644 (file)
--- a/src/views-components/project-properties/create-project-properties-list.tsx
+++ b/src/views-components/resource-properties/resource-properties-list.tsx
@@ -11,9 +11,10 @@ import {
     WithStyles,
 } from '@material-ui/core';
 import { RootState } from 'store/store';
-import { removePropertyFromCreateProjectForm, PROJECT_CREATE_FORM_SELECTOR, ProjectProperties } 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';
 
@@ -24,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>(removePropertyFromCreateProjectForm(key, value))
-});
-
-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 =>
@@ -63,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