Editable Action Label (#895)

* #513: Added Customizable Icons for Ratings Field

* #513: Customizable Rating Icons Side Drawer

Also updated formatting of custom rating icons to match default star sz

* #513: Rating customization preview uses MUIRatings

* #513: Using star icon outline for visibility

* Added customization for action name/label

* Update src/components/fields/Rating/Settings.tsx

src/components/fields/Action/Settings.tsx

@@ -559,6 +559,32 @@ const Settings = ({ config, onChange, fieldName }: ISettingsProps) => {
           title: "Customization",
           content: (
             <>
+            <Stack>
+            <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={config.customName?.enabled}
+                    onChange={(e) =>
+                      onChange("customName.enabled")(e.target.checked)
+                    }
+                    name="customName.enabled"
+                  />
+                }
+                label="Customize label for action"
+                style={{ marginLeft: -11 }}
+              />
+              {config.customName?.enabled && (
+                <TextField
+                id="customName.actionName"
+                value={get(config, "customName.actionName")}
+                onChange={(e) =>
+                  onChange("customName.actionName")(e.target.value)
+                }
+                label="Action name:"
+                        className="labelHorizontal"
+                        inputProps={{ style: { width: "10ch" } }}
+                ></TextField>
+              )}
               <FormControlLabel
                 control={
                   <Checkbox
@@ -572,7 +598,7 @@ const Settings = ({ config, onChange, fieldName }: ISettingsProps) => {
                 label="Customize button icons with emoji"
                 style={{ marginLeft: -11 }}
               />
-
+              </Stack>
               {config.customIcons?.enabled && (
                 <Grid container spacing={2} sx={{ mt: { xs: 0, sm: -1 } }}>
                   <Grid item xs={12} sm={true}>

src/components/fields/Action/SideDrawerField.tsx

@@ -10,6 +10,7 @@ import ActionFab from "./ActionFab";
 import { tableScope, tableRowsAtom } from "@src/atoms/tableScope";
 import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
 import { sanitiseCallableName, isUrl } from "./utils";
+import { getActionName } from "./TableCell"
 
 export default function Action({
   column,
@@ -60,7 +61,7 @@ export default function Action({
         ) : hasRan ? (
           value.status
         ) : (
-          sanitiseCallableName(column.key)
+          sanitiseCallableName(getActionName(column))
         )}
       </Box>
 

src/components/fields/Action/TableCell.tsx

@@ -4,6 +4,14 @@ import { Stack } from "@mui/material";
 
 import ActionFab from "./ActionFab";
 import { sanitiseCallableName, isUrl } from "./utils";
+import { get } from "lodash-es";
+
+
+export const getActionName = (column: any) => {
+  const config = get(column, "config")
+  if (!get(config, "customName.enabled")) { return get(column, "name") } 
+  return get(config, "customName.actionName") || get(column, "name");
+};
 
 export default function Action({
   column,
@@ -29,7 +37,7 @@ export default function Action({
         ) : hasRan ? (
           value.status
         ) : (
-          sanitiseCallableName(column.key)
+          sanitiseCallableName(getActionName(column))
         )}
       </div>
 

src/components/fields/Rating/Settings.tsx

@@ -22,6 +22,7 @@ export default function Settings({ onChange, config }: ISettingsProps) {
             if (input > 20) { input = 20 }
             onChange("max")(input);
           }}
+          inputProps={{ min: 1, max: 20 }}
         />
       </Grid>
       <Grid item xs={6}>