[GEN-1282] chore: textarea component

frontend/webapp/app/setup/styled.ts

@@ -4,4 +4,8 @@ export const SideMenuWrapper = styled.div`
   position: absolute;
   left: 24px;
   top: 144px;
+
+  @media (max-width: 1050px) {
+    display: none;
+  }
 `;

frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx

@@ -2,9 +2,12 @@ import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { SideMenu } from '@/components';
 import { useQuery } from '@apollo/client';
-import { useConnectDestinationForm, useConnectEnv } from '@/hooks';
+import { useDispatch } from 'react-redux';
+import { addConfiguredDestination } from '@/store';
+import { TestConnection } from '../test-connection';
 import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
 import { Body, Container, SideMenuWrapper } from '../styled';
+import { useConnectDestinationForm, useConnectEnv } from '@/hooks';
 import { DynamicConnectDestinationFormFields } from '../dynamic-form-fields';
 import {
   StepProps,
@@ -22,9 +25,6 @@ import {
   NotificationNote,
   SectionTitle,
 } from '@/reuseable-components';
-import { addConfiguredDestination } from '@/store';
-import { useDispatch } from 'react-redux';
-import { TestConnection } from '../test-connection';
 
 const SIDE_MENU_DATA: StepProps[] = [
   {
@@ -45,6 +45,11 @@ const FormContainer = styled.div`
   max-width: 500px;
   flex-direction: column;
   gap: 24px;
+  height: 443px;
+  overflow-y: auto;
+  padding-right: 16px;
+  box-sizing: border-box;
+  overflow: overlay;
 `;
 
 const NotificationNoteWrapper = styled.div`
@@ -60,26 +65,27 @@ export function ConnectDestinationModalBody({
   destination,
   onSubmitRef,
 }: ConnectDestinationModalBodyProps) {
-  const { data } = useQuery<DestinationDetailsResponse>(
-    GET_DESTINATION_TYPE_DETAILS,
-    {
-      variables: { type: destination?.type },
-      skip: !destination,
-    }
-  );
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const [destinationName, setDestinationName] = useState<string>('');
+  const [showConnectionError, setShowConnectionError] = useState(false);
+  const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
   const [exportedSignals, setExportedSignals] = useState<ExportedSignals>({
     logs: false,
     metrics: false,
     traces: false,
   });
-  const [showConnectionError, setShowConnectionError] = useState(false);
-  const [destinationName, setDestinationName] = useState<string>('');
-  const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
-  const [formData, setFormData] = useState<Record<string, any>>({});
-  const { buildFormDynamicFields } = useConnectDestinationForm();
-  const { connectEnv } = useConnectEnv();
 
   const dispatch = useDispatch();
+  const { connectEnv } = useConnectEnv();
+  const { buildFormDynamicFields } = useConnectDestinationForm();
+
+  const { data } = useQuery<DestinationDetailsResponse>(
+    GET_DESTINATION_TYPE_DETAILS,
+    {
+      variables: { type: destination?.type },
+      skip: !destination,
+    }
+  );
 
   const monitors = useMemo(() => {
     if (!destination) return [];

frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx

@@ -10,10 +10,12 @@ const Container = styled.div`
   align-items: flex-start;
   gap: 12px;
   align-self: stretch;
-  border-radius: 16px;
-  height: 100%;
-  max-height: 548px;
+  max-height: calc(100vh - 410px);
   overflow-y: auto;
+
+  @media (height < 800px) {
+    max-height: calc(100vh - 400px);
+  }
 `;
 
 const ListItem = styled.div<{}>`

frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { INPUT_TYPES } from '@/utils/constants/string';
-import { Dropdown, Input } from '@/reuseable-components';
+import { Dropdown, Input, TextArea } from '@/reuseable-components';
 
 export function DynamicConnectDestinationFormFields({
   fields,
@@ -35,7 +35,13 @@ export function DynamicConnectDestinationFormFields({
       case INPUT_TYPES.KEY_VALUE_PAIR:
         return <div></div>;
       case INPUT_TYPES.TEXTAREA:
-        return <div></div>;
+        return (
+          <TextArea
+            key={field.name}
+            {...field}
+            onChange={(e) => onChange(field.name, e.target.value)}
+          />
+        );
       default:
         return null;
     }

frontend/webapp/containers/main/destinations/add-destination/styled.ts

@@ -5,14 +5,17 @@ export const Body = styled.div`
   border-left: 1px solid rgba(249, 249, 249, 0.08);
   min-height: 600px;
   width: 100%;
+  min-width: 770px;
 `;
 
 export const SideMenuWrapper = styled.div`
   padding: 32px;
   width: 196px;
+  @media (max-width: 1050px) {
+    display: none;
+  }
 `;
 
 export const Container = styled.div`
   display: flex;
-  width: 1091px;
 `;

frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx

@@ -1,19 +1,17 @@
-import { Text } from '@/reuseable-components';
-import { K8sActualSource } from '@/types';
+import React from 'react';
 import Image from 'next/image';
-import React, { useState } from 'react';
 import styled from 'styled-components';
+import { K8sActualSource } from '@/types';
+import { Text } from '@/reuseable-components';
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;
-  align-self: stretch;
-  border-radius: 16px;
   background: ${({ theme }) => theme.colors.primary};
   height: 100%;
-  max-height: 548px;
+  max-height: calc(100vh - 360px);
   overflow-y: auto;
 `;
 

frontend/webapp/hooks/destinations/useConnectDestinationForm.ts

@@ -35,6 +35,7 @@ export function useConnectDestinationForm() {
             };
 
           case 'input':
+          case 'textarea':
             componentPropertiesJson = safeJsonParse<string[]>(
               componentProperties,
               []
@@ -45,15 +46,6 @@ export function useConnectDestinationForm() {
               title: displayName,
               ...componentPropertiesJson,
             };
-
-          //   case 'multi_input':
-          //   case 'textarea':
-          //     return {
-          //       name,
-          //       componentType,
-          //       title: displayName,
-          //       ...componentPropertiesJson,
-          //     };
           default:
             return undefined;
         }

frontend/webapp/reuseable-components/index.ts

@@ -14,3 +14,4 @@ export * from './tag';
 export * from './checkbox-list';
 export * from './notification-note';
 export * from './fade-loader';
+export * from './textarea';

frontend/webapp/reuseable-components/modal/index.tsx

@@ -32,6 +32,7 @@ const Overlay = styled.div`
 const ModalWrapper = styled.div`
   background: ${({ theme }) => theme.colors.translucent_bg};
   border-radius: 40px;
+  max-height: 84vh;
   border: ${({ theme }) => `1px solid ${theme.colors.border}`};
   box-shadow: 0px 1px 1px 0px rgba(17, 17, 17, 0.8),
     0px 2px 2px 0px rgba(17, 17, 17, 0.8), 0px 5px 5px 0px rgba(17, 17, 17, 0.8),

frontend/webapp/reuseable-components/textarea/index.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import Image from 'next/image';
+import { Text } from '../text';
+import { Tooltip } from '../tooltip';
+import styled, { css } from 'styled-components';
+
+interface TextAreaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  errorMessage?: string;
+  title?: string;
+  tooltip?: string;
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+`;
+
+const InputWrapper = styled.div<{
+  isDisabled?: boolean;
+  hasError?: boolean;
+  isActive?: boolean;
+}>`
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  transition: border-color 0.3s;
+  border-radius: 24px;
+  border: 1px solid rgba(249, 249, 249, 0.24);
+  ${({ isDisabled }) =>
+    isDisabled &&
+    css`
+      background-color: #555;
+      cursor: not-allowed;
+      opacity: 0.6;
+    `}
+
+  ${({ hasError }) =>
+    hasError &&
+    css`
+      border-color: red;
+    `}
+
+  ${({ isActive }) =>
+    isActive &&
+    css`
+      border-color: ${({ theme }) => theme.colors.secondary};
+    `}
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+  &:focus-within {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+`;
+
+const StyledTextArea = styled.textarea<{}>`
+  flex: 1;
+  border: none;
+  outline: none;
+  background: none;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 14px;
+  padding: 12px 20px;
+  font-family: ${({ theme }) => theme.font_family.primary};
+  font-weight: 300;
+  line-height: 22px;
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.text};
+    font-family: ${({ theme }) => theme.font_family.primary};
+    opacity: 0.4;
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 22px; /* 157.143% */
+  }
+
+  &:disabled {
+    background-color: #555;
+    cursor: not-allowed;
+  }
+`;
+
+const ErrorWrapper = styled.div`
+  position: relative;
+`;
+
+const ErrorMessage = styled(Text)`
+  color: red;
+  font-size: 12px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+`;
+
+const Title = styled(Text)`
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 22px;
+  margin-bottom: 4px;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+`;
+
+const TextArea: React.FC<TextAreaProps> = ({
+  errorMessage,
+  title,
+  tooltip,
+  ...props
+}) => {
+  return (
+    <Container>
+      {title && (
+        <Tooltip text={tooltip || ''}>
+          <HeaderWrapper>
+            <Title>{title}</Title>
+            {tooltip && (
+              <Image
+                src="/icons/common/info.svg"
+                alt=""
+                width={16}
+                height={16}
+                style={{ marginBottom: 4 }}
+              />
+            )}
+          </HeaderWrapper>
+        </Tooltip>
+      )}
+
+      <InputWrapper
+        isDisabled={props.disabled}
+        hasError={!!errorMessage}
+        isActive={!!props.autoFocus}
+      >
+        <StyledTextArea {...props} />
+      </InputWrapper>
+      {errorMessage && (
+        <ErrorWrapper>
+          <ErrorMessage>{errorMessage}</ErrorMessage>
+        </ErrorWrapper>
+      )}
+    </Container>
+  );
+};
+
+export { TextArea };

frontend/webapp/styles/theme.ts

@@ -7,7 +7,7 @@ const colors = {
   dark_grey: '#151515',
   text: '#F9F9F9',
   border: 'rgba(249, 249, 249, 0.08)',
-  translucent_bg: 'rgba(249, 249, 249, 0.04)',
+  translucent_bg: '#1A1A1A',
   majestic_blue: '#444AD9',
 };