[ML] Transform: Fix wizard width. (#48778)

The Kibana management section pages default to a max-width of 1200px. The transform creation wizard had a max-width of 100% when it was part of the ML plugin. Because of the existing two-column layout, the new default width can be a bit narrow for table with a lot of columns.
This PR provides an override to replicate the previous full-page-width of the transforms creation wizard. We might revisit this for future versions to blend in more with the overall design of the Kibana management section.

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/wizard/_wizard.scss

@@ -3,3 +3,11 @@
     padding-right: 0px;
   }
 }
+
+/* This is an override to replicate the previous full-page-width of the transforms creation wizard
+when it was in use within the ML plugin. The Kibana management section limits a max-width to 1200px
+which is a bit narrow for the two column layout of the transform wizard. We might revisit this for
+future versions to blend in more with the overall design of the Kibana management section. */
+.mgtPage__body--transformWizard {
+  max-width: 100%;
+}

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/wizard/wizard.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment, SFC, useContext, useRef, useState } from 'react';
+import React, { Fragment, SFC, useContext, useEffect, useRef, useState } from 'react';
 
 import { i18n } from '@kbn/i18n';
 
@@ -24,6 +24,11 @@ import { getDefaultStepCreateState, StepCreateForm, StepCreateSummary } from '..
 import { getDefaultStepDetailsState, StepDetailsForm, StepDetailsSummary } from '../step_details';
 import { WizardNav } from '../wizard_nav';
 
+enum KBN_MANAGEMENT_PAGE_CLASSNAME {
+  DEFAULT_BODY = 'mgtPage__body',
+  TRANSFORM_BODY_MODIFIER = 'mgtPage__body--transformWizard',
+}
+
 enum WIZARD_STEPS {
   DEFINE,
   DETAILS,
@@ -84,6 +89,25 @@ export const Wizard: SFC = React.memo(() => {
   // The CREATE state
   const [stepCreateState, setStepCreateState] = useState(getDefaultStepCreateState);
 
+  useEffect(() => {
+    // The transform plugin doesn't control the wrapping management page via React
+    // so we use plain JS to add and remove a custom CSS class to set the full
+    // page width to 100% for the transform wizard. It's done to replicate the layout
+    // as it was when transforms were part of the ML plugin. This will be revisited
+    // to come up with an approach that's more in line with the overall layout
+    // of the Kibana management section.
+    const managementBody = document.getElementsByClassName(
+      KBN_MANAGEMENT_PAGE_CLASSNAME.DEFAULT_BODY
+    );
+
+    if (managementBody.length > 0) {
+      managementBody[0].classList.add(KBN_MANAGEMENT_PAGE_CLASSNAME.TRANSFORM_BODY_MODIFIER);
+      return () => {
+        managementBody[0].classList.remove(KBN_MANAGEMENT_PAGE_CLASSNAME.TRANSFORM_BODY_MODIFIER);
+      };
+    }
+  }, []);
+
   if (!isKibanaContextInitialized(kibanaContext)) {
     // TODO proper loading indicator
     return null;