From 601ffb4fcd2adc6961d19f4677a771df61b2e6eb Mon Sep 17 00:00:00 2001
From: gillespi314 <73313222+gillespi314@users.noreply.github.com>
Date: Wed, 11 Aug 2021 15:27:52 -0500
Subject: [PATCH] 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          |  1 +
 cypress/integration/all/app/labelflow.spec.ts |  4 +--
 .../components/forms/LabelForm/LabelForm.jsx  | 25 ++++++++++++++++++-
 .../components/forms/LabelForm/_styles.scss   | 23 +++++++++++++++++
 4 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 changes/1627-fix-edit-label-platform

diff --git a/changes/1627-fix-edit-label-platform b/changes/1627-fix-edit-label-platform
new file mode 100644
index 0000000000..90f0bf6f65
--- /dev/null
+++ b/changes/1627-fix-edit-label-platform
@@ -0,0 +1 @@
+Disable select platform dropdown for edit label page
\ No newline at end of file
diff --git a/cypress/integration/all/app/labelflow.spec.ts b/cypress/integration/all/app/labelflow.spec.ts
index 4f2547cf9d..a84becdf7c 100644
--- a/cypress/integration/all/app/labelflow.spec.ts
+++ b/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();
 
diff --git a/frontend/components/forms/LabelForm/LabelForm.jsx b/frontend/components/forms/LabelForm/LabelForm.jsx
index 5c1a47a866..8f03f97b96 100644
--- a/frontend/components/forms/LabelForm/LabelForm.jsx
+++ b/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`}
diff --git a/frontend/components/forms/LabelForm/_styles.scss b/frontend/components/forms/LabelForm/_styles.scss
index 6225c0700a..8a4eb8b7bd 100644
--- a/frontend/components/forms/LabelForm/_styles.scss
+++ b/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;