feat(md): MD debug mode (#9401)

* feat(md): show processed delivery config if md_debug is enabled

* feat(md): menu option to copy the artifact version (debug mode)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

app/scripts/modules/core/src/managed/Environments2.tsx

@@ -5,6 +5,7 @@ import { HorizontalTabs } from 'core/presentation/horizontalTabs/HorizontalTabs'
 
 import { EnvironmentsDirectionController } from './environmentBaseElements/EnvironmentsRender';
 import { Routes } from './managed.states';
+import { setDebugMode } from './utils/debugMode';
 import { useLogEvent } from './utils/logging';
 
 import './Environments2.less';
@@ -66,7 +67,15 @@ const tabs = Object.entries(tabsInternal).map(([key, title]) => ({ title, path:
 // TODO: this is a temporary name until we remove the old view
 export const Environments2 = () => {
   const logEvent = useLogEvent('EnvironmentsTab');
-  const { state } = useCurrentStateAndParams();
+  const { state, params } = useCurrentStateAndParams();
+
+  React.useEffect(() => {
+    if (params.md_debug === 'enabled') {
+      setDebugMode(true);
+    } else if (params.md_debug === 'disabled') {
+      setDebugMode(false);
+    }
+  }, [params]);
 
   return (
     <div className="vertical Environments2">

app/scripts/modules/core/src/managed/config/DeliveryConfig.tsx

@@ -4,6 +4,7 @@ import AceEditor from 'react-ace';
 import { useApplicationContextSafe, useData } from 'core/presentation';
 
 import { ManagedReader } from '..';
+import { getIsDebugMode } from '../utils/debugMode';
 import { useLogEvent } from '../utils/logging';
 
 const DeliveryConfigContentRenderer = ({ content }: { content: string }) => {
@@ -40,6 +41,7 @@ export const DeliveryConfig = () => {
   const app = useApplicationContextSafe();
   const { result, error, status } = useData(() => ManagedReader.getRawDeliveryConfig(app.name), undefined, [app]);
   const logError = useLogEvent('DeliveryConfig');
+  const isDebug = getIsDebugMode();
   React.useEffect(() => {
     if (error) {
       logError({ action: 'LoadingFailed', data: { error } });
@@ -57,6 +59,20 @@ export const DeliveryConfig = () => {
           <DeliveryConfigContentRenderer content={result} />
         </>
       )}
+      {isDebug && <ProcessedDeliveryConfig />}
+    </div>
+  );
+};
+
+const ProcessedDeliveryConfig = () => {
+  const app = useApplicationContextSafe();
+  const { result } = useData(() => ManagedReader.getProcessedDeliveryConfig(app.name), undefined, [app]);
+
+  if (!result) return null;
+  return (
+    <div className="sp-margin-l-top">
+      <h4>Debug: Processed delivery config</h4>
+      <DeliveryConfigContentRenderer content={result} />
     </div>
   );
 };

app/scripts/modules/core/src/managed/managed.states.ts

@@ -78,7 +78,7 @@ module(MANAGED_STATES, [APPLICATION_STATE_PROVIDER]).config([
 
       const environments: INestedState = {
         name: 'environments',
-        url: `/environments`,
+        url: `/environments?{md_debug:query}`,
         views: {
           insight: { component: Environments, $type: 'react' },
         },

app/scripts/modules/core/src/managed/overview/artifact/utils.ts

@@ -3,11 +3,13 @@ import { DateTime } from 'luxon';
 
 import { useApplicationContextSafe } from 'core/presentation';
 import { timeDiffToString } from 'core/utils';
+import { copyTextToClipboard } from 'core/utils/clipboard/copyTextToClipboard';
 
 import { ACTION_DISPLAY_NAMES, getActionStatusData } from './VersionOperation';
 import { MdArtifactStatusInEnvironment } from '../../graphql/graphql-sdk';
 import { useMarkVersionAsBad, useMarkVersionAsGood, usePinVersion, useUnpinVersion } from './hooks';
 import { QueryArtifactVersion, QueryConstraint, QueryLifecycleStep } from '../types';
+import { getIsDebugMode } from '../../utils/debugMode';
 import { VersionAction } from '../../versionMetadata/MetadataComponents';
 
 export const getConstraintsStatusSummary = (constraints: QueryConstraint[]) => {
@@ -151,5 +153,14 @@ export const useCreateVersionActions = ({
     actions.push({ content: 'Compare to previous version', href: compareLinks.previous });
   }
 
+  if (getIsDebugMode()) {
+    actions.push({
+      content: 'Copy artifact version [Debug]',
+      onClick: () => {
+        copyTextToClipboard(version);
+      },
+    });
+  }
+
   return actions.length ? actions : undefined;
 };

app/scripts/modules/core/src/managed/utils/debugMode.ts

@@ -0,0 +1,16 @@
+const debugFeatureFlag = {
+  key: 'MD_debug',
+  value: '1',
+};
+
+export const getIsDebugMode = () => {
+  return localStorage.getItem(debugFeatureFlag.key) === debugFeatureFlag.value;
+};
+
+export const setDebugMode = (isDebug: boolean) => {
+  if (isDebug) {
+    localStorage.setItem(debugFeatureFlag.key, debugFeatureFlag.value);
+  } else {
+    localStorage.removeItem(debugFeatureFlag.key);
+  }
+};

app/scripts/modules/core/src/utils/clipboard/copyTextToClipboard.ts

@@ -0,0 +1,10 @@
+export const copyTextToClipboard = (text: string) => {
+  const input = document.createElement('textarea');
+  input.style.opacity = '0';
+  input.innerHTML = text;
+  document.body.appendChild(input);
+  input.select();
+  const result = document.execCommand('copy');
+  document.body.removeChild(input);
+  return result;
+};