rearrange field types

www/src/assets/icons/Percentage.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
 import { mdiPercent } from "@mdi/js";
 
-export default function Action(props: SvgIconProps) {
+export default function Percentage(props: SvgIconProps) {
   return (
     <SvgIcon viewBox="-2 -2 28 28" {...props}>
       <path d={mdiPercent} />

www/src/constants/fields.tsx

@@ -16,7 +16,6 @@ import DateTimeIcon from "@material-ui/icons/AccessTime";
 import DurationIcon from "@material-ui/icons/Timer";
 
 import UrlIcon from "@material-ui/icons/Link";
-
 import RatingIcon from "@material-ui/icons/StarBorder";
 
 import ImageIcon from "@material-ui/icons/PhotoSizeSelectActual";
@@ -25,17 +24,18 @@ import FileIcon from "@material-ui/icons/AttachFile";
 import SingleSelectIcon from "@material-ui/icons/FormatListBulleted";
 import MultiSelectIcon from "assets/icons/MultiSelect";
 
+import SubTableIcon from "assets/icons/SubTable";
 import ConnectTableIcon from "assets/icons/ConnectTable";
 import ConnectServiceIcon from "@material-ui/icons/Http";
-import SubTableIcon from "assets/icons/SubTable";
 
-import ActionIcon from "assets/icons/Action";
 import JsonIcon from "assets/icons/Json";
 import CodeIcon from "@material-ui/icons/Code";
+import RichTextIcon from "@material-ui/icons/TextFormat";
+
+import ActionIcon from "assets/icons/Action";
 import DerivativeIcon from "assets/icons/Derivative";
 import AggregateIcon from "@material-ui/icons/Layers";
 
-import RichTextIcon from "@material-ui/icons/TextFormat";
 import ColorIcon from "@material-ui/icons/Colorize";
 import SliderIcon from "assets/icons/Slider";
 import UserIcon from "@material-ui/icons/Person";
@@ -57,18 +57,18 @@ export {
   FileIcon,
   SingleSelectIcon,
   MultiSelectIcon,
-  ConnectTableIcon,
   SubTableIcon,
-  ActionIcon,
+  ConnectTableIcon,
+  ConnectServiceIcon,
   JsonIcon,
   CodeIcon,
+  RichTextIcon,
+  ActionIcon,
   DerivativeIcon,
   AggregateIcon,
-  RichTextIcon,
   ColorIcon,
   SliderIcon,
   UserIcon,
-  ConnectServiceIcon,
 };
 
 export enum FieldType {
@@ -94,17 +94,18 @@ export enum FieldType {
   singleSelect = "SINGLE_SELECT",
   multiSelect = "MULTI_SELECT",
 
+  subTable = "SUB_TABLE",
   connectTable = "DOCUMENT_SELECT",
   connectService = "SERVICE_SELECT",
-  subTable = "SUB_TABLE",
 
-  action = "ACTION",
   json = "JSON",
   code = "CODE",
+  richText = "RICH_TEXT",
+
+  action = "ACTION",
   derivative = "DERIVATIVE",
   aggregate = "AGGREGATE",
 
-  richText = "RICH_TEXT",
   color = "COLOR",
   slider = "SLIDER",
   user = "USER",
@@ -131,6 +132,7 @@ export const FIELDS = [
 
   { icon: <ImageIcon />, name: "Image", type: FieldType.image },
   { icon: <FileIcon />, name: "File", type: FieldType.file },
+
   {
     icon: <SingleSelectIcon />,
     name: "Single Select",
@@ -141,9 +143,10 @@ export const FIELDS = [
     name: "Multi Select",
     type: FieldType.multiSelect,
   },
+
   {
     icon: <SubTableIcon />,
-    name: "Sub-table",
+    name: "Sub-Table",
     type: FieldType.subTable,
   },
   {
@@ -159,12 +162,12 @@ export const FIELDS = [
 
   { icon: <JsonIcon />, name: "JSON", type: FieldType.json },
   { icon: <CodeIcon />, name: "Code", type: FieldType.code },
+  { icon: <RichTextIcon />, name: "Rich Text", type: FieldType.richText },
 
   { icon: <ActionIcon />, name: "Action", type: FieldType.action },
   { icon: <DerivativeIcon />, name: "Derivative", type: FieldType.derivative },
   { icon: <AggregateIcon />, name: "Aggregate", type: FieldType.aggregate },
 
-  { icon: <RichTextIcon />, name: "Rich Text", type: FieldType.richText },
   { icon: <ColorIcon />, name: "Color", type: FieldType.color },
   { icon: <SliderIcon />, name: "Slider", type: FieldType.slider },
   { icon: <UserIcon />, name: "User", type: FieldType.user },
@@ -190,7 +193,7 @@ export const FIELD_TYPE_DESCRIPTIONS = {
 
   [FieldType.url]: "Web address. Firetable does not validate URLs.",
   [FieldType.rating]:
-    "Rating displayed as stars from 0 to configurable number of stars(5 by default).",
+    "Rating displayed as stars from 0 to configurable number of stars. Default: 5 stars.",
 
   [FieldType.image]:
     "Image file uploaded to Firebase Storage. Supports JPEG, PNG, SVG, GIF, WebP.",
@@ -202,25 +205,26 @@ export const FIELD_TYPE_DESCRIPTIONS = {
   [FieldType.multiSelect]:
     "Dropdown selector with searchable options and check box behaviour. Optionally allows users to input custom values. Max selection: all options.",
 
+  [FieldType.subTable]:
+    "Creates a sub-table. Also displays number of rows inside the sub-table. Max sub-table levels: 100.",
   [FieldType.connectTable]:
     "Connects to an existing table to fetch a snapshot of values from a row. Requires Algolia integration.",
   [FieldType.connectService]:
     "Select a value from a list of external web service results.",
-  [FieldType.subTable]:
-    "Creates a sub-table. Also displays number of rows inside the sub-table. Max sub-table levels: 100.",
+
+  [FieldType.json]: "JSON object editable with a visual JSON editor.",
+  [FieldType.code]: "Raw code editable with Monaco Editor.",
+  [FieldType.richText]: "Rich text editor with predefined HTML text styles.",
 
   [FieldType.action]:
     "A button with a pre-defined action. Triggers a Cloud Function. 3 different states: Disabled, Enabled, Active (Clicked). Supports Undo and Redo.",
-  [FieldType.json]: "JSON object editable with a visual JSON editor.",
-  [FieldType.code]: "Raw code editable with Monaco Editor.",
   [FieldType.derivative]:
     "Value derived from the rest of the row’s values. Displayed using any other field type. Requires Cloud Function setup.",
   [FieldType.aggregate]:
-    "Value aggregated from a specified subcollection of the row. Displayed using any other field type. Requires Cloud Function setup.",
+    "Value aggregated from a specified sub-table of the row. Displayed using any other field type. Requires Cloud Function setup.",
 
-  [FieldType.richText]: "Rich text editor with predefined HTML text styles.",
   [FieldType.color]: "Visual color picker. Supports Hex, RGBA, HSLA.",
-  [FieldType.slider]: "Slider with adjustable range. Returns a numeric value. ",
+  [FieldType.slider]: "Slider with adjustable range. Returns a numeric value.",
   [FieldType.user]: "Used to display _ft_updatedBy field for editing history",
 
   [FieldType.last]: "Internally used to display last column with row actions.",