feat(UI-1600): reddit connection

src/assets/image/icons/connections/index.ts

@@ -41,3 +41,6 @@ export { default as MicrosoftTeamsIcon } from "@assets/image/icons/connections/M
 export { default as KubernetesIcon } from "@assets/image/icons/connections/Kubernetes.svg?react";
 // Taken from: https://icons.getbootstrap.com/icons/anthropic/
 export { default as AnthropicIcon } from "@assets/image/icons/connections/Anthropic.svg?react";
+// Taken from: https://www.iconpacks.net/free-icon/reddit-circle-logo-16620.html
+// Terms: https://www.iconpacks.net/terms/
+export { default as RedditIcon } from "@assets/image/icons/connections/Reddit.svg?react";

src/components/atoms/hint.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import { cn } from "@utilities";
+
+import { InfoIcon } from "@assets/image/icons";
+
+interface HintProps {
+	children: React.ReactNode;
+	className?: string;
+}
+
+export const Hint: React.FC<HintProps> = ({ children, className }) => {
+	return (
+		<div className={cn("mt-1 flex items-start gap-1.5 text-xs text-gray-400", className)}>
+			<InfoIcon className="mt-0.5 size-3 shrink-0" />
+			<span>{children}</span>
+		</div>
+	);
+};

src/components/atoms/index.ts

@@ -6,6 +6,7 @@ export { Checkbox } from "@components/atoms/checkbox";
 export { DropdownMenu } from "@components/atoms/dropdownMenu";
 export { ErrorMessage } from "@components/atoms/errorMessage";
 export { Frame } from "@components/atoms/frame";
+export { Hint } from "@components/atoms/hint";
 export { IconSvg } from "@components/atoms/icons";
 export { Input } from "@components/atoms/input";
 export { Link } from "@components/atoms/link";

src/components/atoms/input.tsx

@@ -4,13 +4,16 @@ import { InputVariant } from "@enums/components";
 import { InputProps } from "@interfaces/components";
 import { cn } from "@utilities";
 
+import { Hint } from "@components/atoms/hint";
+
 export const Input = forwardRef<HTMLInputElement, InputProps>(
 	(
 		{
 			classInput,
 			className,
 			defaultValue = "",
 			disabled = false,
+			hint,
 			inputLabelTextSize,
 			icon,
 			isError = false,
@@ -105,29 +108,32 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 		});
 
 		return (
-			<div className={baseClass}>
-				<input
-					{...rest}
-					autoComplete="off"
-					className={inputClass}
-					disabled={disabled}
-					id={id}
-					onBlur={handleBlur}
-					onChange={handleChange}
-					onFocus={handleFocus}
-					placeholder={placeholder}
-					ref={ref}
-					type={type}
-					value={inputValue}
-				/>
-				{label ? (
-					<label className={labelClass} htmlFor={id}>
-						<span className="relative z-10">{isRequired ? `${label} *` : label}</span>
-						<span className={borderOverlayLabelClass} />
-					</label>
-				) : null}
-				{icon}
-			</div>
+			<>
+				<div className={baseClass}>
+					<input
+						{...rest}
+						autoComplete="off"
+						className={inputClass}
+						disabled={disabled}
+						id={id}
+						onBlur={handleBlur}
+						onChange={handleChange}
+						onFocus={handleFocus}
+						placeholder={placeholder}
+						ref={ref}
+						type={type}
+						value={inputValue}
+					/>
+					{label ? (
+						<label className={labelClass} htmlFor={id}>
+							<span className="relative z-10">{isRequired ? `${label} *` : label}</span>
+							<span className={borderOverlayLabelClass} />
+						</label>
+					) : null}
+					{icon}
+				</div>
+				{hint ? <Hint>{hint}</Hint> : null}
+			</>
 		);
 	}
 );

src/components/atoms/secretInput.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef, useCallback, useEffect, useId, useState } from "reac
 import { useTranslation } from "react-i18next";
 
 import { Button } from "./buttons";
+import { Hint } from "./hint";
 import { ButtonVariant, InputVariant } from "@enums/components";
 import { SecretInputProps } from "@interfaces/components";
 import { cn } from "@utilities";
