From 9011566734427556565b1a8ce1b55fdb23c91d3c Mon Sep 17 00:00:00 2001
From: Bogdan Hanea <bogdan.hanea@yahoo.com>
Date: Mon, 13 Nov 2023 12:31:29 +0200
Subject: [PATCH] WIP

---
 .../CreatableSingleSelect.tsx                 | 21 ++++++++++++++++---
 .../DefaultComponents/ClearIndicator.tsx      | 15 +++++++++++++
 .../ReactSelect/DefaultComponents/index.ts    |  1 +
 .../web/src/plugins/test-sources/plugin.tsx   |  2 ++
 packages/web/src/utils/sources.ts             |  8 +++----
 5 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 packages/web/src/components/atoms/ReactSelect/DefaultComponents/ClearIndicator.tsx

diff --git a/packages/web/src/components/atoms/ReactSelect/CreatableSingleSelect/CreatableSingleSelect.tsx b/packages/web/src/components/atoms/ReactSelect/CreatableSingleSelect/CreatableSingleSelect.tsx
index 02d6e7286..6a239bf75 100644
--- a/packages/web/src/components/atoms/ReactSelect/CreatableSingleSelect/CreatableSingleSelect.tsx
+++ b/packages/web/src/components/atoms/ReactSelect/CreatableSingleSelect/CreatableSingleSelect.tsx
@@ -7,7 +7,9 @@ import usePressEnter from '@hooks/usePressEnter';
 import {Option} from '@models/form';
 
 import CustomSingleValue from '../CustomComponents/SingleValue';
-import {DefaultDropdownIndicator, DefaultOptionComponent} from '../DefaultComponents';
+import {DefaultClearIndicator, DefaultOptionComponent} from '../DefaultComponents';
+import ClearIndicator from '../DefaultComponents/ClearIndicator';
+import MultiValueRemove from '../DefaultComponents/MultiValueRemove';
 import {customSingleValueStyles, customTheme} from '../ReactSelect.styled';
 
 type SingleSelectProps = {
@@ -59,13 +61,23 @@ const CreatableSingleSelect: React.FC<SingleSelectProps> = props => {
     }
   };
 
+  const selectionStyles = {
+    clearIndicator: (base: any, state: any) => ({
+      ...base,
+      cursor: 'pointer',
+      color: state.isFocused ? 'red' : 'green',
+      fontWeight: 500,
+    }),
+    // Add more custom styles here if needed
+  };
+
   return (
     <CreatableSelect
       ref={ref}
       value={value}
       defaultValue={defaultValue}
       menuPlacement={menuPlacement}
-      isClearable={false}
+      isClearable
       onChange={onChange}
       placeholder={placeholder}
       options={options}
@@ -80,11 +92,14 @@ const CreatableSingleSelect: React.FC<SingleSelectProps> = props => {
       styles={customSingleValueStyles(validation, stylePlaceholderAsValue)}
       components={{
         Option: CustomOptionComponent,
-        DropdownIndicator: DefaultDropdownIndicator,
+        // removing default dropdown indicator
+        DropdownIndicator: () => null,
+        ClearIndicator: DefaultClearIndicator,
         SingleValue: CustomSingleValue,
       }}
       data-test={dataTest}
       isDisabled={disabled}
+      noOptionsMessage={() => null}
     />
   );
 };
diff --git a/packages/web/src/components/atoms/ReactSelect/DefaultComponents/ClearIndicator.tsx b/packages/web/src/components/atoms/ReactSelect/DefaultComponents/ClearIndicator.tsx
new file mode 100644
index 000000000..9a64dcaf3
--- /dev/null
+++ b/packages/web/src/components/atoms/ReactSelect/DefaultComponents/ClearIndicator.tsx
@@ -0,0 +1,15 @@
+import {ClearIndicatorProps, components} from 'react-select';
+
+import {ReactComponent as RemoveIcon} from '@assets/closeCircle.svg';
+
+import {Option} from '@models/form';
+
+const ClearIndicator = (props: ClearIndicatorProps<Option>) => {
+  return (
+    <components.ClearIndicator {...props}>
+      <RemoveIcon width={16} height={16} />
+    </components.ClearIndicator>
+  );
+};
+
+export default ClearIndicator;
diff --git a/packages/web/src/components/atoms/ReactSelect/DefaultComponents/index.ts b/packages/web/src/components/atoms/ReactSelect/DefaultComponents/index.ts
index 732eb55aa..ed7b216d9 100644
--- a/packages/web/src/components/atoms/ReactSelect/DefaultComponents/index.ts
+++ b/packages/web/src/components/atoms/ReactSelect/DefaultComponents/index.ts
@@ -2,3 +2,4 @@ export {default as DefaultMultiValueLabel} from './MultiValueLabel';
 export {default as DefaultOptionComponent} from './Option';
 export {default as DefaultMultiValueRemove} from './MultiValueRemove';
 export {default as DefaultDropdownIndicator} from './DropdownIndicator';
+export {default as DefaultClearIndicator} from './ClearIndicator';
diff --git a/packages/web/src/plugins/test-sources/plugin.tsx b/packages/web/src/plugins/test-sources/plugin.tsx
index 3e9d4abc8..ad3104e53 100644
--- a/packages/web/src/plugins/test-sources/plugin.tsx
+++ b/packages/web/src/plugins/test-sources/plugin.tsx
@@ -12,6 +12,7 @@ import type GeneralPlugin from '@plugins/general/plugin';
 import type RtkPlugin from '@plugins/rtk/plugin';
 
 import {repositoryApi} from '@services/repository';
+import {secretsApi} from '@services/secrets';
 import {sourcesApi, useGetSourcesQuery} from '@services/sources';
 
 import {initializeSourcesStore, useSources, useSourcesField, useSourcesPick, useSourcesSync} from '@store/sources';
@@ -56,6 +57,7 @@ export default createPlugin('oss/test-sources')
 
   .init(tk => {
     tk.slots.rtkServices.add(sourcesApi);
+    tk.slots.rtkServices.add(secretsApi);
     tk.slots.rtkServices.add(repositoryApi);
 
     tk.slots.siderItems.add({path: '/sources', icon: SourcesIcon, title: 'Sources'}, {order: -20});
diff --git a/packages/web/src/utils/sources.ts b/packages/web/src/utils/sources.ts
index 7e6cfa37f..7a747fa47 100644
--- a/packages/web/src/utils/sources.ts
+++ b/packages/web/src/utils/sources.ts
@@ -104,10 +104,6 @@ export type GetSourceFormValues = {
 export const getSourceFormValues = (entityDetails: Test, testSources: SourceWithRepository[]): GetSourceFormValues => {
   const {content} = entityDetails;
 
-  if (!content?.type) {
-    return {source: ''};
-  }
-
   if (entityDetails.source) {
     const sourceDetails = testSources.find(source => source.name === entityDetails.source);
 
@@ -119,6 +115,10 @@ export const getSourceFormValues = (entityDetails: Test, testSources: SourceWith
     };
   }
 
+  if (!content?.type) {
+    return {source: ''};
+  }
+
   if (content.type === 'string') {
     return {
       source: content.type,