[Code] APM/Code Integration POC

x-pack/legacy/plugins/code/public/components/admin_page/project_tab.tsx

@@ -6,23 +6,13 @@
 
 import {
   EuiButton,
-  EuiButtonEmpty,
-  EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiForm,
   EuiFormRow,
   EuiGlobalToastList,
-  EuiModal,
-  EuiModalBody,
-  EuiModalFooter,
-  EuiModalHeader,
-  EuiModalHeaderTitle,
-  EuiOverlayMask,
   EuiSpacer,
   EuiSuperSelect,
   EuiText,
-  EuiTitle,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@@ -37,6 +27,7 @@ import { ToastType } from '../../reducers/repository_management';
 import { isImportRepositoryURLInvalid } from '../../utils/url';
 import { ProjectItem } from './project_item';
 import { ProjectSettings } from './project_settings';
+import { ImportModal } from '../apm_demo/import_modal';
 
 enum SortOptionsValue {
   AlphabeticalAsc = 'alphabetical_asc',
@@ -167,70 +158,21 @@ class CodeProjectTab extends React.PureComponent<Props, State> {
     }
   };
 
-  public updateIsInvalid = () => {
-    this.setState({ isInvalid: isImportRepositoryURLInvalid(this.state.repoURL) });
-  };
-
   public renderImportModal = () => {
-    return (
-      <EuiOverlayMask>
-        <EuiModal onClose={this.closeModal}>
-          <EuiModalHeader>
-            <EuiModalHeaderTitle>
-              <FormattedMessage
-                id="xpack.code.adminPage.repoTab.importRepoTitle"
-                defaultMessage="Import a new repo"
-              />
-            </EuiModalHeaderTitle>
-          </EuiModalHeader>
-          <EuiModalBody>
-            <EuiTitle size="xs">
-              <h3>
-                <FormattedMessage
-                  id="xpack.code.adminPage.repoTab.repositoryUrlFormLabel"
-                  defaultMessage="Repository URL"
-                />
-              </h3>
-            </EuiTitle>
-            <EuiForm>
-              <EuiFormRow
-                isInvalid={this.state.isInvalid}
-                error={i18n.translate('xpack.code.adminPage.repoTab.repositoryUrlEmptyText', {
-                  defaultMessage: "The URL shouldn't be empty.",
-                })}
-              >
-                <EuiFieldText
-                  value={this.state.repoURL}
-                  onChange={this.onChange}
-                  onBlur={this.updateIsInvalid}
-                  placeholder="https://github.com/Microsoft/TypeScript-Node-Starter"
-                  aria-label="input project url"
-                  data-test-subj="importRepositoryUrlInputBox"
-                  isLoading={this.props.importLoading}
-                  fullWidth={true}
-                  isInvalid={this.state.isInvalid}
-                  autoFocus={true}
-                />
-              </EuiFormRow>
-            </EuiForm>
-          </EuiModalBody>
-          <EuiModalFooter>
-            <EuiButtonEmpty onClick={this.closeModal}>
-              <FormattedMessage
-                id="xpack.code.adminPage.repoTab.cancelButtonLabel"
-                defaultMessage="Cancel"
-              />
-            </EuiButtonEmpty>
-            <EuiButton fill onClick={this.submitImportProject} disabled={this.props.importLoading}>
-              <FormattedMessage
-                id="xpack.code.adminPage.repoTab.importButtonLabel"
-                defaultMessage="Import"
-              />
-            </EuiButton>
-          </EuiModalFooter>
-        </EuiModal>
-      </EuiOverlayMask>
-    );
+    const { isInvalid, repoURL, showImportProjectModal } = this.state;
+
+    if (showImportProjectModal) {
+      return (
+        <ImportModal
+          isInvalid={isInvalid}
+          isLoading={this.props.importLoading}
+          onChange={this.onChange}
+          onClose={this.closeModal}
+          onSubmit={this.submitImportProject}
+          value={repoURL}
+        />
+      );
+    }
   };
 
   public setSortOption = (value: string) => {
@@ -240,7 +182,6 @@ class CodeProjectTab extends React.PureComponent<Props, State> {
   public render() {
     const { projects, status, toastMessage, showToast, toastType } = this.props;
     const projectsCount = projects.length;
-    const modal = this.state.showImportProjectModal && this.renderImportModal();
     const sortedProjects = projects.sort(sortFunctionsFactory(status)[this.state.sortOption]);
 
     const repoList = sortedProjects.map((repo: Repository) => (
@@ -319,7 +260,7 @@ class CodeProjectTab extends React.PureComponent<Props, State> {
         </EuiText>
         <EuiSpacer />
         {repoList}
-        {modal}
+        {this.renderImportModal()}
         {settings}
       </div>
     );

x-pack/legacy/plugins/code/public/components/apm_demo/code_integration.tsx

@@ -0,0 +1,77 @@
+/*
+ * 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 styled from 'styled-components';
+import { EuiButtonEmpty, EuiPopover, EuiText } from '@elastic/eui';
+
+import { history } from '../../utils/url';
+import { RepoSelector } from './repo_selector';
+import { Frame } from './data';
+
+interface Props {
+  onRepoSelect: (repo: string) => void;
+  onImportSuccess: (repo: string) => void;
+  isIntegrated: boolean;
+  frame: Frame;
+  repos: string[];
+}
+
+const PopoverContent = styled.div`
+  margin-bottom: 1rem;
+  width: 300px;
+`;
+
+export const CodeIntegration = ({
+  frame,
+  isIntegrated,
+  onRepoSelect,
+  onImportSuccess,
+  repos,
+}: Props) => {
+  const [showSelector, setShowSelector] = useState(false);
+
+  const handleClick = () => {
+    if (isIntegrated) {
+      const fileLinkUrl = `/${frame.uri}/blob/HEAD/${frame.filePath}`;
+      history.push(fileLinkUrl);
+    } else {
+      setShowSelector(true);
+    }
+  };
+
+  const handleSelect = (codeId: string) => {
+    onRepoSelect(codeId);
+    setShowSelector(false);
+    // TODO: show success
+  };
+
+  const button = (
+    <EuiButtonEmpty iconType="logoCode" onClick={handleClick}>
+      View in Code
+    </EuiButtonEmpty>
+  );
+
+  return (
+    <EuiPopover
+      anchorPosition="leftCenter"
+      button={button}
+      isOpen={showSelector}
+      closePopover={() => setShowSelector(false)}
+    >
+      <PopoverContent>
+        <EuiText size="s">
+          <h3>No repository mapping found</h3>
+          <p>
+            We can't find the mapping between service and the source code. Select the repository or
+            import a new one.
+          </p>
+        </EuiText>
+      </PopoverContent>
+      <RepoSelector onSelect={handleSelect} onImport={onImportSuccess} repos={repos} />
+    </EuiPopover>
+  );
+};