fix(editservicemodal): render empty modal if the service is not loaded

We accessed getLabel on the service without checking if the service is
even there. Therefore reloading the edit page caused an error.

By checking for a service and rendering an empty modal otherwise
we make sure that we don't try to render before we have the data.

Rendering the create form in these cases lead to a mutation of the data,
which in return lead to the edit form never being rendered.
Rendering null if there is no service lead to a dark flickering for the
time before the service loads. An empty modal gives a nicer UX.

Closes DCOS-21798

plugins/services/src/js/components/modals/EditServiceModal.js

@@ -5,13 +5,18 @@ import EditFrameworkConfiguration
 import CreateServiceModal
   from "#PLUGINS/services/src/js/components/modals/CreateServiceModal";
 import DCOSStore from "#SRC/js/stores/DCOSStore";
+import FullScreenModal from "#SRC/js/components/modals/FullScreenModal";
 
 class EditServiceModal extends Component {
   render() {
     const { id = "/" } = this.props.params;
     const serviceID = decodeURIComponent(id);
     const service = DCOSStore.serviceTree.findItemById(serviceID);
 
+    if (!service) {
+      return <FullScreenModal open={true} />;
+    }
+
     if (
       service.getLabels().DCOS_PACKAGE_DEFINITION != null ||
       service.getLabels().DCOS_PACKAGE_METADATA != null

plugins/services/src/js/components/modals/__tests__/EditServiceModal-test.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { shallow } from "enzyme";
+
+jest.mock("#SRC/js/stores/DCOSStore");
+
+const DCOSStore = require("#SRC/js/stores/DCOSStore");
+const EditServiceModal = require("../EditServiceModal").default;
+
+describe("EditServiceModal", function() {
+  it("renders an empty modal if no service is found", function() {
+    DCOSStore.serviceTree = {
+      findItemById() {
+        return null;
+      }
+    };
+
+    const wrapper = shallow(
+      <EditServiceModal params={{ id: "/my-non-existant-service" }} />
+    );
+    expect(wrapper.type().name).toBe("FullScreenModal");
+  });
+
+  it("renders an edit modal if the service has been created", function() {
+    DCOSStore.serviceTree = {
+      findItemById() {
+        return {
+          getLabels() {
+            return { DCOS_PACKAGE_DEFINITION: "some-value" };
+          }
+        };
+      }
+    };
+
+    const wrapper = shallow(
+      <EditServiceModal params={{ id: "/my-created-service" }} />
+    );
+    expect(wrapper.type().name).toBe("EditFrameworkConfiguration");
+  });
+
+  it("renders a create modal if the service has not been created", function() {
+    DCOSStore.serviceTree = {
+      findItemById() {
+        return {
+          getLabels() {
+            return { DCOS_PACKAGE_DEFINITION: null };
+          }
+        };
+      }
+    };
+
+    const wrapper = shallow(
+      <EditServiceModal params={{ id: "/my-new-service" }} />
+    );
+    expect(wrapper.type().name).toBe("CreateServiceModal");
+  });
+});