Pull data down to UI

src/components/UserProfile/elements/EditControls.jsx

@@ -20,11 +20,11 @@ function EditControls({
             bsSize="sm"
             type="select"
             name="select"
-            value={visibility}
+            defaultValue={visibility}
             onChange={onVisibilityChange}
           >
-            <option key="Just me" value="Just me">Just me</option>
-            <option key="Everyone" value="Everyone">Everyone</option>
+            <option key="private" value="private">Just me</option>
+            <option key="all_users" value="all_users">Everyone on edX</option>
           </Input>
         </span>
       </Col>
@@ -50,13 +50,13 @@ export default EditControls;
 EditControls.propTypes = {
   onCancel: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
-  visibility: PropTypes.oneOf(['Everyone', 'Just me']),
+  visibility: PropTypes.oneOf(['private', 'all_users']),
   onVisibilityChange: PropTypes.func,
   saveState: PropTypes.oneOf([null, 'pending', 'complete', 'error']),
 };
 
 EditControls.defaultProps = {
-  visibility: null,
+  visibility: 'private',
   onVisibilityChange: null,
   saveState: null,
 };

src/components/UserProfile/elements/EditableItemHeader.jsx

@@ -32,7 +32,7 @@ EditableItemHeader.propTypes = {
   showVisibility: PropTypes.bool,
   showEditButton: PropTypes.bool,
   content: PropTypes.string,
-  visibility: PropTypes.oneOf(['Everyone', 'Just me']),
+  visibility: PropTypes.oneOf(['private', 'all_users']),
 };
 
 EditableItemHeader.defaultProps = {
@@ -40,5 +40,5 @@ EditableItemHeader.defaultProps = {
   showVisibility: false,
   showEditButton: false,
   content: '',
-  visibility: 'Everyone',
+  visibility: 'private',
 };

src/components/UserProfile/elements/Visibility.jsx

@@ -5,11 +5,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEyeSlash, faEye } from '@fortawesome/free-regular-svg-icons';
 
 function Visibility({ to }) {
-  const icon = to === 'Everyone' ? faEye : faEyeSlash;
+  const icon = to === 'private' ? faEyeSlash : faEye;
+  const label = to === 'private' ? 'Just me' : 'Everyone on edX';
 
   return (
     <span className="ml-auto small text-muted">
-      <FontAwesomeIcon icon={icon} /> {to}
+      <FontAwesomeIcon icon={icon} /> {label}
     </span>
   );
 }
@@ -17,9 +18,9 @@ function Visibility({ to }) {
 export default Visibility;
 
 Visibility.propTypes = {
-  to: PropTypes.oneOf(['Everyone', 'Just me']),
+  to: PropTypes.oneOf(['private', 'all_users']),
 };
 
 Visibility.defaultProps = {
-  to: 'Everyone',
+  to: 'private',
 };