Fleet UI: Enroll secret hover bug (#8592)
This commit is contained in:
RachelElysia
@@ -72,6 +72,10 @@
|
||||
&__copy-message {
|
||||
font-weight: $regular;
|
||||
vertical-align: top;
|
||||
background-color: $ui-light-grey;
|
||||
border: solid 1px #e2e4ea;
|
||||
border-radius: 10px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
|
||||
+15
-22
@@ -1,4 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import { uniqueId } from "lodash";
|
||||
|
||||
import { stringToClipboard } from "utilities/copy_text";
|
||||
import { IEnrollSecret } from "interfaces/enroll_secret";
|
||||
@@ -6,11 +7,7 @@ import { IEnrollSecret } from "interfaces/enroll_secret";
|
||||
import Button from "components/buttons/Button";
|
||||
// @ts-ignore
|
||||
import InputField from "components/forms/fields/InputField";
|
||||
// @ts-ignore
|
||||
import ClipboardIcon from "../../../../../assets/images/icon-copy-clipboard-fleet-blue-20x20@2x.png";
|
||||
import EyeIcon from "../../../../../assets/images/icon-eye-16x16@2x.png";
|
||||
import EditIcon from "../../../../../assets/images/icon-pencil-14x14@2x.png";
|
||||
import DeleteIcon from "../../../../../assets/images/icon-trash-14x14@2x.png";
|
||||
import Icon from "components/Icon";
|
||||
|
||||
const baseClass = "enroll-secrets";
|
||||
|
||||
@@ -78,29 +75,29 @@ const EnrollSecretRow = ({
|
||||
)}
|
||||
<Button
|
||||
variant="unstyled"
|
||||
className={`${baseClass}__secret-copy-icon`}
|
||||
className={`${baseClass}__copy-secret-icon`}
|
||||
onClick={onCopySecret}
|
||||
>
|
||||
<img src={ClipboardIcon} alt="copy to clipboard" />
|
||||
<Icon name="clipboard" />
|
||||
</Button>
|
||||
<a
|
||||
href="#showSecret"
|
||||
<Button
|
||||
variant="unstyled"
|
||||
className={`${baseClass}__show-secret-icon`}
|
||||
onClick={onToggleSecret}
|
||||
className={`${baseClass}__show-secret`}
|
||||
>
|
||||
<img src={EyeIcon} alt="show/hide" />
|
||||
</a>
|
||||
<Icon name="eye" />
|
||||
</Button>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`${baseClass}__secret`} key={secret.secret}>
|
||||
<div className={`${baseClass}__secret`} key={uniqueId()}>
|
||||
<InputField
|
||||
disabled
|
||||
inputWrapperClass={`${baseClass}__secret-input`}
|
||||
name="osqueryd-secret"
|
||||
name={`osqueryd-secret-${uniqueId()}`}
|
||||
label={renderLabel()}
|
||||
type={showSecret ? "text" : "password"}
|
||||
value={secret.secret}
|
||||
@@ -109,21 +106,17 @@ const EnrollSecretRow = ({
|
||||
<>
|
||||
<Button
|
||||
onClick={onEditSecretClick}
|
||||
className={`${baseClass}__edit-secret-btn`}
|
||||
className={`${baseClass}__edit-secret-icon`}
|
||||
variant="text-icon"
|
||||
>
|
||||
<>
|
||||
<img src={EditIcon} alt="Edit secret icon" />
|
||||
</>
|
||||
<Icon name="pencil" />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={onDeleteSecretClick}
|
||||
className={`${baseClass}__delete-secret-btn`}
|
||||
className={`${baseClass}__delete-secret-icon`}
|
||||
variant="text-icon"
|
||||
>
|
||||
<>
|
||||
<img src={DeleteIcon} alt="Delete secret icon" />
|
||||
</>
|
||||
<Icon name="trash" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -15,12 +15,10 @@
|
||||
font-size: $x-small;
|
||||
font-weight: $bold;
|
||||
margin-bottom: 0;
|
||||
width: 485px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
width: 560px;
|
||||
|
||||
&--disabled {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
@@ -31,10 +29,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__secret-copy-icon {
|
||||
color: $core-vibrant-blue;
|
||||
margin-left: $pad-small;
|
||||
margin-right: $pad-medium;
|
||||
&__copy-message {
|
||||
position: absolute;
|
||||
right: 65px;
|
||||
background-color: $ui-light-grey;
|
||||
border: solid 1px #e2e4ea;
|
||||
border-radius: 10px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
@@ -48,48 +49,19 @@
|
||||
span {
|
||||
font-weight: $regular;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__secret-download-icon {
|
||||
display: block;
|
||||
font-size: $x-small;
|
||||
color: $core-vibrant-blue;
|
||||
font-weight: $bold;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
&--multiple-secrets {
|
||||
.form-field__label {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.enroll-secrets__secret-download-icon {
|
||||
margin-bottom: $pad-medium;
|
||||
}
|
||||
}
|
||||
|
||||
&__edit-secret-btn,
|
||||
&__delete-secret-btn {
|
||||
margin: 0 $pad-small;
|
||||
&__show-secret-icon,
|
||||
&__copy-secret-icon,
|
||||
&__edit-secret-icon,
|
||||
&__delete-secret-icon {
|
||||
padding: 0 $pad-small;
|
||||
margin-left: $pad-xsmall;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,11 +48,12 @@ const EnrollSecretTable = ({
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={enrollSecretsClass}>
|
||||
{secrets.map((secretInfo) => (
|
||||
<EnrollSecretRow secret={secretInfo} key={secretInfo.secret} />
|
||||
))}
|
||||
{secrets.map((secretInfo) => {
|
||||
return <EnrollSecretRow secret={secretInfo} key={secretInfo.secret} />;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -30,15 +30,6 @@
|
||||
margin-right: $pad-small;
|
||||
}
|
||||
|
||||
.copy-message {
|
||||
position: absolute;
|
||||
right: 44px;
|
||||
background-color: $ui-light-grey;
|
||||
border: solid 1px #e2e4ea;
|
||||
border-radius: 10px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from "react";
|
||||
|
||||
const Clipboard = () => {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M6.4 2.4a.8.8 0 0 1 .8-.8h1.6a.8.8 0 1 1 0 1.6H7.2a.8.8 0 0 1-.8-.8Z"
|
||||
fill="#6A67FE"
|
||||
/>
|
||||
<path
|
||||
d="M4.8 2.4A1.6 1.6 0 0 0 3.2 4v8.8a1.6 1.6 0 0 0 1.6 1.6h6.4a1.6 1.6 0 0 0 1.6-1.6V4a1.6 1.6 0 0 0-1.6-1.6 2.4 2.4 0 0 1-2.4 2.4H7.2a2.4 2.4 0 0 1-2.4-2.4Z"
|
||||
fill="#6A67FE"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
export default Clipboard;
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from "react";
|
||||
|
||||
const Eye = () => {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<g clipPath="url(#a)" fill="#6a67fe">
|
||||
<path d="M7.996 14C3.654 14 .246 8.6.102 8.37A.708.708 0 0 1 0 8c0-.133.036-.262.102-.37C.246 7.4 3.654 2 7.996 2c4.342 0 7.758 5.4 7.902 5.63A.708.708 0 0 1 16 8a.708.708 0 0 1-.102.37C15.754 8.6 12.346 14 7.996 14ZM2.198 8c.85 1.17 2.594 4 5.798 4 3.203 0 4.948-2.83 5.797-4-.85-1.17-2.602-4-5.797-4S3.022 6.83 2.198 8Z" />
|
||||
<path d="M6.606 10.075a2.5 2.5 0 0 0 1.387.425A2.507 2.507 0 0 0 10.5 8a2.5 2.5 0 1 0-3.894 2.075Z" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path fill="#fff" d="M0 0h16v16H0z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Eye;
|
||||
@@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
|
||||
const Pencil = () => {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<g clipPath="url(#a)" fill="#6a67fe">
|
||||
<path d="m9.88 2.688-8.803 8.804a.35.35 0 0 0-.091.16L.01 15.57a.348.348 0 0 0 .42.42l3.917-.976a.347.347 0 0 0 .16-.091l8.805-8.804-3.431-3.43ZM15.493 1.487l-.98-.98c-.655-.655-1.797-.654-2.451 0l-1.2 1.2 3.43 3.431 1.2-1.2c.328-.327.508-.763.508-1.226 0-.462-.18-.898-.507-1.225Z" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path fill="#fff" d="M0 0h16v16H0z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pencil;
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from "react";
|
||||
|
||||
const TrashCan = () => {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M13.25 2H10.5v-.5A1.5 1.5 0 0 0 9 0H7a1.5 1.5 0 0 0-1.5 1.5V2H2.75c-.69 0-1.25.56-1.25 1.25v1a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5v-1c0-.69-.56-1.25-1.25-1.25ZM6.5 1.5A.5.5 0 0 1 7 1h2a.5.5 0 0 1 .5.5V2h-3v-.5ZM2.449 5.75c-.09 0-.16.075-.156.164l.412 8.657A1.498 1.498 0 0 0 4.203 16h7.593c.802 0 1.46-.627 1.498-1.429l.413-8.657a.156.156 0 0 0-.156-.164H2.449ZM9.999 7a.5.5 0 1 1 1 0v6.5a.5.5 0 1 1-1 0V7ZM7.5 7a.5.5 0 1 1 1 0v6.5a.5.5 0 1 1-1 0V7ZM5 7a.5.5 0 1 1 1 0v6.5a.5.5 0 1 1-1 0V7Z"
|
||||
fill="#6a67fe"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default TrashCan;
|
||||
@@ -13,6 +13,10 @@ import Error from "./Error";
|
||||
import Success from "./Success";
|
||||
import Check from "./Check";
|
||||
import Plus from "./Plus";
|
||||
import Clipboard from "./Clipboard";
|
||||
import Eye from "./Eye";
|
||||
import Pencil from "./Pencil";
|
||||
import TrashCan from "./TrashCan";
|
||||
|
||||
// a mapping of the usable names of icons to the icon source.
|
||||
export const ICON_MAP = {
|
||||
@@ -20,6 +24,10 @@ export const ICON_MAP = {
|
||||
chevron: Chevron,
|
||||
check: Check,
|
||||
plus: Plus,
|
||||
clipboard: Clipboard,
|
||||
eye: Eye,
|
||||
pencil: Pencil,
|
||||
trash: TrashCan,
|
||||
success: Success,
|
||||
error: Error,
|
||||
darwin: Apple,
|
||||
|
||||
Reference in New Issue
Block a user