feat: support 1.13 again

This reverts commit 9d1734e in order to be
1.13-compatible. this way we can ship the previous fix more easily.

Author: pierrebeitz

plugins/services/src/js/components/modals/ServiceRootGroupModal/index.tsx

@@ -30,6 +30,7 @@ import FieldError from "#SRC/js/components/form/FieldError";
 import InfoTooltipIcon from "#SRC/js/components/form/InfoTooltipIcon";
 import Loader from "#SRC/js/components/Loader";
 import MesosStateStore from "#SRC/js/stores/MesosStateStore";
+import dcosVersion$ from "#SRC/js/stores/dcos-version";
 
 import { formatQuotaID } from "#PLUGINS/services/src/js/utils/QuotaUtil";
 import {
@@ -110,36 +111,52 @@ interface ServiceRootGroupModalState {
   error: boolean;
   isForce: boolean;
   hasValidated: boolean;
+  showQuotaOptions: boolean;
 }
 
 interface ServiceRootGroupModalProps {
   id: string;
 }
 
 class ServiceRootGroupModal extends React.Component<
-  ServiceRootGroupModalProps
+  ServiceRootGroupModalProps,
+  ServiceRootGroupModalState
 > {
-  static contextTypes = { router: routerShape };
-  static defaultProps = { id: "" };
-
-  state: ServiceRootGroupModalState = {
-    isOpen: true,
-    isPending: false,
-    expandAdvancedSettings: false,
-    data: !!this.props.id ? null : emptyGroupFormData(),
-    originalData: null,
-    errors: {},
-    isEdit: !!this.props.id,
-    error: false,
-    isForce: false,
-    hasValidated: false,
+  public static contextTypes = {
+    router: routerShape,
   };
+  public static defaultProps = {
+    id: "",
+  };
+
+  state = this.getInitialState();
 
-  componentDidMount() {
+  public componentDidMount() {
     this.getGroupFormData();
+    dcosVersion$.subscribe(({ hasQuotaSupport }) => {
+      this.setState({ showQuotaOptions: hasQuotaSupport });
+    });
+  }
+
+  public getInitialState(
+    props: ServiceRootGroupModalProps = this.props
+  ): ServiceRootGroupModalState {
+    return {
+      isOpen: true,
+      isPending: false,
+      expandAdvancedSettings: false,
+      data: !!props.id ? null : emptyGroupFormData(),
+      originalData: null,
+      errors: {},
+      isEdit: !!props.id,
+      error: false,
+      isForce: false,
+      hasValidated: false,
+      showQuotaOptions: false,
+    };
   }
 
-  handleClose = () => {
+  public handleClose = () => {
     // Start the animation of the modal by setting isOpen to false
     this.setState(
       { isOpen: false, isPending: false, data: emptyGroupFormData() },
@@ -151,7 +168,7 @@ class ServiceRootGroupModal extends React.Component<
     );
   };
 
-  handleSave = () => {
+  public handleSave = () => {
     let data: GroupFormData | null = this.state.data;
     const { isPending, originalData, isEdit, isForce } = this.state;
     if (isPending || data === null) {
@@ -226,7 +243,7 @@ class ServiceRootGroupModal extends React.Component<
       });
   };
 
-  handleSaveError = (
+  public handleSaveError = (
     message: string,
     mesos: boolean = false,
     data: null | OvercommittedQuotaResource[] = null
@@ -300,7 +317,7 @@ class ServiceRootGroupModal extends React.Component<
     }
   };
 
-  getGroupFormData = (): void => {
+  public getGroupFormData = (): void => {
     const { id } = this.props;
     if (!!id) {
       getGroup(id)
@@ -321,7 +338,7 @@ class ServiceRootGroupModal extends React.Component<
     }
   };
 
-  getModalContent = () => {
+  public getModalContent = () => {
     const { errors, data, isEdit, error } = this.state;
     // If id exists, then we must be editing.
 
@@ -381,15 +398,17 @@ class ServiceRootGroupModal extends React.Component<
                   <div>{getPathFromGroupId(data.id)}</div>
                 </FormGroup>
               </FormRow>
-              {this.renderQuotaOptions(data, errors)}
+              {this.state.showQuotaOptions
+                ? this.renderQuotaOptions(data, errors)
+                : null}
             </form>
           </div>
         </FluidGeminiScrollbar>
       </div>
     );
   };
 
-  getAdvancedSettings = () => {
+  public getAdvancedSettings = () => {
     const { data, originalData, expandAdvancedSettings, isEdit } = this.state;
     const roleEnforcementTooltipContent = (
       <Trans>
@@ -402,7 +421,7 @@ class ServiceRootGroupModal extends React.Component<
       return;
     }
 
-    const isDisabled = isEdit && !!originalData && originalData.enforceRole;
+    const isDisabled = isEdit && originalData && originalData.enforceRole;
 
     return (
       <AdvancedSection initialIsExpanded={expandAdvancedSettings}>
@@ -472,7 +491,7 @@ class ServiceRootGroupModal extends React.Component<
     );
   };
 
-  handleFormChange = (event: React.FormEvent<HTMLFormElement>) => {
+  public handleFormChange = (event: React.FormEvent<HTMLFormElement>) => {
     if (this.state.isPending || !this.state.data) {
       return;
     }
@@ -594,7 +613,7 @@ class ServiceRootGroupModal extends React.Component<
     );
   }
 
-  render() {
+  public render() {
     const { isEdit, isForce } = this.state;
     return (
       <FullScreenModal

plugins/services/src/js/containers/services/ServiceTreeView.tsx

@@ -29,6 +29,7 @@ import ServicesTable from "./ServicesTable";
 import ServiceStatusDSLSection from "../../components/dsl/ServiceStatusDSLSection";
 import ServiceTree from "../../structs/ServiceTree";
 import { serviceTreeHasQuota } from "../../utils/QuotaUtil";
+import dcosVersion$ from "#SRC/js/stores/dcos-version";
 import { Subscription } from "rxjs";
 
 const DSL_FORM_SECTIONS = [
@@ -61,7 +62,13 @@ class ServiceTreeView extends React.Component {
 
   $dcosVersion?: Subscription;
 
-  componentDidMount() {}
+  state = { hasQuotaSupport: false };
+
+  componentDidMount() {
+    this.$dcosVersion = dcosVersion$.subscribe(({ hasQuotaSupport }) => {
+      this.setState({ hasQuotaSupport });
+    });
+  }
   componentWillUnmount() {
     this.$dcosVersion?.unsubscribe();
   }
@@ -145,7 +152,8 @@ class ServiceTreeView extends React.Component {
     const { modalHandlers } = this.context;
     // Only add id if service is not root
     const isRoot = serviceTree.isRoot();
-    const hasQuota = serviceTreeHasQuota(serviceTree, roles);
+    const hasQuota =
+      serviceTreeHasQuota(serviceTree, roles) && this.state.hasQuotaSupport;
 
     const routePath = isRoot
       ? "/services/overview/create"
@@ -214,7 +222,10 @@ class ServiceTreeView extends React.Component {
       },
     ];
 
-    const actions = serviceTree.isTopLevel() ? editGroupActions : [];
+    const actions =
+      serviceTree.isTopLevel() && this.state.hasQuotaSupport
+        ? editGroupActions
+        : [];
 
     if (isEmpty) {
       // We don't want an empty "+" dropdown.

src/js/__tests__/__snapshots__/typecheck-test.ts.snap

@@ -2268,7 +2268,9 @@ plugins/services/src/js/components/modals/ServiceResumeModal.tsx: error TS2339:
 plugins/services/src/js/components/modals/ServiceResumeModal.tsx: error TS2339: Property 'resumeService' does not exist on type *.
 plugins/services/src/js/components/modals/ServiceResumeModal.tsx: error TS2339: Property 'service' does not exist on type *.
 plugins/services/src/js/components/modals/ServiceRootGroupModal/index.tsx: error TS2322: Type 'true' is not assignable to type *.
+plugins/services/src/js/components/modals/ServiceRootGroupModal/index.tsx: error TS2322: type * is not assignable to type *.
 plugins/services/src/js/components/modals/ServiceRootGroupModal/index.tsx: error TS2322: Type 'false' is not assignable to type *.
+plugins/services/src/js/components/modals/ServiceRootGroupModal/index.tsx: error TS2322: type * is not assignable to type *.
 plugins/services/src/js/components/modals/ServiceScaleFormModal.tsx: error TS2339: Property 'service' does not exist on type *.
 plugins/services/src/js/components/modals/ServiceScaleFormModal.tsx: error TS2339: Property 'service' does not exist on type *.
 plugins/services/src/js/components/modals/ServiceScaleFormModal.tsx: error TS2339: Property 'service' does not exist on type *.

src/js/stores/dcos-version.ts

@@ -25,6 +25,8 @@ export default fromFetch(
         bootstrapId: json["bootstrap-id"] as string,
         variant: json["dcos-variant"] as string,
         // we could just pass through the version itself. but having long identifiers will make it easier to understand why some code is conditional and also to remove that conditional again.
+        hasQuotaSupport: Version.compare(json.version, "2.0.0-alpha") >= 0,
+
         hasCalicoNetworking: Version.compare(json.version, "2.1.0-alpha") >= 0,
         hasVerticalBursting: Version.compare(json.version, "2.1.0-alpha") >= 0,