From fef7863810acfb65264ba85d5e78930eeeba5845 Mon Sep 17 00:00:00 2001 From: Alex <33497058+bexsoft@users.noreply.github.com> Date: Mon, 2 May 2022 19:01:34 -0500 Subject: [PATCH] Adjusted edit / delete tags modal styles (#1939) --- portal-ui/src/icons/AddNewTagIcon.tsx | 58 ++----- portal-ui/src/icons/EditTagIcon.tsx | 42 +++++ portal-ui/src/icons/index.ts | 1 + .../Objects/ObjectDetails/TagsModal.tsx | 153 ++++++++++++------ .../FormComponents/common/styleLibrary.ts | 2 +- .../screens/Console/Common/IconsScreen.tsx | 6 + .../tests/permissions-3/bucketObjectTags.ts | 6 +- 7 files changed, 171 insertions(+), 97 deletions(-) create mode 100644 portal-ui/src/icons/EditTagIcon.tsx diff --git a/portal-ui/src/icons/AddNewTagIcon.tsx b/portal-ui/src/icons/AddNewTagIcon.tsx index 9f0e353da..03e8d174d 100644 --- a/portal-ui/src/icons/AddNewTagIcon.tsx +++ b/portal-ui/src/icons/AddNewTagIcon.tsx @@ -20,57 +20,23 @@ import { SVGProps } from "react"; const AddNewTagIcon = (props: SVGProps) => ( - - - - - - - - - - - - - - - - + + + + + - diff --git a/portal-ui/src/icons/EditTagIcon.tsx b/portal-ui/src/icons/EditTagIcon.tsx new file mode 100644 index 000000000..7d864a262 --- /dev/null +++ b/portal-ui/src/icons/EditTagIcon.tsx @@ -0,0 +1,42 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2021 MinIO, 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 . + +import * as React from "react"; +import { SVGProps } from "react"; + +const EditTagIcon = (props: SVGProps) => ( + + + + + + + + +); + +export default EditTagIcon; diff --git a/portal-ui/src/icons/index.ts b/portal-ui/src/icons/index.ts index 751d43407..d55ec99ad 100644 --- a/portal-ui/src/icons/index.ts +++ b/portal-ui/src/icons/index.ts @@ -188,3 +188,4 @@ export { default as NetworkGetIcon } from "./NetworkGetIcon"; export { default as NetworkPutIcon } from "./NetworkPutIcon"; export { default as RemoveAllIcon } from "./RemoveAllIcon"; export { default as CancelledIcon } from "./CancelledIcon"; +export { default as EditTagIcon } from "./EditTagIcon"; diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/TagsModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/TagsModal.tsx index 1d2e9358d..35bd5dca6 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/TagsModal.tsx +++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/TagsModal.tsx @@ -33,7 +33,11 @@ import { modalStyleUtils, spacingUtils, } from "../../../../Common/FormComponents/common/styleLibrary"; -import { TagsIcon } from "../../../../../../icons"; +import { + AddNewTagIcon, + DisabledIcon, + EditTagIcon, +} from "../../../../../../icons"; import { IFileInfo } from "./types"; import { IAM_SCOPES } from "../../../../../../common/SecureComponent/permissions"; import { SecureComponent } from "../../../../../../common/SecureComponent"; @@ -56,9 +60,32 @@ const styles = (theme: Theme) => fontSize: 18, fontWeight: "bold", color: "#000", - margin: "20px 0", + margin: "35px 0", paddingBottom: 15, - borderBottom: "#E2E2E2 2px solid", + display: "flex", + alignItems: "center", + "& > svg": { + marginRight: 10, + }, + }, + tagsForLabel: { + fontSize: 16, + margin: "20px 0 30px", + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "ellipsis", + width: "100%", + }, + currentTagsContainer: { + fontSize: 14, + fontWeight: "normal", + }, + noTagsForObject: { + color: "#858585", + }, + deleteTag: { + color: "#C83B51", + marginLeft: 5, }, ...formFieldStyles, ...modalStyleUtils, @@ -152,24 +179,42 @@ const AddTagModal = ({ setDeleteEnabled(false); }; + const tagsFor = (plural: boolean) => ( +
+ Tag{plural ? "s" : ""} for: {currentItem} +
+ ); + return ( Delete Tag + ) : ( + `Edit Tags` + ) + } onClose={() => { onCloseAndUpdate(true); }} - titleIcon={} + titleIcon={ + deleteEnabled ? ( + + ) : ( + + ) + } > {deleteEnabled ? ( + {tagsFor(false)} Are you sure you want to delete the tag{" "} - + {deleteKey} : {deleteLabel} - {" "} - from {currentItem}? + {" "}? @@ -200,44 +246,56 @@ const AddTagModal = ({ sx={{ display: "flex", flexFlow: "column", + width: "100%", }} > - Current Tags: - {currTagKeys.length === 0 ? "No Tags for this object" : ""} - - {currTagKeys.map((tagKey: string, index: number) => { - const tag = get(currentTags, `${tagKey}`, ""); - if (tag !== "") { - return ( - - + Current Tags: +
+ {currTagKeys.length === 0 ? ( + + There are no tags for this object + + ) : ( + + )} + + {currTagKeys.map((tagKey: string, index: number) => { + const tag = get(currentTags, `${tagKey}`, ""); + if (tag !== "") { + return ( + } - onDelete={() => { - onDeleteTag(tagKey, tag); - }} - /> - - ); - } - return null; - })} - + > + } + onDelete={() => { + onDeleteTag(tagKey, tag); + }} + /> + + ); + } + return null; + })} + + - Add New Tag + Add New Tag - Save new Tag + Save diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts index 1be7408b2..f4df663dc 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts +++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts @@ -1205,7 +1205,7 @@ export const deleteDialogStyles = { justifyContent: "space-between", }, titleText: { - fontSize: "1rem", + fontSize: 20, fontWeight: 600, display: "flex", alignItems: "center", diff --git a/portal-ui/src/screens/Console/Common/IconsScreen.tsx b/portal-ui/src/screens/Console/Common/IconsScreen.tsx index 82826b4c2..794c5a024 100644 --- a/portal-ui/src/screens/Console/Common/IconsScreen.tsx +++ b/portal-ui/src/screens/Console/Common/IconsScreen.tsx @@ -409,6 +409,12 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => { EditIcon + + +
+ EditTagIcon + +
diff --git a/portal-ui/tests/permissions-3/bucketObjectTags.ts b/portal-ui/tests/permissions-3/bucketObjectTags.ts index 85f85149d..577249164 100644 --- a/portal-ui/tests/permissions-3/bucketObjectTags.ts +++ b/portal-ui/tests/permissions-3/bucketObjectTags.ts @@ -47,12 +47,12 @@ test .click(Selector("button").withText("Tags")) .typeText("#newTagKey", "tag1") .typeText("#newTagLabel", "test") - .click(Selector("button:enabled").withText("Save New Tag")) + .click(Selector("#saveTag:enabled")) .click(Selector("button").withText("Tags")) .expect(Selector(".MuiChip-label").withText("tag1 : test").exists) .ok() .click(Selector(".MuiChip-deleteIcon")) - .click(Selector("button").withText("Yes")) + .click(Selector("#deleteTag")) .click(Selector("button").withText("Tags")) .expect(Selector(".MuiChip-label").withText("tag1 : test").exists) .notOk(); @@ -85,7 +85,7 @@ test .click(Selector("button").withText("Tags")) .typeText("#newTagKey", "tag1") .typeText("#newTagLabel", "test") - .click(Selector("button:enabled").withText("Save New Tag")) + .click(Selector("#saveTag:enabled")) .click(Selector("button").withText("Tags")) .expect(Selector(".MuiChip-label").withText("tag1 : test").exists) .notOk();