Change metadata UI (#6450)

* 01 change select option

* 02 fix new column autofocus

* 03 fix group by

* 04 press enter to create view

frontend/src/metadata/metadata-tree-view/index.js

@@ -140,7 +140,14 @@ const MetadataTreeView = ({ userPerm, repoID, currentPath, onNodeClick }) => {
                   onMove={onMoveView}
                 />);
             })}
-            {canAdd && (<CustomizeAddTool className="sf-metadata-add-view" callBack={openAddView} footerName={gettext('Add view')} addIconClassName="sf-metadata-add-view-icon" />)}
+            {canAdd &&
+              <CustomizeAddTool
+                className="sf-metadata-add-view"
+                callBack={openAddView}
+                footerName={gettext('Add view')}
+                addIconClassName="sf-metadata-add-view-icon"
+              />
+            }
           </div>
         </div>
       </div>

frontend/src/metadata/metadata-tree-view/name-dialog/index.js

@@ -55,8 +55,9 @@ const NameDialog = ({ value: oldName, title, onSubmit, onToggle }) => {
   const onHotKey = useCallback((event) => {
     if (event.keyCode === KeyCodes.Enter) {
       event.preventDefault();
+      submit();
     }
-  }, []);
+  }, [submit]);
 
   useEffect(() => {
     document.addEventListener('keydown', onHotKey);

frontend/src/metadata/metadata-view/components/data-process-setter/groupby-setter.jsx

@@ -22,7 +22,7 @@ const GroupbySetter = ({ columns: allColumns, groupbys: propsGroupbys, wrapperCl
     if (groupbysLength === 1) return gettext('Grouped by 1 column');
     if (groupbysLength > 1) return gettext('Grouped by xxx columns').replace('xxx', groupbysLength);
     // need to translate to Group
-    return gettext('Group_by');
+    return gettext('Group by');
   }, [groupbys]);
 
   const onSetterToggle = useCallback(() => {

frontend/src/metadata/metadata-view/components/popover/column-popover/name/index.js

@@ -26,7 +26,13 @@ const Name = forwardRef(({ readOnly, value }, ref) => {
 
   return (
     <FormGroup className={classnames('sf-metadata-column-settings-item', { 'is-invalid': error })}>
-      <Input placeholder={gettext('Column name')} value={name} onChange={onNameChange} readOnly={readOnly} />
+      <Input
+        placeholder={gettext('Column name')}
+        value={name}
+        onChange={onNameChange}
+        readOnly={readOnly}
+        autoFocus={true}
+      />
       {error && (<FormFeedback>{error}</FormFeedback>)}
     </FormGroup>
   );

frontend/src/metadata/metadata-view/components/popover/options-popover/index.js

@@ -71,11 +71,12 @@ const OptionsPopover = ({ target, column, onToggle, onSubmit }) => {
   }, [options, displayOptions, onChange]);
 
   const onAdd = useCallback(() => {
-    const newOption = generateNewOption(options, searchValue?.trim() || '');
+    const newOptionName = searchValue?.trim() || '';
+    const newOption = generateNewOption(options, newOptionName);
     const newOptions = options.slice(0);
     newOptions.push(newOption);
     onChange(newOptions);
-    setEditingOptionId(newOption.id);
+    setEditingOptionId(newOptionName ? '' : newOption.id);
   }, [searchValue, options, onChange]);
 
   const onDelete = useCallback((optionId) => {

frontend/src/metadata/metadata-view/components/popover/options-popover/option/index.js

@@ -58,6 +58,7 @@ const Option = ({
   onDelete: propsDelete, onUpdate,
   onMouseLeave, onMouseEnter: propsMouseEnter, onToggleFreeze, onOpenNameEditor, onCloseNameEditor,
 }) => {
+
   const onDelete = useCallback((event) => {
     event.nativeEvent.stopImmediatePropagation();
     propsDelete(option.id);