Add buttons to download and copy to clipboard content to TextEditor

web/packages/shared/components/TextEditor/TextEditor.jsx

@@ -17,11 +17,19 @@
  */
 
 import React from 'react';
+import styled from 'styled-components';
 import ace from 'ace-builds/src-min-noconflict/ace';
 
 import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/mode-yaml';
 import 'ace-builds/src-noconflict/ext-searchbox';
+import { ButtonSecondary } from 'design/Button';
+import Flex from 'design/Flex';
+import { Copy, Download } from 'design/Icon';
+import { copyToClipboard } from 'design/utils/copyToClipboard';
+
+import { downloadObject } from 'shared/utils/download';
+
 import StyledTextEditor from './StyledTextEditor';
 
 const { UndoManager } = ace.require('ace/undomanager');
@@ -104,20 +112,58 @@ class TextEditor extends React.Component {
 
   render() {
     const { bg = 'levels.sunken' } = this.props;
+    const hasButton = this.props.copyButton || this.props.downloadButton;
+
     return (
       <StyledTextEditor bg={bg}>
         <div ref={e => (this.ace_viewer = e)} />
+        {hasButton && (
+          <ButtonSection>
+            {this.props.copyButton && (
+              <EditorButton
+                title="Copy to clipboard"
+                onClick={() => copyToClipboard(this.editor.session.getValue())}
+              >
+                <Copy size="medium" />
+              </EditorButton>
+            )}
+            {this.props.downloadButton && (
+              <EditorButton
+                title="Download"
+                onClick={() =>
+                  downloadObject(
+                    this.props.downloadFileName,
+                    this.editor.session.getValue()
+                  )
+                }
+              >
+                <Download size="medium" />
+              </EditorButton>
+            )}
+          </ButtonSection>
+        )}
       </StyledTextEditor>
     );
   }
 }
 
-export default TextEditor;
-
 function getMode(docType) {
   if (docType === 'json') {
     return 'ace/mode/json';
   }
 
   return 'ace/mode/yaml';
 }
+
+const EditorButton = styled(ButtonSecondary)`
+  padding: ${({ theme }) => theme.space[2]}px;
+  background-color: transparent;
+`;
+
+const ButtonSection = styled(Flex)`
+  position: absolute;
+  right: 0;
+  top: 0;
+`;
+
+export default TextEditor;

web/packages/shared/components/TextEditor/TextEditor.story.jsx

@@ -0,0 +1,95 @@
+/*
+ * Teleport
+ * Copyright (C) 2024  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+
+import Flex from 'design/Flex';
+
+import TextEditor from './TextEditor';
+
+export default {
+  title: 'Shared/TextEditor',
+};
+
+export const Editor = () => {
+  return (
+    <Flex height="600px" width="600px" py={3} pr={3} bg="levels.deep">
+      <TextEditor
+        bg="levels.deep"
+        data={[
+          {
+            content,
+            type: 'yaml',
+          },
+        ]}
+      />
+    </Flex>
+  );
+};
+
+export const ReadOnly = () => {
+  return (
+    <Flex height="600px" width="600px" py={3} pr={3} bg="levels.deep">
+      <TextEditor
+        bg="levels.deep"
+        readOnly
+        data={[
+          {
+            content,
+            type: 'yaml',
+          },
+        ]}
+      />
+    </Flex>
+  );
+};
+
+export const WithButtons = () => {
+  return (
+    <Flex height="600px" width="600px" py={3} pr={3} bg="levels.deep">
+      <TextEditor
+        bg="levels.deep"
+        data={[
+          {
+            content,
+            type: 'yaml',
+          },
+        ]}
+        copyButton
+        downloadButton
+        downloadFileName="content.yaml"
+      />
+    </Flex>
+  );
+};
+
+const content = `# example
+kind: github
+version: v3
+metadata:
+  name: github
+spec:
+  client_id: client-id
+  client_secret: client-secret
+  display: GitHub
+  redirect_url: https://tele.example.com:443/v1/webapi/github/callback
+  teams_to_roles:
+    - organization: octocats 
+      team: admin            
+      roles: ["access"]
+`;

web/packages/shared/components/TextEditor/TextEditor.test.jsx

@@ -0,0 +1,68 @@
+/**
+ * Teleport
+ * Copyright (C) 2024  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import { render, userEvent, screen } from 'design/utils/testing';
+import * as copyModule from 'design/utils/copyToClipboard';
+
+import * as downloadsModule from 'shared/utils/download';
+
+import TextEditor from '.';
+
+describe('textEditor tests', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('copy content button', async () => {
+    render(
+      <TextEditor
+        copyButton
+        data={[
+          {
+            content: 'my-content',
+            type: 'yaml',
+          },
+        ]}
+      />
+    );
+    const mockedCopyToClipboard = jest.spyOn(copyModule, 'copyToClipboard');
+
+    await userEvent.click(screen.getByTitle('Copy to clipboard'));
+    expect(mockedCopyToClipboard).toHaveBeenCalledWith('my-content');
+  });
+
+  test('download content button', async () => {
+    render(
+      <TextEditor
+        downloadButton
+        downloadFileName="test.yaml"
+        data={[
+          {
+            content: 'my-content',
+            type: 'yaml',
+          },
+        ]}
+      />
+    );
+    const mockedDownload = jest.spyOn(downloadsModule, 'downloadObject');
+
+    await userEvent.click(screen.getByTitle('Download'));
+    expect(mockedDownload).toHaveBeenCalledWith('test.yaml', 'my-content');
+  });
+});

web/packages/shared/utils/download.ts

@@ -0,0 +1,17 @@
+export const downloadObject = (filename: string, text: string) => {
+  /*
+   * http://stackoverflow.com/questions/3665115/create-a-file-in-memory-for-user-to-download-not-through-server
+   */
+  var element = document.createElement('a');
+  element.setAttribute(
+    'href',
+    'data:text/plain;charset=utf-8,' + encodeURIComponent(text)
+  );
+  element.setAttribute('download', filename);
+  element.style.display = 'none';
+
+  document.body.appendChild(element);
+
+  element.click();
+  document.body.removeChild(element);
+};