Disable edit label page select platform dropdown (#1635)

* Disable edit label page select platform dropdown

* Update label flow test

changes/1627-fix-edit-label-platform

@@ -0,0 +1 @@
+Disable select platform dropdown for edit label page

cypress/integration/all/app/labelflow.spec.ts

@@ -40,9 +40,9 @@ describe("Label flow", () => {
       .click()
       .type("{selectall}{backspace}Select all usernames on Mac.");
 
-    cy.findByText(/select one/i).click();
+    cy.findByText(/select one/i).should("not.exist");
 
-    cy.findAllByText(/macos/i).click();
+    cy.findByText(/label platforms are immutable/i).should("exist");
 
     cy.findByRole("button", { name: /update label/i }).click();
 

frontend/components/forms/LabelForm/LabelForm.jsx

@@ -13,6 +13,13 @@ import validate from "components/forms/LabelForm/validate";
 
 const baseClass = "label-form";
 
+const PLATFORM_STRINGS = {
+  darwin: "macOS",
+  windows: "MS Windows",
+  ubuntu: "Ubuntu Linux",
+  centos: "CentOS Linux",
+};
+
 class LabelForm extends Component {
   static propTypes = {
     baseError: PropTypes.string,
@@ -74,6 +81,8 @@ class LabelForm extends Component {
       ? "Label queries are immutable. To change the query, delete this label and create a new one."
       : "";
 
+    const { platform } = fields;
+
     if (isBuiltin) {
       return (
         <form className={`${baseClass}__wrapper`} onSubmit={handleSubmit}>
@@ -109,7 +118,7 @@ class LabelForm extends Component {
           label="Description"
           type="textarea"
         />
-        {!isManual && (
+        {!isManual && !isEdit && (
           <div className="form-field form-field--dropdown">
             <label className="form-field__label" htmlFor="platform">
               Platform
@@ -117,6 +126,20 @@ class LabelForm extends Component {
             <Dropdown {...fields.platform} options={helpers.platformOptions} />
           </div>
         )}
+        {isEdit && platform && (
+          <div className={`${baseClass}__label-platform`}>
+            <p className="title">Platform</p>
+            <p>
+              {!platform.value
+                ? "All platforms"
+                : PLATFORM_STRINGS[platform.value]}
+            </p>
+            <p className="hint">
+              Label platforms are immutable. To change the platform, delete this
+              label and create a new one.
+            </p>
+          </div>
+        )}
         <div className={`${baseClass}__button-wrap`}>
           <Button
             className={`${baseClass}__cancel-btn`}

frontend/components/forms/LabelForm/_styles.scss

@@ -4,6 +4,29 @@
     width: 100%;
   }
 
+  &__label-platform {
+    font-size: $x-small;
+    font-weight: $regular;
+    color: $core-fleet-black;
+    padding-bottom: $pad-large;
+
+    p {
+      padding-bottom: $pad-small;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .title {
+      font-weight: $bold;
+    }
+
+    .hint {
+      color: $core-fleet-blue;
+      padding-top: $pad-small;
+    }
+
+  }
+
   &__button-wrap {
     display: flex;
     justify-content: flex-end;