From ba49f7c1d5dd417d6cd89afa88ebb2119dc7c4ba Mon Sep 17 00:00:00 2001 From: Leon <> Date: Mon, 31 Jan 2022 20:15:31 +0200 Subject: [PATCH 1/3] changes --- .../Modals/AddUserModal/AddUserModal.sass | 31 ++++++++----- .../Modals/AddUserModal/AddUserModal.tsx | 44 +++++++++---------- ui/src/components/assets/copy-enabled.svg | 25 ++++------- ui/src/helpers/commonStyle.ts | 3 ++ 4 files changed, 52 insertions(+), 51 deletions(-) diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.sass b/ui/src/components/Modals/AddUserModal/AddUserModal.sass index 71f71a372..39b0ff0a4 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.sass +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.sass @@ -1,13 +1,13 @@ @import '../../../variables.module' @mixin generate-icon - display: block - text-indent: -9999px - width: 26px - height: 26px - background-repeat: no-repeat - background-size: 26px - margin-right: 10px + display: block; + text-indent: -9999px; + width: 17px; + height: 17px; + background-repeat: no-repeat; + background-size: 19px; + background-size: cover; .invite-link &-row @@ -24,8 +24,10 @@ &-field width: 80% max-width: 435px - + .generate-link-button + &.MuiButtonBase-root + padding: 6.5px 13px &:disabled background: #BCC6DD; .generate-link-button__icon @@ -55,7 +57,14 @@ .search-workspace width: 186px -.u-margin-left - margin-left : 20px - +.u-input-padding + & .MuiInputLabel-outlined.MuiInputLabel-marginDense + transform: translate(14px, 8px) scale(1); + & .MuiInputLabel-outlined.MuiInputLabel-shrink + transform: translate(14px, -6px) scale(0.75); + font-size: 12px; + &.MuiOutlinedInput-input, &.MuiSelect-outlined, + padding-top: 5.5px + padding-bottom: 5.5px + font-size: 12px; \ No newline at end of file diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx index 39ce42118..a0f78a8fd 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx @@ -96,7 +96,6 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD const updateUser = async() =>{ try { const res = await api.updateUser(userDataModel) - onClose() toast.success("User has been modified") } catch (error) { toast.error("Error accured modifing user") @@ -173,27 +172,11 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD const handleCopyinviteLink = (e) => {navigator.clipboard.writeText(invite.link)} const addUsermodalCustomActions = <> - {showGenerateButton() && } - { - isEditMode && - } -
- {isShowInviteLink() && +
+ {isShowInviteLink() && Invite link - @@ -202,9 +185,22 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD } label="Invite link"/> } - {!isEditMode && isShowInviteLink() && } + {!isEditMode && isShowInviteLink() && } + } + {isEditMode && + }
@@ -226,9 +222,9 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD render={({ field }) => } /> */} - + User Role - None diff --git a/ui/src/components/assets/copy-enabled.svg b/ui/src/components/assets/copy-enabled.svg index d3c2fbb0c..7d8127163 100644 --- a/ui/src/components/assets/copy-enabled.svg +++ b/ui/src/components/assets/copy-enabled.svg @@ -1,17 +1,10 @@ - - - - - - - - - - - - - - - - + + + + + + + + + diff --git a/ui/src/helpers/commonStyle.ts b/ui/src/helpers/commonStyle.ts index 09a616635..d26e70a08 100644 --- a/ui/src/helpers/commonStyle.ts +++ b/ui/src/helpers/commonStyle.ts @@ -13,6 +13,9 @@ export const useCommonStyles = makeStyles(() => ({ "&:hover": { backgroundColor: "#205cf5", }, + "&:disabled":{ + backgroundColor: "rgba(0, 0, 0, 0.26)" + } }, outlinedButton: { backgroundColor: "transparent", From 2f9bd203d3a8cc470f3f672f6248d1b32e5fc11f Mon Sep 17 00:00:00 2001 From: Leon <> Date: Tue, 1 Feb 2022 14:41:23 +0200 Subject: [PATCH 2/3] changes --- .../Modals/AddUserModal/AddUserModal.sass | 14 +++- .../Modals/AddUserModal/AddUserModal.tsx | 67 +++++++++++-------- .../Pages/SettingsPage/SettingsPage.sass | 6 +- .../Pages/TrafficPage/TrafficPage.tsx | 5 +- ui/src/components/UI/Table.tsx | 6 +- ui/src/components/UI/style/Table.sass | 8 ++- .../components/UserSettings/UserSettings.tsx | 2 +- ui/src/helpers/api.js | 2 +- 8 files changed, 66 insertions(+), 44 deletions(-) diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.sass b/ui/src/components/Modals/AddUserModal/AddUserModal.sass index 39b0ff0a4..1ef2939f4 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.sass +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.sass @@ -57,14 +57,22 @@ .search-workspace width: 186px +@mixin label-size + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 15px; + .u-input-padding & .MuiInputLabel-outlined.MuiInputLabel-marginDense - transform: translate(14px, 8px) scale(1); + transform: translate(14px, 8px) scale(1) + @include label-size & .MuiInputLabel-outlined.MuiInputLabel-shrink transform: translate(14px, -6px) scale(0.75); - font-size: 12px; + @include label-size &.MuiOutlinedInput-input, &.MuiSelect-outlined, padding-top: 5.5px padding-bottom: 5.5px - font-size: 12px; \ No newline at end of file + @include label-size + diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx index a0f78a8fd..502ad5a8c 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx @@ -1,4 +1,4 @@ -import { Button, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, OutlinedInput, Select } from '@material-ui/core'; +import { Button, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, OutlinedInput,Select } from '@material-ui/core'; import { FC, useEffect, useState } from 'react'; import Api from '../../../helpers/api'; @@ -8,12 +8,11 @@ import {toast} from "react-toastify"; import SelectList from '../../UI/SelectList'; import './AddUserModal.sass'; import spinner from "../../assets/spinner.svg"; -import { values } from 'mobx'; export type UserData = { role:string; username : string; - workspace : string; + workspaceId : string; userId: string; } @@ -37,7 +36,7 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD const [disable, setDisable] = useState(true); const [editMode, setEditMode] = useState(isEditMode); const [invite, setInvite] = useState({sent:false,isSuceeded:false,link : null}); - const roles = [{key:"1",value:"Admin"},{key:"2",value:"User"}] + const roles = [{key:"1",value:"admin"},{key:"2",value:"user"}] const classes = useCommonStyles() const [userDataModel, setUserData] = useState(userData as UserData) @@ -50,20 +49,20 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD useEffect(() => { (async () => { try { - const workspacesList = [ - { - "id": "f54b18ec-aa15-4b2c-a4d5-8eda17e44c93", - "name": "sock-shop" - }, - { - "id": "c7ad9158-d840-46c0-b5ce-2487c013723f", - "name": "test" - } - ].map((obj) => {return {key:obj.id, value:obj.name,isChecked:false}}) + // const workspacesList = [ + // { + // "id": "f54b18ec-aa15-4b2c-a4d5-8eda17e44c93", + // "name": "sock-shop" + // }, + // { + // "id": "c7ad9158-d840-46c0-b5ce-2487c013723f", + // "name": "test" + // } + // ] - //await api.getWorkspaces() - setWorkspaces(workspacesList) - + const list = await api.getWorkspaces() + const workspacesList = list.map((obj) => {return {key:obj.id, value:obj.name,isChecked:false}}) + setWorkspaces(workspacesList) } catch (e) { toast.error("Error finding workspaces") } @@ -105,7 +104,7 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD const workspaceChange = (workspaces) => { //setWorkspaces(newVal); const selectedWorksapce = workspaces.find(x=> x.isChecked) - const data = {...userDataModel, workspace : selectedWorksapce.key} + const data = {...userDataModel, workspaceId : selectedWorksapce.key} setUserData(data) setGenarateDisabledState() } @@ -214,21 +213,35 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD

DETAILS

- - + */} + {/*
+ + +
*/} + + User Name + + {/* } /> */} - - User Role - + {roles.map((role) => ( {role.value} diff --git a/ui/src/components/Pages/SettingsPage/SettingsPage.sass b/ui/src/components/Pages/SettingsPage/SettingsPage.sass index 846289ff7..2a697e7a5 100644 --- a/ui/src/components/Pages/SettingsPage/SettingsPage.sass +++ b/ui/src/components/Pages/SettingsPage/SettingsPage.sass @@ -1,7 +1,7 @@ @import "../../../variables.module" @mixin tab-container - max-width: 513px + width: clamp(50%,513px,80%); margin: 0 auto .settings-page @@ -19,7 +19,7 @@ .header-section - + background-color: $header-background-color &__container @include tab-container @@ -34,6 +34,8 @@ .tab-content padding-top: 30px; + background-color: $data-background-color + height: 100vh; &__container @include tab-container \ No newline at end of file diff --git a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx index b350bcae9..9bfbdb1c5 100644 --- a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx +++ b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx @@ -294,10 +294,7 @@ export const TrafficPage: React.FC = ({setAnalyzeStatus}) => { }
- {window["isOasEnabled"] && } + {
string }; @@ -43,7 +43,7 @@ export const Table: React.FC = ({rows, cols, onRowDelete, onRowEdit, {cols?.map((col)=> { - return {col.header} + return {col.header} })} @@ -61,7 +61,7 @@ export const Table: React.FC = ({rows, cols, onRowDelete, onRowEdit, tableRows?.map((rowData,index) => { return {cols.map((col,index) => { - return + return {rowData[col.field]} diff --git a/ui/src/components/UI/style/Table.sass b/ui/src/components/UI/style/Table.sass index 3fe00b952..011e2cb42 100644 --- a/ui/src/components/UI/style/Table.sass +++ b/ui/src/components/UI/style/Table.sass @@ -9,6 +9,9 @@ overflow-y: auto display: block + &__tbody &__tr:hover + background: $header-background-color + &__th color: $blue-gray text-align: left @@ -41,9 +44,7 @@ line-height: 15px; color: $light-gray; - &__tr:hover - background: #F7F9FC - + &__tr:hover & .mui-table__row-actions &--delete cursor: pointer; @@ -67,4 +68,5 @@ @mixin row-actions display: flex justify-content: flex-end + \ No newline at end of file diff --git a/ui/src/components/UserSettings/UserSettings.tsx b/ui/src/components/UserSettings/UserSettings.tsx index 1aeb90a9a..b14aba6bb 100644 --- a/ui/src/components/UserSettings/UserSettings.tsx +++ b/ui/src/components/UserSettings/UserSettings.tsx @@ -31,7 +31,7 @@ export const UserSettings : React.FC = ({}) => { const [usersRows, setUserRows] = useState([]); const [userData,userUserData] = useState({} as UserData) - const cols : ColsType[] = [{field : "username",header:"User"}, + const cols : ColsType[] = [{field : "username",header:"User", width: '35%'}, {field : "role",header:"Role"}, {field : "status",header:"Status",getCellClassName : (field, val) =>{ return val === InviteStatus.active ? "status--active" : "status--pending" diff --git a/ui/src/helpers/api.js b/ui/src/helpers/api.js index a9adc2155..b0b6c3762 100644 --- a/ui/src/helpers/api.js +++ b/ui/src/helpers/api.js @@ -79,7 +79,7 @@ export default class Api { } getWorkspaces = async() =>{ - const response = await this.client.get(`/workspace`); + const response = await this.client.get(`/workspace/`); return response.data; } From ef9af937c3b3f369be32478b6fecaf6c0b9f7b91 Mon Sep 17 00:00:00 2001 From: Leon <> Date: Tue, 1 Feb 2022 14:45:12 +0200 Subject: [PATCH 3/3] revert trafic page --- ui/src/components/Pages/TrafficPage/TrafficPage.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx index 9bfbdb1c5..b350bcae9 100644 --- a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx +++ b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx @@ -294,7 +294,10 @@ export const TrafficPage: React.FC = ({setAnalyzeStatus}) => { }
- + {window["isOasEnabled"] && } {