✨ feat(input): explcit placeholders

dashpresshq · Dec 12, 2023 · d51b382 · d51b382
1 parent 9e48cc0
commit d51b382
Show file tree

Hide file tree

Showing 15 changed files with 32 additions and 26 deletions.
diff --git a/src/__tests__/api/_test-utils/_all.ts b/src/__tests__/api/_test-utils/_all.ts
@@ -1,5 +1,6 @@
 import { ConfigDomain } from "backend/lib/config-persistence/types";
 import { KeyValueDomain } from "backend/lib/key-value/types";
+import { createCacheService } from "backend/lib/cache";
 import { setupAppConfigTestData } from "./_app-config";
 import { setupIntegrationsConstantsTestData } from "./_integrations-constants";
 import { setupCredentialsTestData } from "./_credentials";
@@ -33,6 +34,8 @@ export const setupAllTestData = async (domains: DomainTypes[]) => {
     ...portalTestData,
   ];
 
+  createCacheService().purge();
+
   await Promise.all(
     allTestData
       .filter(([domain]) => {

diff --git a/src/backend/lib/cache/RedisCacheAdaptor.ts b/src/backend/lib/cache/RedisCacheAdaptor.ts
@@ -35,7 +35,9 @@ export class RedisCacheAdaptor extends AbstractCacheService {
   }
 
   async persistData(key: string, data: unknown): Promise<void> {
-    await (await this.getRedisInstance()).set(key, JSON.stringify(data));
+    await (
+      await this.getRedisInstance()
+    ).set(key, JSON.stringify(data), { EX: 60 * 60 }); // I hour
   }
 
   async clearItem(key: string) {

diff --git a/src/backend/lib/config-persistence/AbstractConfigDataPersistenceService.ts b/src/backend/lib/config-persistence/AbstractConfigDataPersistenceService.ts
@@ -71,6 +71,7 @@ export abstract class AbstractConfigDataPersistenceService<T> {
   }
 
   public async resetState(keyField: keyof T, data: T[]) {
+    await cacheService.purge();
     await this.resetToEmpty();
     await this.saveAllItems(keyField, data);
   }

diff --git a/src/frontend/_layouts/utils.ts b/src/frontend/_layouts/utils.ts
@@ -1,8 +1,9 @@
 import { DataStateKeys } from "frontend/lib/data/types";
-import { ColorSchemes, IThemeSettings } from "shared/types/ui";
+import { AppConfigurationValueType } from "shared/configurations/constants";
+import { ColorSchemes } from "shared/types/ui";
 
 export const getThemePrimaryColor = (
   theme: ColorSchemes,
-  themeColor: DataStateKeys<IThemeSettings>
+  themeColor: DataStateKeys<AppConfigurationValueType<"theme_color">>
 ) =>
   theme === "dark" ? themeColor.data?.primaryDark : themeColor.data?.primary;
diff --git a/src/frontend/components/SchemaForm/_RenderFormInput.tsx b/src/frontend/components/SchemaForm/_RenderFormInput.tsx
@@ -45,7 +45,7 @@ export function RenderFormInput({
     label,
     required,
     disabled,
-    placeholder,
+    placeholder: placeholder || label,
     description,
     ...renderProps,
   };

diff --git a/src/frontend/design-system/components/Form/FormInput.tsx b/src/frontend/design-system/components/Form/FormInput.tsx
@@ -8,7 +8,7 @@ interface IFormInput extends ISharedFormInput {
 }
 
 export const FormInput: React.FC<IFormInput> = (formInput) => {
-  const { input, type, label, disabled, meta, ...rest } = formInput;
+  const { input, type, disabled, meta, placeholder, ...rest } = formInput;
 
   return wrapLabelAndError(
     <Input
@@ -17,7 +17,7 @@ export const FormInput: React.FC<IFormInput> = (formInput) => {
       {...generateFormArias(meta)}
       type={type}
       id={formInput.input.name}
-      placeholder={label}
+      placeholder={placeholder}
       disabled={disabled}
     />,
     formInput

diff --git a/src/frontend/design-system/components/Form/FormNumberInput.tsx b/src/frontend/design-system/components/Form/FormNumberInput.tsx
@@ -18,7 +18,7 @@ const getNumberValue = (value: string | number | null, required: boolean) => {
 };
 
 export const FormNumberInput: React.FC<IFormNumberInput> = (formInput) => {
-  const { input, label, disabled, meta, allowNegative, required, sm } =
+  const { input, placeholder, disabled, meta, allowNegative, required, sm } =
     formInput;
   if (typeof input.value === "string") {
     input.onChange(getNumberValue(input.value, !!required));
@@ -35,7 +35,7 @@ export const FormNumberInput: React.FC<IFormNumberInput> = (formInput) => {
       onChange={(e) => {
         input.onChange(getNumberValue(e.target.value, !!required));
       }}
-      placeholder={label}
+      placeholder={placeholder}
       type="number"
       disabled={disabled}
     />,

diff --git a/src/frontend/design-system/components/Form/FormRichTextArea/index.tsx b/src/frontend/design-system/components/Form/FormRichTextArea/index.tsx
@@ -83,10 +83,6 @@ const Root = styled.div`
   }
 `;
 
-interface IFormRichText extends ISharedFormInput {
-  nothingForNow?: string;
-}
-
 const modules = {
   toolbar: [
     [{ size: [] }, { font: [] }],
@@ -105,11 +101,12 @@ const modules = {
   },
 };
 
-export const FormRichTextArea: React.FC<IFormRichText> = (formInput) => {
+export const FormRichTextArea: React.FC<ISharedFormInput> = (formInput) => {
   const {
     input: { onFocus, onBlur, ...inputProps },
     disabled,
     meta,
+    placeholder,
   } = formInput;
   noop(onBlur, onFocus);
   return wrapLabelAndError(
@@ -120,7 +117,7 @@ export const FormRichTextArea: React.FC<IFormRichText> = (formInput) => {
         readOnly={disabled}
         modules={modules}
         id={formInput.input.name}
-        placeholder="Write something..."
+        placeholder={placeholder}
         theme="snow"
       />
     </Root>,

diff --git a/src/frontend/design-system/components/Form/FormSelect/Async/index.tsx b/src/frontend/design-system/components/Form/FormSelect/Async/index.tsx
@@ -54,6 +54,7 @@ export function AsyncFormSelect(props: IProps) {
     label: formLabel,
     disabledOptions = [],
     nullable,
+    placeholder,
     defaultLabel,
   } = props;
 
@@ -108,6 +109,7 @@ export function AsyncFormSelect(props: IProps) {
         classNamePrefix={SharedSelectProps.classNamePrefix}
         isDisabled={disabled}
         isLoading={isLoading}
+        placeholder={placeholder}
         className={generateClassNames(meta)}
         value={{ value: input.value, label: valueLabelToUse.value }}
         loadOptions={(inputValue) =>

diff --git a/src/frontend/design-system/components/Form/FormSelect/index.tsx b/src/frontend/design-system/components/Form/FormSelect/index.tsx
@@ -59,6 +59,7 @@ export const FormSelect: React.FC<IFormSelect> = (props) => {
     disabledOptions,
     nullable,
     defaultLabel,
+    placeholder,
   } = props;
   const selectDataWithDefault = [
     {
@@ -78,6 +79,7 @@ export const FormSelect: React.FC<IFormSelect> = (props) => {
           label: "",
         }
       }
+      placeholder={placeholder}
       inputId={input.name}
       onChange={({ value }: any) => {
         input.onChange(nullable && !value ? null : value);

diff --git a/src/frontend/design-system/components/Form/FormTextArea.tsx b/src/frontend/design-system/components/Form/FormTextArea.tsx
@@ -15,7 +15,7 @@ interface IFormTextArea extends ISharedFormInput {
 }
 
 export const FormTextArea: React.FC<IFormTextArea> = (formInput) => {
-  const { input, rows = 3, label, disabled, meta } = formInput;
+  const { input, rows = 3, placeholder, disabled, meta } = formInput;
   return wrapLabelAndError(
     <TextArea
       {...generateFormArias(meta)}
@@ -27,7 +27,7 @@ export const FormTextArea: React.FC<IFormTextArea> = (formInput) => {
       onFocus={input.onFocus}
       onBlur={input.onBlur}
       rows={rows}
-      placeholder={label}
+      placeholder={placeholder}
       disabled={disabled}
     >
       {input.value}

diff --git a/src/frontend/design-system/components/Tooltip/index.tsx b/src/frontend/design-system/components/Tooltip/index.tsx
@@ -17,7 +17,7 @@ export function Tooltip({ children, text, place = "right", offset }: IProps) {
   return (
     <>
       <span id={id}> {children} </span>
-      <BaseTooltip anchorId={id} content={text} place={place} offset={offset} />
+      <BaseTooltip anchorId={id} html={text} place={place} offset={offset} />
     </>
   );
 }
diff --git a/src/frontend/views/settings/Theme/Form.tsx b/src/frontend/views/settings/Theme/Form.tsx
@@ -2,9 +2,12 @@ import { IFormProps } from "frontend/lib/form/types";
 import { SchemaForm } from "frontend/components/SchemaForm";
 import { MAKE_APP_CONFIGURATION_CRUD_CONFIG } from "frontend/hooks/configuration/configuration.constant";
 import { UPDATE_USER_PREFERENCES_FORM_SCHEMA } from "frontend/views/account/Preferences/constants";
-import { ColorSchemes, IThemeSettings } from "shared/types/ui";
+import { ColorSchemes } from "shared/types/ui";
+import { AppConfigurationValueType } from "shared/configurations/constants";
 
-type Settings = IThemeSettings & { theme: ColorSchemes };
+type Settings = AppConfigurationValueType<"theme_color"> & {
+  theme: ColorSchemes;
+};
 
 const CRUD_CONFIG = MAKE_APP_CONFIGURATION_CRUD_CONFIG("theme_color");
 

diff --git a/src/shared/configurations/constants.ts b/src/shared/configurations/constants.ts
@@ -1,6 +1,6 @@
 import { IFileUploadSettings } from "shared/types/file";
 import { IFieldValidationItem } from "shared/validations/types";
-import { IColorableSelection, IThemeSettings } from "shared/types/ui";
+import { IColorableSelection } from "shared/types/ui";
 import { FIELD_TYPES_CONFIG_MAP } from "shared/validations";
 import { ITableTab } from "shared/types/data";
 import { BaseAppConfigurationKeys } from "./base-types";
@@ -156,7 +156,7 @@ export const APP_CONFIGURATION_CONFIG = {
     defaultValue: {
       primary: "#4b38b3",
       primaryDark: "#8c68cd",
-    } as IThemeSettings,
+    },
   },
   site_settings: {
     label: "Site Settings",

diff --git a/src/shared/types/ui.ts b/src/shared/types/ui.ts
@@ -13,11 +13,6 @@ export const FOR_CODE_COV = 1;
 
 export type ColorSchemes = "light" | "dark";
 
-export type IThemeSettings = {
-  primary: string;
-  primaryDark: string;
-};
-
 export type GridSpanSizes = "1" | "2" | "3" | "4";
 
 export type GridHeightSizes = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8";