[Code] diff page (#46714)

* fix(code/frontend): enable diff page

x-pack/legacy/plugins/code/index.ts

@@ -41,6 +41,7 @@ export const code = (kibana: any) =>
         return {
           codeUiEnabled: config.get('xpack.code.ui.enabled'),
           codeIntegrationsEnabled: config.get('xpack.code.integrations.enabled'),
+          codeDiffPageEnabled: config.get('xpack.code.diffPage.enabled'),
         };
       },
       hacks: ['plugins/code/hacks/toggle_app_link_in_nav'],
@@ -61,6 +62,9 @@ export const code = (kibana: any) =>
         integrations: Joi.object({
           enabled: Joi.boolean().default(false),
         }).default(),
+        diffPage: Joi.object({
+          enabled: Joi.boolean().default(false),
+        }).default(),
         enabled: Joi.boolean().default(true),
       })
         .default()

x-pack/legacy/plugins/code/public/components/commits/commit.tsx

@@ -16,12 +16,13 @@ import {
   EuiCopy,
   EuiTitle,
 } from '@elastic/eui';
+import chrome from 'ui/chrome';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { CommitInfo } from '../../../model/commit';
-import { PathTypes } from '../../common/types';
 import { RepositoryUtils } from '../../../common/repository_utils';
 import { parseCommitMessage } from '../../../common/commit_utils';
+import { PathTypes } from '../../common/types';
 
 const COMMIT_ID_LENGTH = 8;
 
@@ -54,8 +55,17 @@ const revisionLinkLabel = i18n.translate('xpack.code.commits.revisionLinkAriaLab
   defaultMessage: 'View the project at this commit',
 });
 
+const getRevisionPath = (repoUri: string, commitId: string) => {
+  const diffPageEnabled = chrome.getInjected('codeDiffPageEnabled');
+  if (diffPageEnabled) {
+    return `#/${repoUri}/commit/${commitId}`;
+  } else {
+    return `#/${repoUri}/${PathTypes.tree}/${commitId}`;
+  }
+};
+
 const CommitActions = ({ commitId, repoUri }: ActionProps) => {
-  const revisionPath = `#/${repoUri}/${PathTypes.tree}/${commitId}`;
+  const revisionPath = getRevisionPath(repoUri, commitId);
 
   return (
     <div className="commit__actions">

x-pack/legacy/plugins/code/public/components/commits/index.ts

@@ -5,6 +5,5 @@
  */
 
 export { Commit } from './commit';
-export { CommitLink } from './commit_link';
 export { CommitGroup } from './group';
 export { CommitHistory, CommitHistoryComponent } from './history';

x-pack/legacy/plugins/code/public/components/diff_page/accordion.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState } from 'react';
+import { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
+
+interface Props {
+  initialIsOpen: boolean;
+  title: React.ReactNode;
+  children: React.ReactNode;
+  className: string;
+}
+
+export const Accordion = (props: Props) => {
+  const [isOpen, setOpen] = useState(props.initialIsOpen);
+  return (
+    <EuiPanel paddingSize="none" className={props.className}>
+      <EuiFlexGroup
+        gutterSize="none"
+        justifyContent="spaceBetween"
+        alignItems="center"
+        onClick={() => {
+          setOpen(!isOpen);
+        }}
+      >
+        <EuiFlexItem>{props.title}</EuiFlexItem>
+        <EuiFlexItem grow={false} className="codeAccordionCollapse__icon">
+          <EuiIcon type={isOpen ? 'arrowDown' : 'arrowRight'} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <div hidden={!isOpen}>{props.children}</div>
+    </EuiPanel>
+  );
+};

x-pack/legacy/plugins/code/public/components/diff_page/diff.scss

@@ -1,16 +1,48 @@
+.codeDiffCommitSelectorsContainer {
+  border-left: $euiBorderThin solid $euiColorLightShade;
+  padding-left: $euiSize;
+}
+
+.codeDiffCommitMessage {
+  padding: $euiSizeS $euiSize;
+}
+
+.codeDiffChangedFiles {
+  color: $euiColorPrimary;
+}
+
+.codeDiffMetadata {
+  padding: 0 $euiSize $euiSizeS $euiSize;
+}
 
+.codeVisualizerIcon {
+  margin-right: $euiSizeS;
+}
+
+.codeDiffDeletion {
+  margin: 0 $euiSizeS;
+  background-color: $euiColorVis0;
+}
 
-.diff > button.euiAccordion__button > div:first-child {
-  flex-direction: row-reverse;
-  padding: $euiSize $euiSizeS;
+.codeDiff__panel {
+  padding: 0 $euiSize;
 }
 
-.diff > button.euiAccordion__button {
-  &:hover {
-    text-decoration: none;
-  }
+.codeDiff__header {
+  border-bottom: $euiBorderThin solid $euiColorLightShade;
+  height: $euiSizeXXL;
+  padding: $euiSize;
 }
 
-.euiAccordion__iconWrapper {
+.codeAccordionCollapse__icon {
+  margin: auto $euiSize auto 0;
   cursor: pointer;
 }
+
+.codeViewFile__button {
+  height: $euiSizeL !important;
+}
+
+.codeAccordion {
+  margin-bottom: $euiSizeM;
+}