Merge pull request #782 from complexdatacollective/fix/validation-not-saving

Fix/validation not saving

Author: jthrilly

network-canvas

@@ -40,14 +40,14 @@ const EntityType = ({
           </h2>
         </div>
         <div className="codebook__entity-meta">
-          { !inUse && <Tag>not in use</Tag> }
-          { inUse && (
-          <>
-            <em>used in:</em>
-            {' '}
-            {stages}
-          </>
-          ) }
+          {!inUse && <Tag>not in use</Tag>}
+          {inUse && (
+            <>
+              <em>used in:</em>
+              {' '}
+              {stages}
+            </>
+          )}
         </div>
         <div className="codebook__entity-control">
           <Button
@@ -65,16 +65,16 @@ const EntityType = ({
           </Button>
         </div>
       </div>
-      { variables.length > 0
+      {variables.length > 0
         && (
-        <div className="codebook__entity-variables">
-          <h3>Variables:</h3>
-          <Variables
-            variables={variables}
-            entity={entity}
-            type={type}
-          />
-        </div>
+          <div className="codebook__entity-variables">
+            <h3>Variables:</h3>
+            <Variables
+              variables={variables}
+              entity={entity}
+              type={type}
+            />
+          </div>
         )}
     </div>
   );
@@ -97,8 +97,8 @@ EntityType.propTypes = {
 EntityType.defaultProps = {
   variables: [],
   inUse: true, // Don't allow delete unless we explicitly say so
-  handleDelete: () => {},
-  handleEdit: () => {},
+  handleDelete: () => { },
+  handleEdit: () => { },
 };
 
 const mapStateToProps = (state, { entity, type }) => {
@@ -116,7 +116,7 @@ const withEntityHandlers = compose(
   }),
   withHandlers({
     handleEdit: ({ openScreen, entity, type }) => () => {
-      openScreen('type', { entity, type, metaOnly: true });
+      openScreen('type', { entity, type });
     },
     handleDelete: ({
       deleteType, openDialog, entity, type, name, inUse,

src/components/Codebook/EntityType.js

@@ -14,7 +14,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { actionCreators as codebookActions } from '@modules/protocol/codebook';
 import { required as requiredValidation, uniqueByList, allowedVariableName } from '@app/utils/validations';
 import TextInput from '@codaco/ui/lib/components/Fields/Text';
-import { makeGetVariableFromUUID, getVariablesForSubject } from '../../../../selectors/codebook';
+import { makeGetVariableWithEntity, getVariablesForSubject } from '../../../../selectors/codebook';
 import { getColorForType, getIconForType } from '../../../../config/variables';
 
 const EDIT_COMPLETE_BUTTON_ID = 'editCompleteButton';
@@ -72,7 +72,7 @@ const EditableVariablePill = ({ uuid }) => {
 
   const {
     name, type, entity, entityType,
-  } = useSelector(makeGetVariableFromUUID(uuid));
+  } = useSelector(makeGetVariableWithEntity(uuid));
 
   const [newName, setNewName] = useState(name);
 
@@ -131,7 +131,7 @@ const EditableVariablePill = ({ uuid }) => {
     <>
       <BaseVariablePill type={type} ref={ref}>
         <AnimatePresence initial={false} exitBeforeEnter>
-          { editing ? (
+          {editing ? (
             <motion.div
               key="edit"
               style={{ flex: 1 }}

src/components/Form/Fields/VariablePicker/VariablePill.js

@@ -3,7 +3,6 @@ import { get } from 'lodash';
 import StageEditorScreen from './StageEditorScreen';
 import Codebook from './CodebookScreen';
 import TypeEditorScreen from './TypeEditorScreen';
-import VariableEditorScreen from './VariableEditorScreen';
 import NewStageScreen from './NewStageScreen';
 import AssetsScreen from './AssetsScreen';
 
@@ -13,7 +12,6 @@ const SCREEN_INDEX = {
   stage: StageEditorScreen,
   codebook: Codebook,
   type: TypeEditorScreen,
-  variable: VariableEditorScreen,
   newStage: NewStageScreen,
   assets: AssetsScreen,
 };

src/components/Screens/VariableEditorScreen.js

@@ -11,7 +11,6 @@ import { getCodebook } from '@selectors/protocol';
 import ColorPicker from '../Form/Fields/ColorPicker';
 import IconOption from './IconOption';
 import getPalette from './getPalette';
-import Variables from './Variables';
 
 const ICON_OPTIONS = [
   'add-a-person',
@@ -23,8 +22,6 @@ const TypeEditor = ({
   entity,
   type,
   existingTypes,
-  isNew,
-  metaOnly,
 }) => {
   const dispatch = useDispatch();
   const getFormValue = formValueSelector(form);
@@ -43,7 +40,7 @@ const TypeEditor = ({
     <>
       <div className="stage-heading stage-heading--collapsed stage-heading--shadow">
         <Layout>
-          <h2>{ type ? `Edit ${entity}` : `Create ${entity}` }</h2>
+          <h2>{type ? `Edit ${entity}` : `Create ${entity}`}</h2>
         </Layout>
       </div>
       <Layout>
@@ -57,8 +54,8 @@ const TypeEditor = ({
             {' '}
             type. This name will be used to identify this type in the
             codebook, and in your data exports.
-            { entity === 'node' && ' Some examples might be "Person", "Place", or "Organization".' }
-            { entity === 'edge' && ' Some examples might be "Friends" or "Works With".' }
+            {entity === 'node' && ' Some examples might be "Person", "Place", or "Organization".'}
+            {entity === 'edge' && ' Some examples might be "Friends" or "Works With".'}
           </p>
           <ValidatedField
             component={Fields.Text}
@@ -88,7 +85,7 @@ const TypeEditor = ({
             validation={{ required: true }}
           />
         </Section>
-        { entity === 'node'
+        {entity === 'node'
           && (
             <Section
               title="Icon"
@@ -111,20 +108,6 @@ const TypeEditor = ({
               />
             </Section>
           )}
-        {(!isNew && !metaOnly)
-          && (
-          <Section title="Option Values">
-            <Variables
-              form={form}
-              name="variables"
-              sortableProperties={['name', 'type']}
-              initialSortOrder={{
-                direction: 'asc',
-                property: 'name',
-              }}
-            />
-          </Section>
-          )}
       </Layout>
     </>
   );
@@ -136,14 +119,10 @@ TypeEditor.propTypes = {
   form: PropTypes.string.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   existingTypes: PropTypes.array.isRequired,
-  isNew: PropTypes.bool,
-  metaOnly: PropTypes.bool,
 };
 
 TypeEditor.defaultProps = {
   type: null,
-  isNew: false,
-  metaOnly: false,
 };
 
 const mapStateToProps = (state, { type, isNew }) => {