@@ -19,6 +20,7 @@ export const SecretInput = forwardRef<HTMLInputElement, SecretInputProps>((props
 		disabled,
 		handleInputChange,
 		handleLockAction,
+		hint,
 		isError,
 		isLocked = false,
 		isLockedDisabled,
@@ -142,50 +144,53 @@ export const SecretInput = forwardRef<HTMLInputElement, SecretInputProps>((props
 	};
 
 	return (
-		<div className="flex flex-row">
-			<div className={wrapperClass}>
-				<input
-					{...rest}
-					className={inputClass}
-					defaultValue={defaultValue}
-					disabled={disabled}
-					id={id}
-					onBlur={handleBlur}
-					onChange={handleChange}
-					onFocus={handleFocus}
-					placeholder={placeholder}
-					ref={ref}
-					type={inputType}
-					value={innerValue || ""}
-				/>
-
-				{labelText ? (
-					<label className={labelClass} htmlFor={id}>
-						<span className="relative z-10">{labelText}</span>
-
-						<span className={borderOverlayLabelClass} />
-					</label>
-				) : null}
-
-				{isLockedDisabled ? (
-					<Button onClick={handleLockedStateAction} type="button" variant={buttonVariant}>
-						<IconSvg className={disabledButtonClass} size="md" src={LockIcon} />
+		<>
+			<div className="flex flex-row">
+				<div className={wrapperClass}>
+					<input
+						{...rest}
+						className={inputClass}
+						defaultValue={defaultValue}
+						disabled={disabled}
+						id={id}
+						onBlur={handleBlur}
+						onChange={handleChange}
+						onFocus={handleFocus}
+						placeholder={placeholder}
+						ref={ref}
+						type={inputType}
+						value={innerValue || ""}
+					/>
+
+					{labelText ? (
+						<label className={labelClass} htmlFor={id}>
+							<span className="relative z-10">{labelText}</span>
+
+							<span className={borderOverlayLabelClass} />
+						</label>
+					) : null}
+
+					{isLockedDisabled ? (
+						<Button onClick={handleLockedStateAction} type="button" variant={buttonVariant}>
+							<IconSvg className={disabledButtonClass} size="md" src={LockIcon} />
+						</Button>
+					) : null}
+				</div>
+
+				{!isLockedDisabled ? (
+					<Button
+						className={iconClass}
+						onClick={handleLockedStateAction}
+						title={buttonTitle}
+						type="button"
+						variant={buttonVariant}
+					>
+						<IconSvg className={iconFill} size="md" src={lockedIcon} />
 					</Button>
 				) : null}
 			</div>
-
-			{!isLockedDisabled ? (
-				<Button
-					className={iconClass}
-					onClick={handleLockedStateAction}
-					title={buttonTitle}
-					type="button"
-					variant={buttonVariant}
-				>
-					<IconSvg className={iconFill} size="md" src={lockedIcon} />
-				</Button>
-			) : null}
-		</div>
+			{hint ? <Hint>{hint}</Hint> : null}
+		</>
 	);
 });
 

src/components/molecules/select/base.tsx

@@ -8,6 +8,7 @@ import { getSelectDarkStyles, getSelectLightStyles } from "@constants";
 import { SelectOption, SelectProps } from "@interfaces/components";
 import { cn } from "@utilities";
 
+import { Hint } from "@components/atoms";
 import { IconLabel } from "@components/molecules/select";
 
 interface BaseSelectProps extends SelectProps {
@@ -23,6 +24,7 @@ export const BaseSelect = forwardRef<HTMLDivElement, BaseSelectProps>(
 			dataTestid,
 			defaultValue,
 			disabled = false,
+			hint,
 			isError = false,
 			isRequired = false,
 			label,
@@ -112,30 +114,35 @@ export const BaseSelect = forwardRef<HTMLDivElement, BaseSelectProps>(
 		const defaultCreateLabel = t("creatableSelectDefaultCreateLabel");
 
 		return (
-			<div className="relative" data-testid={dataTestid} ref={ref}>
-				<SelectComponent
-					{...rest}
-					components={{ Option: iconOption, SingleValue: iconSingleValue }}
-					formatCreateLabel={(createLabelItem) => `${createLabel || defaultCreateLabel} "${createLabelItem}"`}
-					id={id}
-					isDisabled={disabled}
-					isOptionDisabled={(option: SelectOption) => !!option.disabled}
-					noOptionsMessage={noOptionsMessage}
-					onBlur={handleBlur}
-					onChange={handleChange}
-					onCreateOption={onCreateOption}
-					onFocus={handleFocus}
-					options={options}
-					placeholder={isRequired ? `${placeholder} *` : placeholder}
-					styles={selectStyles}
-					value={selectedOption || defaultValue}
-				/>
-
-				<label className={labelClass} htmlFor={id}>
-					<span className="relative z-10">{isRequired ? `${label} *` : label}</span>
-					<span className={borderOverlayLabelClass} />
-				</label>
-			</div>
+			<>
+				<div className="relative" data-testid={dataTestid} ref={ref}>
+					<SelectComponent
+						{...rest}
+						components={{ Option: iconOption, SingleValue: iconSingleValue }}
+						formatCreateLabel={(createLabelItem) =>
+							`${createLabel || defaultCreateLabel} "${createLabelItem}"`
+						}
+						id={id}
+						isDisabled={disabled}
+						isOptionDisabled={(option: SelectOption) => !!option.disabled}
+						noOptionsMessage={noOptionsMessage}
+						onBlur={handleBlur}
+						onChange={handleChange}
+						onCreateOption={onCreateOption}
+						onFocus={handleFocus}
+						options={options}
+						placeholder={isRequired ? `${placeholder} *` : placeholder}
+						styles={selectStyles}
+						value={selectedOption || defaultValue}
+					/>
+
+					<label className={labelClass} htmlFor={id}>
+						<span className="relative z-10">{isRequired ? `${label} *` : label}</span>
+						<span className={borderOverlayLabelClass} />
+					</label>
+				</div>
+				{hint ? <Hint>{hint}</Hint> : null}
+			</>
 		);
 	}
 );

src/components/organisms/connections/integrations/index.ts

@@ -66,3 +66,5 @@ export {
 	KubernetesIntegrationAddForm,
 	KubernetesIntegrationEditForm,
 } from "@components/organisms/connections/integrations/kubernetes";
+export { RedditIntegrationAddForm } from "@components/organisms/connections/integrations/reddit";
+export { RedditIntegrationEditForm } from "@components/organisms/connections/integrations/reddit";