diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.sass b/ui/src/components/Modals/AddUserModal/AddUserModal.sass index 71f71a372..1ef2939f4 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,22 @@ .search-workspace width: 186px -.u-margin-left - margin-left : 20px +@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) + @include label-size + & .MuiInputLabel-outlined.MuiInputLabel-shrink + transform: translate(14px, -6px) scale(0.75); + @include label-size + + &.MuiOutlinedInput-input, &.MuiSelect-outlined, + padding-top: 5.5px + padding-bottom: 5.5px + @include label-size diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx index 451f27c9b..5fe27d1d0 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; } @@ -38,7 +37,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) @@ -51,19 +50,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}}) - //await api.getWorkspaces() - setWorkspaces(workspacesList) - + // const workspacesList = [ + // { + // "id": "f54b18ec-aa15-4b2c-a4d5-8eda17e44c93", + // "name": "sock-shop" + // }, + // { + // "id": "c7ad9158-d840-46c0-b5ce-2487c013723f", + // "name": "test" + // } + // ] + + 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") } @@ -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") @@ -106,7 +105,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() } @@ -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 && + }
@@ -218,21 +214,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/UI/Table.tsx b/ui/src/components/UI/Table.tsx index 02498a824..53cae6679 100644 --- a/ui/src/components/UI/Table.tsx +++ b/ui/src/components/UI/Table.tsx @@ -7,7 +7,7 @@ export interface ColsType { field:string, cellClassName?: string, header:string, - width?:number, + width?:string, getCellClassName?:(field:string,value : any) => 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 9045fa108..9021c7074 100644 --- a/ui/src/components/UserSettings/UserSettings.tsx +++ b/ui/src/components/UserSettings/UserSettings.tsx @@ -22,7 +22,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/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/api.js b/ui/src/helpers/api.js index 33d46ffa9..65349201c 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; } 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",