hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Use electron.clipboard for all clipboard uses (#4535)

Browse Source
This commit is contained in:
Sebastian Malton 2021-12-13 10:45:24 -05:00 committed by GitHub
parent 41e7664fe2
commit 1d1a85f9ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 7 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/renderer/components/clipboard/clipboard.scss
View File

@ -1,24 +0,0 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.Clipboard {
cursor: pointer;
}

88
src/renderer/components/clipboard/clipboard.tsx
View File

@ -1,88 +0,0 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import "./clipboard.scss";
import React from "react";
import { findDOMNode } from "react-dom";
import { boundMethod } from "../../../common/utils";
import { Notifications } from "../notifications";
import { copyToClipboard } from "../../utils/copyToClipboard";
import logger from "../../../main/logger";
import { cssNames } from "../../utils";
export interface CopyToClipboardProps {
resetSelection?: boolean;
showNotification?: boolean;
cssSelectorLimit?: string; // allows to copy partial content with css-selector in children-element context
getNotificationMessage?(copiedText: string): React.ReactNode;
}
export const defaultProps: Partial<CopyToClipboardProps> = {
getNotificationMessage(copiedText: string) {
return <p>Copied to clipboard: <em>{copiedText}</em></p>;
},
};
export class Clipboard extends React.Component<CopyToClipboardProps> {
static displayName = "Clipboard";
static defaultProps = defaultProps as object;
get rootElem(): HTMLElement {
// eslint-disable-next-line react/no-find-dom-node
return findDOMNode(this) as HTMLElement;
}
get rootReactElem(): React.ReactElement<React.HTMLProps<any>> {
return React.Children.only(this.props.children) as React.ReactElement;
}
@boundMethod
onClick(evt: React.MouseEvent) {
if (this.rootReactElem.props.onClick) {
this.rootReactElem.props.onClick(evt); // pass event to children-root-element if any
}
const { showNotification, resetSelection, getNotificationMessage, cssSelectorLimit } = this.props;
const contentElem = this.rootElem.querySelector<any>(cssSelectorLimit) || this.rootElem;
if (contentElem) {
const { copiedText, copied } = copyToClipboard(contentElem, { resetSelection });
if (copied && showNotification) {
Notifications.ok(getNotificationMessage(copiedText));
}
}
}
render() {
try {
const rootElem = this.rootReactElem;
return React.cloneElement(rootElem, {
className: cssNames(Clipboard.displayName, rootElem.props.className),
onClick: this.onClick,
});
} catch (err) {
logger.error(`Invalid usage components/CopyToClick usage. Children must contain root html element.`, { err: String(err) });
return this.rootReactElem;
}
}
}

22
src/renderer/components/clipboard/index.ts
View File

@ -1,22 +0,0 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
export * from "./clipboard";

7
src/renderer/components/dialog/logs-dialog.tsx
View File

@ -24,10 +24,10 @@ import "./logs-dialog.scss";
import React from "react"; import React from "react";
import { Dialog, DialogProps } from "../dialog"; import { Dialog, DialogProps } from "../dialog";
import { Wizard, WizardStep } from "../wizard"; import { Wizard, WizardStep } from "../wizard";
import { copyToClipboard } from "../../utils";
import { Notifications } from "../notifications"; import { Notifications } from "../notifications";
import { Button } from "../button"; import { Button } from "../button";
import { Icon } from "../icon"; import { Icon } from "../icon";
import { clipboard } from "electron";
// todo: make as external BrowserWindow (?) // todo: make as external BrowserWindow (?)
@ -40,9 +40,8 @@ export class LogsDialog extends React.Component<Props> {
public logsElem: HTMLElement; public logsElem: HTMLElement;
copyToClipboard = () => { copyToClipboard = () => {
if (copyToClipboard(this.logsElem)) { clipboard.writeText(this.props.logs);
Notifications.ok(`Logs copied to clipboard.`); Notifications.ok(`Logs copied to clipboard.`);
}
}; };
render() { render() {

14
src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx
View File

@ -25,7 +25,7 @@ import { makeObservable, observable } from "mobx";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import yaml from "js-yaml"; import yaml from "js-yaml";
import type { ServiceAccount } from "../../../common/k8s-api/endpoints"; import type { ServiceAccount } from "../../../common/k8s-api/endpoints";
import { copyToClipboard, saveFileDialog } from "../../utils"; import { saveFileDialog } from "../../utils";
import { Button } from "../button"; import { Button } from "../button";
import { Dialog, DialogProps } from "../dialog"; import { Dialog, DialogProps } from "../dialog";
import { Icon } from "../icon"; import { Icon } from "../icon";
@ -33,6 +33,7 @@ import { Notifications } from "../notifications";
import { Wizard, WizardStep } from "../wizard"; import { Wizard, WizardStep } from "../wizard";
import { apiBase } from "../../api"; import { apiBase } from "../../api";
import { MonacoEditor } from "../monaco-editor"; import { MonacoEditor } from "../monaco-editor";
import { clipboard } from "electron";
interface IKubeconfigDialogData { interface IKubeconfigDialogData {
title?: React.ReactNode; title?: React.ReactNode;
@ -49,7 +50,6 @@ const dialogState = observable.object({
@observer @observer
export class KubeConfigDialog extends React.Component<Props> { export class KubeConfigDialog extends React.Component<Props> {
@observable.ref configTextArea: HTMLTextAreaElement; // required for coping config text
@observable config = ""; // parsed kubeconfig in yaml format @observable config = ""; // parsed kubeconfig in yaml format
constructor(props: Props) { constructor(props: Props) {
@ -89,9 +89,8 @@ export class KubeConfigDialog extends React.Component<Props> {
} }
copyToClipboard = () => { copyToClipboard = () => {
if (this.config && copyToClipboard(this.configTextArea)) { clipboard.writeText(this.config);
Notifications.ok("Config copied to clipboard"); Notifications.ok("Config copied to clipboard");
}
}; };
download = () => { download = () => {
@ -131,11 +130,6 @@ export class KubeConfigDialog extends React.Component<Props> {
className={styles.editor} className={styles.editor}
value={yamlConfig} value={yamlConfig}
/> />
<textarea
className={styles.configCopy}
readOnly defaultValue={yamlConfig}
ref={e => this.configTextArea = e}
/>
</WizardStep> </WizardStep>
</Wizard> </Wizard>
</Dialog> </Dialog>

52
src/renderer/utils/copyToClipboard.ts
View File

@ -1,52 +0,0 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
// Helper for selecting element's text content and copy in clipboard
export function copyToClipboard(elem: HTMLElement, { resetSelection = true } = {}) {
let clearSelection: () => void;
if (isSelectable(elem)) {
elem.select();
clearSelection = () => elem.setSelectionRange(0, 0);
} else {
const selection = window.getSelection();
selection.selectAllChildren(elem);
clearSelection = () => selection.removeAllRanges();
}
const selectedText = document.getSelection().toString();
const isCopied = document.execCommand("copy");
if (resetSelection) {
clearSelection();
}
return {
copied: isCopied,
copiedText: selectedText,
clearSelection,
};
}
function isSelectable(elem: HTMLElement): elem is HTMLInputElement {
return !!(elem as HTMLInputElement).select;
}

1
src/renderer/utils/index.ts
View File

@ -24,7 +24,6 @@
export * from "../../common/utils"; export * from "../../common/utils";
export * from "../../common/event-emitter"; export * from "../../common/event-emitter";
export * from "./copyToClipboard";
export * from "./createStorage"; export * from "./createStorage";
export * from "./cssNames"; export * from "./cssNames";
export * from "./cssVar"; export * from "./cssVar";