UI bugs party (high priority tasks) (#1851)

This pull request includes significant changes to the `frontend/webapp`
directory, focusing on renaming components, updating styles, and
removing unused components. The most important changes include renaming
several files and components, updating CSS styles, and removing
deprecated components.

### Component Renaming:

*
[`frontend/webapp/containers/main/actions/action-drawer/index.tsx`](diffhunk://#diff-5f56695cd2d0ca6bcd28f372653c71d8c4dab572b08715c1f36b7acc5cf50f60R2-L11):
Renamed from `action-drawer-container/index.tsx` and updated imports and
references to reflect the new name.
[[1]](diffhunk://#diff-5f56695cd2d0ca6bcd28f372653c71d8c4dab572b08715c1f36b7acc5cf50f60R2-L11)
[[2]](diffhunk://#diff-5f56695cd2d0ca6bcd28f372653c71d8c4dab572b08715c1f36b7acc5cf50f60L39-R42)
[[3]](diffhunk://#diff-5f56695cd2d0ca6bcd28f372653c71d8c4dab572b08715c1f36b7acc5cf50f60L89-R92)
*
[`frontend/webapp/containers/main/actions/action-form-body/index.tsx`](diffhunk://#diff-13a4f6f896b629d2504615533aa1d48fe792fbadb7132f640b09c03312243ee9L5-R8):
Renamed from `choose-action-body/index.tsx` and updated imports and
references to reflect the new name.
[[1]](diffhunk://#diff-13a4f6f896b629d2504615533aa1d48fe792fbadb7132f640b09c03312243ee9L5-R8)
[[2]](diffhunk://#diff-13a4f6f896b629d2504615533aa1d48fe792fbadb7132f640b09c03312243ee9L26-R26)
[[3]](diffhunk://#diff-13a4f6f896b629d2504615533aa1d48fe792fbadb7132f640b09c03312243ee9L48-L49)

### CSS Updates:

*
[`frontend/webapp/app/globals.css`](diffhunk://#diff-0ad5feab59ca691369930750cde64b75419ddd0dbe0e567e069550de11c4b051R5-R9):
Added custom scrollbar styles to improve UI consistency.

### Component Updates:

*
[`frontend/webapp/app/(setup)/choose-destination/page.tsx`](diffhunk://#diff-a5bf9835aacf24e306780f3d34f808144b9bd35c4621caa9e84ef65f74c5110bL5-R13):
Replaced `ChooseDestinationContainer` with `AddDestinationContainer` to
reflect updated component usage.
*
[`frontend/webapp/components/common/configured-fields/index.tsx`](diffhunk://#diff-03463bf02731c500640be42702debbd088df7a64298eac7d7474f5864f0c6022L85-L87):
Added `withIcon` prop to `Tooltip` component for enhanced UI.

### Component Removal:

* Removed deprecated components and their exports in the
`frontend/webapp/components/destinations` directory, including
`add-destination-button`, `edit-destination-form`, and
`monitors-tap-list`.
[[1]](diffhunk://#diff-f7c0d745d7d9b8402a9ef58a20e357fecbbba57a4a959b506f0b4bf35cbea521L1-L33)
[[2]](diffhunk://#diff-4550d93f531d2fd35db5e6a0c5b43d366ccf81f90ce98f728b2babc2d0ab1c53L1-L35)
[[3]](diffhunk://#diff-8abd4690321df46172b1c1666c6580c02f3352e9ba818d1a58abfd856b70f86eL1-L53)
[[4]](diffhunk://#diff-a103f3e48f6bb832f2ca24b94c97f279b7d1e8a32ee3b59d6b5ac026d259e507L1-L3)
[[5]](diffhunk://#diff-9a255ecda06fb13562b464a919eb789a51ea8728251b2aa31c28babfd8f3405dL4)

These changes collectively improve the codebase by updating component
names for clarity, enhancing UI elements, and removing unused components
to streamline the project.

cli/cmd/resources/ui.go

@@ -233,6 +233,11 @@ func NewUIClusterRole() *rbacv1.ClusterRole {
 				Resources: []string{"namespaces"},
 				Verbs:     []string{"get", "list", "watch", "patch"},
 			},
+			{
+				APIGroups: []string{""},
+				Resources: []string{"services"},
+				Verbs:     []string{"list"},
+			},
 			{
 				APIGroups: []string{""},
 				Resources: []string{"configmaps"},

frontend/main.go

@@ -128,7 +128,12 @@ func httpFileServerWith404(fs http.FileSystem) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		_, err := fs.Open(r.URL.Path)
 		if err != nil {
-			// Redirect to root path
+			// If file not found, serve .html of it (example: /choose-sources -> /choose-sources.html)
+			r.URL.Path = r.URL.Path + ".html"
+		}
+		_, err = fs.Open(r.URL.Path)
+		if err != nil {
+			// If .html file not found, this route does not exist at all (404) so we should redirect to default
 			r.URL.Path = "/"
 		}
 		http.FileServer(fs).ServeHTTP(w, r)

frontend/webapp/app/(setup)/choose-destination/page.tsx

@@ -2,15 +2,15 @@
 import React from 'react';
 import { SideMenu } from '@/components';
 import { SideMenuWrapper } from '../styled';
-import { ChooseDestinationContainer } from '@/containers/main';
+import { AddDestinationContainer } from '@/containers/main';
 
 export default function ChooseDestinationPage() {
   return (
     <>
       <SideMenuWrapper>
         <SideMenu currentStep={3} />
       </SideMenuWrapper>
-      <ChooseDestinationContainer />
+      <AddDestinationContainer />
     </>
   );
 }

frontend/webapp/app/globals.css

@@ -2,3 +2,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@100;200;300;400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap');
+
+* {
+  scrollbar-color: black transparent;
+  scrollbar-width: thin;
+}

frontend/webapp/app/layout.tsx

@@ -7,11 +7,10 @@ import { ApolloWrapper } from '@/lib';
 import { ThemeProviderWrapper } from '@/styles';
 
 const LAYOUT_STYLE: React.CSSProperties = {
-  margin: 0,
   position: 'fixed',
-  scrollbarWidth: 'none',
   width: '100vw',
   height: '100vh',
+  margin: 0,
   backgroundColor: '#111111',
 };
 

frontend/webapp/components/common/configured-fields/index.tsx

@@ -82,9 +82,8 @@ export const ConfiguredFields: React.FC<ConfiguredFieldsProps> = ({ details }) =
     <ListContainer>
       {details.map((detail, index) => (
         <ListItem key={index}>
-          <Tooltip text={detail.tooltip || ''}>
+          <Tooltip text={detail.tooltip || ''} withIcon>
             <ItemTitle>{detail.title}</ItemTitle>
-            {detail.tooltip && <Image src='/icons/common/info.svg' alt='Info' width={12} height={12} style={{ marginLeft: 4 }} />}
           </Tooltip>
 
           {detail.title === 'Status' ? <Status isActive={detail.value == 'true'} withIcon withBorder withSmaller withSpecialFont /> : <ItemValue>{parseValue(detail.value)}</ItemValue>}

frontend/webapp/components/index.ts

@@ -1,7 +1,6 @@
 export * from './setup';
 export * from './overview';
 export * from './common';
-export * from './destinations';
 export * from './main';
 export * from './modals';
 export * from './notification';

frontend/webapp/containers/main/actions/action-drawer-container/index.tsx → frontend/webapp/containers/main/actions/action-drawer/index.tsx

@@ -1,14 +1,14 @@
 import React, { useMemo, useState } from 'react';
+import { ActionFormBody } from '../';
 import styled from 'styled-components';
 import { getActionIcon } from '@/utils';
 import { useDrawerStore } from '@/store';
 import { CardDetails } from '@/components';
 import type { ActionDataParsed } from '@/types';
-import { ChooseActionBody } from '../choose-action-body';
 import { useActionCRUD, useActionFormData } from '@/hooks';
 import OverviewDrawer from '../../overview/overview-drawer';
+import { ACTION_OPTIONS } from '../action-modal/action-options';
 import buildCardFromActionSpec from './build-card-from-action-spec';
-import { ACTION_OPTIONS } from '../choose-action-modal/action-options';
 
 interface Props {}
 
@@ -36,7 +36,10 @@ const ActionDrawer: React.FC<Props> = () => {
     }
 
     const { item } = selectedItem as { item: ActionDataParsed };
-    const found = ACTION_OPTIONS.find(({ type }) => type === item.type) || ACTION_OPTIONS.find(({ id }) => id === 'sampler')?.items?.find(({ type }) => type === item.type);
+    const found =
+      ACTION_OPTIONS.find(({ type }) => type === item.type) ||
+      ACTION_OPTIONS.find(({ id }) => id === 'attributes')?.items?.find(({ type }) => type === item.type) ||
+      ACTION_OPTIONS.find(({ id }) => id === 'sampler')?.items?.find(({ type }) => type === item.type);
 
     if (!found) return undefined;
 
@@ -86,7 +89,7 @@ const ActionDrawer: React.FC<Props> = () => {
     >
       {isEditing && thisAction ? (
         <FormContainer>
-          <ChooseActionBody
+          <ActionFormBody
             isUpdate
             action={thisAction}
             formData={formData}

frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx → frontend/webapp/containers/main/actions/action-form-body/custom-fields/add-cluster-info.tsx

@@ -17,15 +17,10 @@ const AddClusterInfo: React.FC<Props> = ({ value, setValue }) => {
         key: obj.attributeName,
         value: obj.attributeStringValue,
       })),
-    [value]
+    [value],
   );
 
-  const handleChange = (
-    arr: {
-      key: string;
-      value: string;
-    }[]
-  ) => {
+  const handleChange = (arr: { key: string; value: string }[]) => {
     const payload: Parsed = {
       clusterAttributes: arr.map((obj) => ({
         attributeName: obj.key,
@@ -38,7 +33,7 @@ const AddClusterInfo: React.FC<Props> = ({ value, setValue }) => {
     setValue(str);
   };
 
-  return <KeyValueInputsList title='Attributes to add' required value={mappedValue} onChange={handleChange} />;
+  return <KeyValueInputsList title='Resource Attributes' required value={mappedValue} onChange={handleChange} />;
 };
 
 export default AddClusterInfo;

frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx → frontend/webapp/containers/main/actions/action-form-body/custom-fields/error-sampler.tsx

@@ -17,11 +17,7 @@ const ErrorSampler: React.FC<Props> = ({ value, setValue }) => {
   const mappedValue = useMemo(() => safeJsonParse<Parsed>(value, { fallback_sampling_ratio: 0 }).fallback_sampling_ratio, [value]);
 
   const handleChange = (val: string) => {
-    let num = Number(val);
-
-    if (Number.isNaN(num) || num < MIN || num > MAX) {
-      num = MIN;
-    }
+    const num = Math.max(MIN, Math.min(Number(val), MAX)) || MIN;
 
     const payload: Parsed = {
       fallback_sampling_ratio: num,

frontend/webapp/containers/main/actions/choose-action-body/index.tsx → frontend/webapp/containers/main/actions/action-form-body/index.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import styled from 'styled-components';
 import { type ActionInput } from '@/types';
 import ActionCustomFields from './custom-fields';
-import { type ActionOption } from '../choose-action-modal/action-options';
+import { type ActionOption } from '../action-modal/action-options';
 import { DocsButton, Input, Text, TextArea, MonitoringCheckboxes, SectionTitle, ToggleButtons } from '@/reuseable-components';
 
-interface ChooseActionContentProps {
+interface Props {
   isUpdate?: boolean;
   action: ActionOption;
   formData: ActionInput;
@@ -23,7 +23,7 @@ const FieldTitle = styled(Text)`
   margin-bottom: 12px;
 `;
 
-const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ isUpdate, action, formData, handleFormChange }) => {
+export const ActionFormBody: React.FC<Props> = ({ isUpdate, action, formData, handleFormChange }) => {
   return (
     <Container>
       {isUpdate && (
@@ -45,5 +45,3 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ isUpdate, action
     </Container>
   );
 };
-
-export { ChooseActionBody };