#RI-3400 - sort formatters, change styling

Author: rsergeenko

redisinsight/ui/src/constants/keys.ts

@@ -170,7 +170,7 @@ export enum KeyValueFormat {
   HEX = 'HEX',
   Binary = 'Binary',
   Msgpack = 'Msgpack',
-  PHP = 'PHP Unserialize',
-  JAVA = 'Java Object',
+  PHP = 'PHP serialized',
+  JAVA = 'Java serialized',
   Protobuf = 'Protobuf'
 }

redisinsight/ui/src/pages/browser/components/key-details-header/components/Formatter/KeyValueFormatter.tsx

@@ -57,7 +57,7 @@ const KeyValueFormatter = (props: Props) => {
             </>
           </EuiToolTip>
         ),
-        dropdownDisplay: <EuiText className={styles.dropdownDisplay}>{text}</EuiText>,
+        dropdownDisplay: <EuiText size="s" className={styles.dropdownDisplay}>{text}</EuiText>,
         'data-test-subj': `format-option-${value}`,
       })
     )

redisinsight/ui/src/pages/browser/components/key-details-header/components/Formatter/constants.ts

@@ -9,14 +9,14 @@ export const KEY_VALUE_FORMATTER_OPTIONS = [
     text: 'ASCII',
     value: KeyValueFormat.ASCII,
   },
-  {
-    text: 'HEX',
-    value: KeyValueFormat.HEX,
-  },
   {
     text: 'Binary',
     value: KeyValueFormat.Binary,
   },
+  {
+    text: 'HEX',
+    value: KeyValueFormat.HEX,
+  },
   {
     text: 'JSON',
     value: KeyValueFormat.JSON,
@@ -25,16 +25,16 @@ export const KEY_VALUE_FORMATTER_OPTIONS = [
     text: 'Msgpack',
     value: KeyValueFormat.Msgpack,
   },
-  {
-    text: 'PHP Unserialize',
-    value: KeyValueFormat.PHP,
-  },
   {
     text: 'Protobuf',
     value: KeyValueFormat.Protobuf,
   },
   {
-    text: 'Java Object',
+    text: 'PHP serialized',
+    value: KeyValueFormat.PHP,
+  },
+  {
+    text: 'Java serialized',
     value: KeyValueFormat.JAVA,
   },
 ]
@@ -45,5 +45,5 @@ export const getKeyValueFormatterOptions = (viewFormat?: KeyTypes | ModulesKeyTy
   viewFormat !== KeyTypes.ReJSON
     ? [...KEY_VALUE_FORMATTER_OPTIONS]
     : [...KEY_VALUE_FORMATTER_OPTIONS].filter((option) =>
-      KEY_VALUE_JSON_FORMATTER_OPTIONS.indexOf(option.value) !== -1)
+      (KEY_VALUE_JSON_FORMATTER_OPTIONS as Array<any>).indexOf(option.value) !== -1)
 )

redisinsight/ui/src/pages/browser/components/key-details-header/components/Formatter/styles.module.scss

@@ -60,6 +60,19 @@
   }
 }
 
+.formatType {
+  margin-top: 3px;
+  margin-bottom: 3px;
+  padding: 6px !important;
+  min-height: 36px !important;
+
+  :global(.euiContextMenu__icon) {
+    height: 14px;
+    width: 14px;
+    margin-right: 6px;
+  }
+}
+
 .optionText {
   padding-left: 6px;
   padding-right: 4px;