Beta Release

.github/workflows/cd-beta.yaml

@@ -57,7 +57,7 @@ jobs:
   #           SLACK_COLOR: "#FF0000"
   #           SLACK_ICON: https://clipart.world/wp-content/uploads/2021/06/Rocket-Ship-clipart-png.png
   #           SLACK_MESSAGE: "PR merge by ${{ github.actor }} failed to deploy."
-  #           SLACK_TITLE: FAILED Beta Deployment for manager-ui
+  #           SLACK_TITLE: FAILED: Beta Deployment for manager-ui
   #           SLACK_USERNAME: Deploy Bot
   #           SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
 
@@ -73,7 +73,7 @@ jobs:
   #           SLACK_COLOR: "#FF0000"
   #           SLACK_ICON: https://clipart.world/wp-content/uploads/2021/06/Rocket-Ship-clipart-png.png
   #           SLACK_MESSAGE: "PR merge by ${{ github.actor }} has been deployed to stage."
-  #           SLACK_TITLE: Beta Deployment for manager-ui
+  #           SLACK_TITLE: BETA:manager-ui
   #           SLACK_USERNAME: Deploy Bot
   #           SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
 

.github/workflows/cd-dev.yaml

@@ -72,11 +72,11 @@ jobs:
           SLACK_COLOR: "#75BF43"
           SLACK_ICON: https://brand.zesty.io/zesty-io-logo.svg
           # SLACK_MESSAGE: "PR merge by ${{ github.actor }} has been deployed to stage."
-          SLACK_TITLE: "SUCCESS: Dev Deployment of manager-ui"
+          SLACK_TITLE: "DEV:manager-ui"
           SLACK_USERNAME: Deploy Bot
           SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
 
-  # create_stage_release:
+  # create_release:
   #   runs-on: ubuntu-latest
   #   steps:
   #     - name: Checkout Repo

.github/workflows/cd-stable.yaml

@@ -57,7 +57,7 @@ jobs:
 #           SLACK_COLOR: "#FF0000"
 #           SLACK_ICON: https://clipart.world/wp-content/uploads/2021/06/Rocket-Ship-clipart-png.png
 #           SLACK_MESSAGE: "PR merge by ${{ github.actor }} failed to deploy."
-#           SLACK_TITLE: FAILED Stable Deployment for manager-ui
+#           SLACK_TITLE: FAILED: Stable Deployment for manager-ui
 #           SLACK_USERNAME: Deploy Bot
 #           SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
 
@@ -73,6 +73,6 @@ jobs:
 #           SLACK_COLOR: "#FF0000"
 #           SLACK_ICON: https://clipart.world/wp-content/uploads/2021/06/Rocket-Ship-clipart-png.png
 #           SLACK_MESSAGE: "PR merge by ${{ github.actor }} has been deployed to stage."
-#           SLACK_TITLE: Stable Deployment for manager-ui
+#           SLACK_TITLE: STABLE:manager-ui
 #           SLACK_USERNAME: Deploy Bot
 #           SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}

.github/workflows/cd-stage.yaml

@@ -72,7 +72,7 @@ jobs:
           SLACK_COLOR: "#75BF43"
           SLACK_ICON: https://brand.zesty.io/zesty-io-logo.svg
           # SLACK_MESSAGE: "PR merge by ${{ github.actor }} has been deployed to stage."
-          SLACK_TITLE: "SUCCESS: Stage Deployment of manager-ui"
+          SLACK_TITLE: "STAGE:manager-ui"
           SLACK_USERNAME: Deploy Bot
           SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
 
@@ -103,39 +103,3 @@ jobs:
         run: gh pr create -B beta -H stage --title 'Beta Release' --body 'Created by Github action'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  # unify_dev_history:
-  # runs-on: ubuntu-latest
-  # # needs: [deploy_stage]
-  # steps:
-  #   - name: Checkout Repo
-  #     uses: actions/checkout@v4
-
-  #   - name: Check if PR exists
-  #     id: check
-  #     env:
-  #       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-  #     run: |
-  #       prs=$(gh pr list \
-  #           --repo "$GITHUB_REPOSITORY" \
-  #           --head 'stage' \
-  #           --base 'dev' \
-  #           --json title \
-  #           --jq 'length')
-  #       if ((prs > 0)); then
-  #           echo "skip=true" >> "$GITHUB_OUTPUT"
-  #       fi
-
-  #   - name: Merge Stage Release to Dev
-  #     if: "!steps.check.outputs.skip"
-  #     run: gh pr create -B dev -H stage --title 'Merge Stage:Dev' --body 'Created by Github action'
-  #     env:
-  #       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  # unify_dev_history:
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - id: create-dev-pr
-  #       run: gh pr create -B dev -H stage --title 'Merge Stage:Dev' --body 'Update dev history with stage release. PR created and merged by Github action'
-  #     - id: merge-dev-pr
-  #       run: gh pr merge --auto --squash ${{steps.create-dev-pr.}}

cypress/e2e/content/content.spec.js

