From 1619478250e6453c7d09e9cab693d4d33784d0be Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 15 Apr 2024 09:48:57 +0700
Subject: [PATCH] enhancement: update input component dynamic text alignment
 (#2712)

---
 core/src/types/setting/settingComponent.ts           |  1 +
 .../monitoring-extension/resources/settings.json     |  3 ++-
 uikit/src/input/index.tsx                            | 12 +++++++++---
 uikit/src/input/styles.scss                          |  3 +++
 web/containers/SliderRightPanel/index.tsx            |  1 +
 .../SettingDetailTextInputItem/index.tsx             |  3 ++-
 6 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/core/src/types/setting/settingComponent.ts b/core/src/types/setting/settingComponent.ts
index 4d9526505..e2bf667bd 100644
--- a/core/src/types/setting/settingComponent.ts
+++ b/core/src/types/setting/settingComponent.ts
@@ -20,6 +20,7 @@ export type InputComponentProps = {
   placeholder: string
   value: string
   type?: InputType
+  textAlign?: 'left' | 'right'
 }
 
 export type SliderComponentProps = {
diff --git a/extensions/monitoring-extension/resources/settings.json b/extensions/monitoring-extension/resources/settings.json
index fbdaf309a..4e1d8d9d8 100644
--- a/extensions/monitoring-extension/resources/settings.json
+++ b/extensions/monitoring-extension/resources/settings.json
@@ -15,7 +15,8 @@
     "controllerType": "input",
     "controllerProps": {
       "value": "120000",
-      "placeholder": "Interval in milliseconds. E.g. 120000"
+      "placeholder": "Interval in milliseconds. E.g. 120000",
+      "textAlign": "right"
     }
   }
 ]
diff --git a/uikit/src/input/index.tsx b/uikit/src/input/index.tsx
index 9b7808055..f6db8f0e9 100644
--- a/uikit/src/input/index.tsx
+++ b/uikit/src/input/index.tsx
@@ -2,14 +2,20 @@ import { forwardRef } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  textAlign?: 'left' | 'right'
+}
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, type, textAlign, ...props }, ref) => {
     return (
       <input
         type={type}
-        className={twMerge('input', className)}
+        className={twMerge(
+          'input',
+          className,
+          textAlign === 'right' && 'text-right'
+        )}
         ref={ref}
         {...props}
       />
diff --git a/uikit/src/input/styles.scss b/uikit/src/input/styles.scss
index e649f494d..62907cb33 100644
--- a/uikit/src/input/styles.scss
+++ b/uikit/src/input/styles.scss
@@ -3,4 +3,7 @@
   @apply disabled:text-muted-foreground disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:dark:bg-zinc-800 disabled:dark:text-zinc-600;
   @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1;
   @apply file:border-0 file:bg-transparent file:font-medium;
+  &.text-right {
+    text-align: right;
+  }
 }
diff --git a/web/containers/SliderRightPanel/index.tsx b/web/containers/SliderRightPanel/index.tsx
index 7c017e70f..424c0bf8d 100644
--- a/web/containers/SliderRightPanel/index.tsx
+++ b/web/containers/SliderRightPanel/index.tsx
@@ -80,6 +80,7 @@ const SliderRightPanel: React.FC<Props> = ({
               min={min}
               max={max}
               value={String(value)}
+              textAlign="right"
               disabled={!enabled}
               onBlur={(e) => {
                 if (Number(e.target.value) > Number(max)) {
diff --git a/web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx b/web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx
index 6a8f9cb2b..bc6f706e0 100644
--- a/web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx
+++ b/web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx
@@ -21,7 +21,7 @@ const SettingDetailTextInputItem: React.FC<Props> = ({
   settingProps,
   onValueChanged,
 }) => {
-  const { value, type, placeholder } =
+  const { value, type, placeholder, textAlign } =
     settingProps.controllerProps as InputComponentProps
 
   const description = marked.parse(settingProps.description ?? '', {
@@ -43,6 +43,7 @@ const SettingDetailTextInputItem: React.FC<Props> = ({
       <Input
         placeholder={placeholder}
         type={type}
+        textAlign={textAlign}
         value={value}
         className="ml-4 w-[360px]"
         onChange={(e) => onValueChanged?.(e.target.value)}