Lock editing system name for GVL systems

CHANGELOG.md

@@ -28,6 +28,7 @@ The types of changes are:
 - Fixed incorrect Compass button behavior in system form [#4508](https://github.com/ethyca/fides/pull/4508)
 - Omit certain fields from system payload when empty  [#4508](https://github.com/ethyca/fides/pull/4525)
 - Fixed issues with Compass vendor selector behavior [#4521](https://github.com/ethyca/fides/pull/4521)
+- Fixed system name being editable when editing GVL systems [#4533](https://github.com/ethyca/fides/pull/4533)
 
 ### Changed
 - Upgrade to use Fideslang `3.0.0` and remove associated concepts [#4502](https://github.com/ethyca/fides/pull/4502)

clients/admin-ui/cypress/e2e/systems-plus.cy.ts

@@ -137,6 +137,22 @@ describe("System management with Plus features", () => {
       cy.getByTestId("input-description").should("not.be.disabled");
     });
 
+    it("locks editing fields and changing name for a GVL vendor when visiting 'edit system' page directly", () => {
+      cy.fixture("systems/systems.json").then((systems) => {
+        cy.intercept("GET", "/api/v1/system/*", {
+          body: {
+            ...systems[0],
+            vendor_id: "gvl.733",
+          },
+        }).as("getSystem");
+      });
+      cy.visit("/systems/configure/fidesctl_system");
+      cy.wait("@getSystem");
+      cy.getByTestId("locked-for-GVL-notice");
+      cy.getByTestId("input-name").should("be.disabled");
+      cy.getByTestId("input-description").should("be.disabled");
+    });
+
     it("does not lock editing for a non-GVL vendor when visiting 'edit system' page directly", () => {
       cy.fixture("systems/systems.json").then((systems) => {
         cy.intercept("GET", "/api/v1/system/*", {
@@ -149,6 +165,7 @@ describe("System management with Plus features", () => {
       cy.visit("/systems/configure/fidesctl_system");
       cy.wait("@getSystem");
       cy.getByTestId("locked-for-GVL-notice").should("not.exist");
+      cy.getByTestId("input-name").should("not.be.disabled");
     });
 
     it("allows changes to data uses for non-GVL vendors", () => {

clients/admin-ui/src/features/system/VendorSelector.tsx

@@ -138,6 +138,7 @@ const VendorSelector = ({
 
   const isTypeahead = !field.value && !values.vendor_id;
   const hasVendorSuggestions = !!searchParam && suggestions.length > 0;
+  const nameFieldLockedForGVL = lockedForGVL && !isCreate;
 
   useEffect(() => {
     validateForm();
@@ -235,7 +236,7 @@ const VendorSelector = ({
             classNamePrefix="custom-select"
             placeholder="Enter system name..."
             instanceId="select-name"
-            isDisabled={!isCreate && lockedForGVL}
+            isDisabled={nameFieldLockedForGVL}
             menuPosition="absolute"
             isSearchable
             isClearable={!!searchParam}
@@ -304,13 +305,16 @@ const VendorSelector = ({
           label="System name"
           tooltip="Enter the system name"
           variant="stacked"
+          disabled={nameFieldLockedForGVL}
           isRequired
           inputRightElement={
-            <CloseButton
-              onClick={handleClear}
-              size="sm"
-              data-testid="clear-btn"
-            />
+            !nameFieldLockedForGVL ? (
+              <CloseButton
+                onClick={handleClear}
+                size="sm"
+                data-testid="clear-btn"
+              />
+            ) : null
           }
         />
       )}