From 697193d3d6b755830ef840c10acbe717289de7a8 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 7 Sep 2022 16:17:11 -0400
Subject: [PATCH] Extends LabelSelect to have a custom chip render.  This
 allows us to disable labels that cannot be removed on job launch

---
 .../src/components/LabelSelect/LabelSelect.js | 38 +++++++++++++++++--
 .../components/LaunchButton/LaunchButton.js   |  7 +++-
 .../MultiSelect/useSyncedSelectValue.js       | 10 ++++-
 3 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/awx/ui/src/components/LabelSelect/LabelSelect.js b/awx/ui/src/components/LabelSelect/LabelSelect.js
index f7c93ffccd..ccb5836407 100644
--- a/awx/ui/src/components/LabelSelect/LabelSelect.js
+++ b/awx/ui/src/components/LabelSelect/LabelSelect.js
@@ -1,6 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { func, arrayOf, number, shape, string, oneOfType } from 'prop-types';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import {
+  Chip,
+  ChipGroup,
+  Select,
+  SelectOption,
+  SelectVariant,
+} from '@patternfly/react-core';
 import { t } from '@lingui/macro';
 import { LabelsAPI } from 'api';
 import useIsMounted from 'hooks/useIsMounted';
@@ -60,7 +66,12 @@ function LabelSelect({ value, placeholder, onChange, onError, createText }) {
 
   const renderOptions = (opts) =>
     opts.map((option) => (
-      <SelectOption key={option.id} aria-label={option.name} value={option}>
+      <SelectOption
+        key={option.id}
+        aria-label={option.name}
+        value={option}
+        isDisabled={option.isReadOnly}
+      >
         {option.name}
       </SelectOption>
     ));
@@ -73,6 +84,26 @@ function LabelSelect({ value, placeholder, onChange, onError, createText }) {
     }
     return null;
   };
+
+  const chipGroupComponent = () => (
+    <ChipGroup>
+      {(selections || []).map((currentChip) => (
+        <Chip
+          isReadOnly={currentChip.isReadOnly}
+          key={currentChip.name}
+          onClick={(e, item) => {
+            if (typeof item === 'string') {
+              item = { id: item, name: item };
+            }
+            onSelect(e, item);
+          }}
+        >
+          {currentChip.name}
+        </Chip>
+      ))}
+    </ChipGroup>
+  );
+
   return (
     <Select
       variant={SelectVariant.typeaheadMulti}
@@ -83,7 +114,7 @@ function LabelSelect({ value, placeholder, onChange, onError, createText }) {
         }
         onSelect(e, item);
       }}
-      onClear={() => onChange([])}
+      onClear={() => onChange(selections.filter((label) => label.isReadOnly))}
       onFilter={onFilter}
       isCreatable
       onCreateOption={(label) => {
@@ -101,6 +132,7 @@ function LabelSelect({ value, placeholder, onChange, onError, createText }) {
       createText={createText}
       noResultsFoundText={t`No results found`}
       ouiaId="template-label-select"
+      chipGroupComponent={chipGroupComponent()}
     >
       {renderOptions(options)}
     </Select>
diff --git a/awx/ui/src/components/LaunchButton/LaunchButton.js b/awx/ui/src/components/LaunchButton/LaunchButton.js
index c718a5a174..5f207e3be7 100644
--- a/awx/ui/src/components/LaunchButton/LaunchButton.js
+++ b/awx/ui/src/components/LaunchButton/LaunchButton.js
@@ -75,7 +75,12 @@ function LaunchButton({ resource, children }) {
           data: { results },
         } = await readLabels;
 
-        setLabels(results);
+        const allLabels = results.map((label) => ({
+          ...label,
+          isReadOnly: true,
+        }));
+
+        setLabels(allLabels);
       }
 
       if (canLaunchWithoutPrompt(launch)) {
diff --git a/awx/ui/src/components/MultiSelect/useSyncedSelectValue.js b/awx/ui/src/components/MultiSelect/useSyncedSelectValue.js
index 4af90fbb8b..94eba4f0aa 100644
--- a/awx/ui/src/components/MultiSelect/useSyncedSelectValue.js
+++ b/awx/ui/src/components/MultiSelect/useSyncedSelectValue.js
@@ -23,7 +23,15 @@ export default function useSyncedSelectValue(value, onChange) {
         if (!match) {
           newOptions.push(item);
         }
-        return match || item;
+
+        if (match) {
+          if (item.isReadOnly) {
+            match.isReadOnly = true;
+          }
+          return match;
+        }
+
+        return item;
       });
       setSelections(syncedValue);
     }