From 7df1a7f32f7eb69e0e8ef8e2319e452289d2b9a4 Mon Sep 17 00:00:00 2001
From: Tomasz Konieczny <tomasz.konieczny@kubeshop.io>
Date: Tue, 19 Sep 2023 15:52:48 +0200
Subject: [PATCH 1/2] dev uri updated (#880)

---
 .github/workflows/pr_checks.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/pr_checks.yml b/.github/workflows/pr_checks.yml
index fe0b4c5b0..0e5cee23e 100644
--- a/.github/workflows/pr_checks.yml
+++ b/.github/workflows/pr_checks.yml
@@ -28,13 +28,13 @@ jobs:
       uses: kubeshop/testkube-run-action@v1
       with:
         # Instance
-        url: https://dev.testkube.io/results/v1
+        url: https://demo.testkube.dev/results/v1
         # Options
         test: dashboard-e2e-tests
         ref: ${{ github.head_ref }}
         variables: |
           BASE_URL="${{ needs.wait-for-vercel.outputs.preview-url }}"
           API_URL="testkube-api-server.testkube.svc.cluster.local:8088/v1"
-          DASHBOARD_API_URL="https://dev.testkube.io/results/v1"
+          DASHBOARD_API_URL="https://demo.testkube.dev/results/v1"
           BASIC_AUTH_USER="testkube-admin"
           BASIC_AUTH_PASS="${{ secrets.TESTKUBE_DEVELOP_NGINX_PASS }}"

From 69d176c31d9529e303f69d461f4a03c3c67028bc Mon Sep 17 00:00:00 2001
From: Dawid Rusnak <dawid@drcode.pl>
Date: Tue, 19 Sep 2023 16:14:25 +0200
Subject: [PATCH 2/2] fix: handle lack of labels, avoid duplicates in the
 labels combo-box (#881)

* fix: handle decomposition of empty labels
   Resolves: kubeshop/testkube#4375
* fix: mark duplicated labels as disabled with proper tooltip
   Resolves: kubeshop/testkube#4358
---
 .../CreatableMultiSelect.styled.tsx           | 23 +++++++---
 .../CreatableMultiSelect.tsx                  |  3 ++
 .../CustomComponents/LabelsOption.tsx         | 23 +++++-----
 .../atoms/SplitLabelText/SplitLabelText.tsx   |  7 ++--
 .../molecules/LabelsSelect/LabelsSelect.tsx   | 42 ++++++++++++++-----
 .../molecules/LabelsSelect/utils.ts           |  4 +-
 6 files changed, 71 insertions(+), 31 deletions(-)

diff --git a/src/components/atoms/CreatableMultiSelect/CreatableMultiSelect.styled.tsx b/src/components/atoms/CreatableMultiSelect/CreatableMultiSelect.styled.tsx
index 762ccf91c..d53211a4b 100644
--- a/src/components/atoms/CreatableMultiSelect/CreatableMultiSelect.styled.tsx
+++ b/src/components/atoms/CreatableMultiSelect/CreatableMultiSelect.styled.tsx
@@ -6,15 +6,28 @@ import {Option} from '@models/form';
 
 import Colors from '@styles/Colors';
 
-export const StyledOption = styled.div`
+export const StyledOption = styled.div<{$disabled: boolean}>`
   padding: 6px 12px;
 
-  cursor: pointer;
   transition: background-color 0.3s ease;
 
-  &:hover {
-    background-color: ${Colors.slate700};
-  }
+  ${({$disabled}) =>
+    $disabled
+      ? `
+    cursor: not-allowed;
+    color: ${Colors.slate500};
+
+    &:hover {
+      background-color: ${Colors.slate850};
+    }
+  `
+      : `
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${Colors.slate700};
+    }
+  `}
 `;
 
 export const StyledMultiLabel = styled.div`
diff --git a/src/components/atoms/CreatableMultiSelect/CreatableMultiSelect.tsx b/src/components/atoms/CreatableMultiSelect/CreatableMultiSelect.tsx
index 7f95bfa96..221022e18 100644
--- a/src/components/atoms/CreatableMultiSelect/CreatableMultiSelect.tsx
+++ b/src/components/atoms/CreatableMultiSelect/CreatableMultiSelect.tsx
@@ -22,6 +22,7 @@ type MultiSelectProps = {
   value?: Option[];
   defaultValue?: Option[];
   onChange?: (value: readonly Option[]) => void;
+  isOptionDisabled?: (value: Option, selectValue: readonly Option[]) => boolean;
   validateCreation?: (inputValue: string) => boolean;
   CustomOptionComponent?: (props: OptionProps<Option>) => JSX.Element;
   CustomMultiValueLabelComponent?: (props: MultiValueGenericProps<Option>) => JSX.Element;
@@ -42,6 +43,7 @@ const CreatableMultiSelect: React.FC<MultiSelectProps> = props => {
     value,
     defaultValue,
     onChange,
+    isOptionDisabled,
     validateCreation,
     CustomOptionComponent = DefaultOptionComponent,
     CustomMultiValueLabelComponent = DefaultMultiValueLabel,
@@ -80,6 +82,7 @@ const CreatableMultiSelect: React.FC<MultiSelectProps> = props => {
       onChange={onChange}
       placeholder={placeholder}
       options={options}
+      isOptionDisabled={isOptionDisabled}
       createOptionPosition="first"
       onKeyDown={event => {
         onEvent(event, () => {
diff --git a/src/components/atoms/CreatableMultiSelect/CustomComponents/LabelsOption.tsx b/src/components/atoms/CreatableMultiSelect/CustomComponents/LabelsOption.tsx
index 52cfc7852..86a66143d 100644
--- a/src/components/atoms/CreatableMultiSelect/CustomComponents/LabelsOption.tsx
+++ b/src/components/atoms/CreatableMultiSelect/CustomComponents/LabelsOption.tsx
@@ -1,5 +1,7 @@
 import {OptionProps} from 'react-select';
 
+import {Tooltip} from 'antd';
+
 import {SplitLabelText} from '@atoms';
 
 import {Option} from '@models/form';
@@ -10,24 +12,25 @@ import {StyledOption} from '../CreatableMultiSelect.styled';
 
 const LabelsOption = (props: OptionProps<Option>) => {
   // @ts-ignore
-  const {children, innerRef, innerProps, value} = props;
+  const {children, innerRef, innerProps, isDisabled, value} = props;
 
   const isChildren = typeof children === 'string';
   const allowClick = labelRegex.test(value);
 
-  if (allowClick && isChildren) {
-    return (
+  const option =
+    allowClick && isChildren ? (
+      // @ts-ignore
+      <StyledOption ref={innerRef} {...innerProps} $disabled={isDisabled} data-test={`label-option-${children}`}>
+        <SplitLabelText value={children} disabled={isDisabled} />
+      </StyledOption>
+    ) : (
       // @ts-ignore
-      <StyledOption ref={innerRef} {...innerProps} data-test={`label-option-${children}`}>
-        <SplitLabelText value={children} />
+      <StyledOption ref={innerRef} $disabled={isDisabled}>
+        {children}
       </StyledOption>
     );
-  }
 
-  return (
-    // @ts-ignore
-    <StyledOption ref={innerRef}>{children}</StyledOption>
-  );
+  return isDisabled ? <Tooltip title="There may be only single value for a key selected.">{option}</Tooltip> : option;
 };
 
 export default LabelsOption;
diff --git a/src/components/atoms/SplitLabelText/SplitLabelText.tsx b/src/components/atoms/SplitLabelText/SplitLabelText.tsx
index 49db3dc7e..f9c003629 100644
--- a/src/components/atoms/SplitLabelText/SplitLabelText.tsx
+++ b/src/components/atoms/SplitLabelText/SplitLabelText.tsx
@@ -11,10 +11,11 @@ import {SplitLabelTextContainer} from './SplitLabelText.styled';
 type SplitLabelProps = {
   value: string;
   textClassName?: string;
+  disabled?: boolean;
 };
 
 const SplitLabelText: React.FC<SplitLabelProps> = props => {
-  const {value, textClassName = 'regular'} = props;
+  const {value, textClassName = 'regular', disabled = false} = props;
 
   if (!labelRegex.test(value)) {
     return (
@@ -28,10 +29,10 @@ const SplitLabelText: React.FC<SplitLabelProps> = props => {
 
   return (
     <SplitLabelTextContainer>
-      <Text color={Colors.slate400} className={textClassName}>
+      <Text color={disabled ? Colors.slate500 : Colors.slate400} className={textClassName}>
         {key}:{' '}
       </Text>
-      <Text color={Colors.slate200} className={textClassName} ellipsis>
+      <Text color={disabled ? Colors.slate500 : Colors.slate200} className={textClassName} ellipsis>
         {rest.join(':')}
       </Text>
     </SplitLabelTextContainer>
diff --git a/src/components/molecules/LabelsSelect/LabelsSelect.tsx b/src/components/molecules/LabelsSelect/LabelsSelect.tsx
index c6c94405c..7d92f0b1f 100644
--- a/src/components/molecules/LabelsSelect/LabelsSelect.tsx
+++ b/src/components/molecules/LabelsSelect/LabelsSelect.tsx
@@ -31,6 +31,9 @@ const isValidLabel = (value?: string) => {
   return value != null && labelRegex.test(value);
 };
 
+const getLabelKey = (label: string) => label.match(/^([^:]+:?)/)?.[0];
+const isLabelKey = (label: string, keyWithColon?: string) => Boolean(keyWithColon && label.startsWith(keyWithColon));
+
 const LabelsSelect: React.FC<LabelsSelectProps> = props => {
   const {
     id,
@@ -61,6 +64,32 @@ const LabelsSelect: React.FC<LabelsSelectProps> = props => {
   }, [options, data]);
 
   const change = useLastCallback((newValue: readonly Option[]) => onChange?.(newValue.map(x => x.value as string)));
+  const isOptionDisabled = useMemo(
+    () => (option: Option, selected: readonly Option[]) => {
+      const key = getLabelKey(option.label);
+      return Boolean(key) && selected.some(x => isLabelKey(`${x.value}`, key));
+    },
+    []
+  );
+  const formatCreateLabel = useMemo(
+    () => (inputString: string) => {
+      if (typeof inputString === 'string' && inputString.includes(':')) {
+        if (!isValidLabel(inputString)) {
+          return 'Incorrect label value';
+        }
+
+        const key = getLabelKey(inputString)!;
+        if (value?.some(x => x.startsWith(`${key}:`))) {
+          return `The label may have only a single value for specified key (${key}:)`;
+        }
+
+        return `Create ${inputString}`;
+      }
+
+      return 'Create: You need to add a : separator to create this label';
+    },
+    [value]
+  );
 
   return (
     <CreatableMultiSelect
@@ -68,17 +97,8 @@ const LabelsSelect: React.FC<LabelsSelectProps> = props => {
       value={formattedValue}
       onChange={change}
       placeholder={placeholder}
-      formatCreateLabel={(inputString: string) => {
-        if (typeof inputString === 'string' && inputString.includes(':')) {
-          if (!isValidLabel(inputString)) {
-            return 'Incorrect label value';
-          }
-
-          return `Create ${inputString}`;
-        }
-
-        return 'Create: You need to add a : separator to create this label';
-      }}
+      isOptionDisabled={isOptionDisabled}
+      formatCreateLabel={formatCreateLabel}
       options={formattedOptions}
       CustomOptionComponent={LabelsOption}
       CustomMultiValueLabelComponent={LabelsMultiValueLabel}
diff --git a/src/components/molecules/LabelsSelect/utils.ts b/src/components/molecules/LabelsSelect/utils.ts
index f1975b253..1846511bc 100644
--- a/src/components/molecules/LabelsSelect/utils.ts
+++ b/src/components/molecules/LabelsSelect/utils.ts
@@ -1,5 +1,5 @@
-export const decomposeLabels = (labels: readonly string[]): Record<string, string> => {
-  return labels.reduce((previousValue, currentValue: string) => {
+export const decomposeLabels = (labels?: readonly string[]): Record<string, string> => {
+  return (labels || []).reduce((previousValue, currentValue: string) => {
     if (!currentValue.includes(':')) {
       return {...previousValue, [currentValue]: ''};
     }