@@ -188,7 +188,7 @@ describe("Content Specs", () => {
     it("Number Field", () => {
       // NOTE: the timestamp is too large for the 'small int' column in the DB
       // limit is 4294967295
-      cy.get("#12-9b96ec-tll2gn input[type=number]")
+      cy.get("#12-9b96ec-tll2gn input[type=text]")
         .focus()
         /*
           input type='number 'cannot be empty so rather than whitespace, it'd have a value of 0

package.json

@@ -85,6 +85,7 @@
     "react-flatpickr": "^3.10.7",
     "react-measure": "^2.5.2",
     "react-monaco-editor": "^0.47.0",
+    "react-number-format": "^5.3.1",
     "react-redux": "^7.2.4",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

src/apps/content-editor/src/app/components/Editor/Field/Field.tsx

@@ -52,6 +52,7 @@ import {
 import { FieldTypeDate } from "../../../../../../../shell/components/FieldTypeDate";
 import { FieldTypeDateTime } from "../../../../../../../shell/components/FieldTypeDateTime";
 import { FieldTypeSort } from "../../../../../../../shell/components/FieldTypeSort";
+import { FieldTypeNumber } from "../../../../../../../shell/components/FieldTypeNumber";
 
 import styles from "./Field.less";
 import { MemoryRouter } from "react-router";
@@ -859,16 +860,12 @@ export const Field = ({
     case "number":
       return (
         <FieldShell settings={fieldData} errors={errors}>
-          <TextField
-            size="small"
-            variant="outlined"
-            type="number"
-            fullWidth
-            value={value ? value.toString() : "0"}
+          <FieldTypeNumber
+            value={+value || 0}
             name={name}
             required={required}
-            onChange={(evt) => onChange(evt.target.value, name)}
-            error={errors && Object.values(errors)?.some((error) => !!error)}
+            onChange={onChange}
+            hasError={errors && Object.values(errors)?.some((error) => !!error)}
           />
         </FieldShell>
       );

src/apps/media/src/app/components/UploadModal.tsx

@@ -27,6 +27,7 @@ import { DnDProvider } from "./DnDProvider";
 import { UploadButton } from "./UploadButton";
 import CloseIcon from "@mui/icons-material/Close";
 import { mediaManagerApi } from "../../../../../shell/services/mediaManager";
+import pluralizeWord from "../../../../../utility/pluralizeWord";
 
 export const UploadModal: FC = () => {
   const dispatch = useDispatch();
@@ -227,7 +228,9 @@ const UploadHeaderText = ({ uploads }: UploadHeaderTextProps) => {
         {filesUploading?.length > 0
           ? filesUploading.length
           : filesUploaded.length}{" "}
-        File{filesUploading.length > 1 && "s"}{" "}
+        {filesUploading?.length > 0
+          ? pluralizeWord("File", filesUploading.length)
+          : pluralizeWord("File", filesUploaded.length)}{" "}
         {filesUploading?.length > 0 ? "Uploading" : "Uploaded"}
       </Typography>
     </Stack>

src/shell/components/FieldTypeNumber.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useRef } from "react";
+import { IconButton, Stack, TextField } from "@mui/material";
+import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
+import AddRoundedIcon from "@mui/icons-material/AddRounded";
+
+import { NumberFormatInput } from "./NumberFormatInput";
+
+type FieldTypeNumberProps = {
+  required: boolean;
+  name: string;
+  value: number;
+  onChange: (value: number, name: string) => void;
+  hasError: boolean;
+};
+export const FieldTypeNumber = ({
+  required,
+  value,
+  onChange,
+  name,
+  hasError,
+}: FieldTypeNumberProps) => {
+  const numberInputRef = useRef(null);
+
+  useEffect(() => {
+    if (value === 0) {
+      numberInputRef.current?.setSelectionRange(1, 1);
+    }
+  }, [value]);
+
+  const modifyNumberValue = (action: "increment" | "decrement") => {
+    if (value.toString().includes("e")) return;
+
+    const integerFractionalSplit = value.toString().split(".");
+
+    switch (action) {
+      case "increment":
+        integerFractionalSplit[0] = (+integerFractionalSplit[0] + 1).toString();
+        break;
+
+      case "decrement":
+        integerFractionalSplit[0] = (+integerFractionalSplit[0] - 1).toString();
+        break;
+
+      default:
+        break;
+    }
+
+    onChange(+integerFractionalSplit.join("."), name);
+  };
+
+  return (
+    <TextField
+      inputRef={numberInputRef}
+      variant="outlined"
+      fullWidth
+      value={value || 0}
+      name={name}
+      required={required}
+      onChange={(evt) => {
+        onChange(+evt.target.value?.toString()?.replace(/^0+/, "") ?? 0, name);
+      }}
+      onKeyDown={(evt) => {
+        if ((evt.key === "Backspace" || evt.key === "Delete") && value === 0) {
+          evt.preventDefault();
+        }
+      }}
+      error={hasError}
+      InputProps={{
+        endAdornment: (
+          <Stack direction="row" gap={1}>
+            <IconButton
+              size="small"
+              onClick={() => modifyNumberValue("decrement")}
+            >
+              <RemoveRoundedIcon fontSize="small" />
+            </IconButton>
+            <IconButton
+              size="small"
+              onClick={() => modifyNumberValue("increment")}
+            >
+              <AddRoundedIcon fontSize="small" />
+            </IconButton>
+          </Stack>
+        ),
+        inputComponent: NumberFormatInput as any,
+        inputProps: {
+          thousandSeparator: true,
+          valueIsNumericString: true,
+        },
+      }}
+    />
+  );
+};

src/shell/components/NumberFormatInput/index.tsx

@@ -0,0 +1,32 @@
+import { forwardRef } from "react";
+import {
+  NumericFormatProps,
+  InputAttributes,
+  NumericFormat,
+} from "react-number-format";
+
+type NumberFormatInputProps = {
+  onChange: (event: { target: { name: string; value: number } }) => void;
+  name: string;
+};
+export const NumberFormatInput = forwardRef<
+  NumericFormatProps<InputAttributes>,
+  NumberFormatInputProps
+>((props, ref) => {
+  const { onChange, ...other } = props;
+
+  return (
+    <NumericFormat
+      {...other}
+      getInputRef={ref}
+      onValueChange={(values) => {
+        onChange({
+          target: {
+            name: props.name,
+            value: values.floatValue || 0,
+          },
+        });
+      }}
+    />
+  );
+});