From 73a88ebc8e0307bf0464e4068bd7ee082526e21b Mon Sep 17 00:00:00 2001
From: Katarina Platkova <xplatkov@fi.muni.cz>
Date: Thu, 16 May 2024 10:00:38 +0200
Subject: [PATCH] Buttons and language
---
.../DefinitionManager/components/Definition.tsx | 11 +++++++----
frontend/src/users/DefinitionAssignment/index.tsx | 8 ++++----
frontend/src/users/ExerciseAssignment/index.tsx | 8 ++++----
frontend/src/users/UserDetail/UserDetailRow.tsx | 12 +++++-------
frontend/src/users/UsersSelection/index.tsx | 14 ++++++++++----
frontend/src/users/utilities.ts | 2 +-
6 files changed, 31 insertions(+), 24 deletions(-)
diff --git a/frontend/src/exercisepanel/DefinitionManager/components/Definition.tsx b/frontend/src/exercisepanel/DefinitionManager/components/Definition.tsx
index 631ff047d..6f5967544 100644
--- a/frontend/src/exercisepanel/DefinitionManager/components/Definition.tsx
+++ b/frontend/src/exercisepanel/DefinitionManager/components/Definition.tsx
@@ -1,5 +1,5 @@
import { useNavigate } from '@/router'
-import { Button, Card } from '@blueprintjs/core'
+import { Button, ButtonGroup, Card } from '@blueprintjs/core'
import type { Definition } from '@inject/graphql/fragments/Definition.generated'
import { useDeleteDefinition } from '@inject/graphql/mutations/DeleteDefinition.generated'
import { GetDefinitionsDocument } from '@inject/graphql/queries/GetDefinitions.generated'
@@ -50,8 +50,11 @@ const DefinitionComp: FC<DefinitionProps> = ({ definition }) => {
<div>
<h3>{name || id}</h3>
</div>
-
- <div style={{ marginTop: '1rem', alignSelf: 'end' }}>
+ <ButtonGroup
+ vertical
+ alignText='left'
+ style={{ marginTop: '1rem', alignSelf: 'end' }}
+ >
<Button type='button' onClick={handleRemove} icon='cross'>
Remove
</Button>
@@ -67,7 +70,7 @@ const DefinitionComp: FC<DefinitionProps> = ({ definition }) => {
>
Access
</Button>
- </div>
+ </ButtonGroup>
</Card>
)
}
diff --git a/frontend/src/users/DefinitionAssignment/index.tsx b/frontend/src/users/DefinitionAssignment/index.tsx
index c597c4ee1..70d070084 100644
--- a/frontend/src/users/DefinitionAssignment/index.tsx
+++ b/frontend/src/users/DefinitionAssignment/index.tsx
@@ -40,7 +40,7 @@ const DefinitionAssignment: FC<DefinitionAssignmentProps> = ({
refetchQueries: [GetDefinitionDocument],
})
.then(() => {
- notify('Instructors assigned to defition')
+ notify('Instructors assigned to the defition')
})
.catch(() => {
notify('Definition access asignment failed', {
@@ -104,14 +104,14 @@ const DefinitionAssignment: FC<DefinitionAssignmentProps> = ({
users={data?.definition.userSet?.filter(notEmpty) || []}
onRemove={(ids: string[]) => handleRemoveButton(ids)}
onAssign={() => setListView(prev => !prev)}
- assignTitle='Assign instructors'
- removeTitle='Remove access for selected'
+ assignTitle='Add'
+ removeTitle='Remove'
/>
) : (
<UserTableSelection
onBack={() => setListView(prev => !prev)}
onAssign={(ids: string[]) => handleAssignButton(ids)}
- assignTitle='Add instructors'
+ assignTitle='Add selected'
/>
)}
</SectionCard>
diff --git a/frontend/src/users/ExerciseAssignment/index.tsx b/frontend/src/users/ExerciseAssignment/index.tsx
index 676e9706d..b02623f98 100644
--- a/frontend/src/users/ExerciseAssignment/index.tsx
+++ b/frontend/src/users/ExerciseAssignment/index.tsx
@@ -153,8 +153,8 @@ const ExerciseAssignment: FC<ExerciseAssignmentProps> = ({ exerciseId }) => {
setListView(prev => !prev)
setCurrentTeam(null)
}}
- assignTitle='Assign instructors'
- removeTitle='Remove selected'
+ assignTitle='Add'
+ removeTitle='Remove'
/>
</SectionCard>
</Section>
@@ -174,8 +174,8 @@ const ExerciseAssignment: FC<ExerciseAssignmentProps> = ({ exerciseId }) => {
setListView(prev => !prev)
setCurrentTeam(team.id)
}}
- assignTitle='Assign trainees'
- removeTitle='Remove selected'
+ assignTitle='Add'
+ removeTitle='Remove'
/>
</SectionCard>
</Section>
diff --git a/frontend/src/users/UserDetail/UserDetailRow.tsx b/frontend/src/users/UserDetail/UserDetailRow.tsx
index fa449c542..373a67779 100644
--- a/frontend/src/users/UserDetail/UserDetailRow.tsx
+++ b/frontend/src/users/UserDetail/UserDetailRow.tsx
@@ -8,12 +8,10 @@ interface UserDetailRowProps {
value: UserValueType
}
-const UserDetailRow: FC<UserDetailRowProps> = ({ name, value }) => {
- return (
- <div className={detailRow}>
- <span className={detailRowName}>{name}: </span> {formatValue(value)}
- </div>
- )
-}
+const UserDetailRow: FC<UserDetailRowProps> = ({ name, value }) => (
+ <div className={detailRow}>
+ <span className={detailRowName}>{name}: </span> {formatValue(value)}
+ </div>
+)
export default UserDetailRow
diff --git a/frontend/src/users/UsersSelection/index.tsx b/frontend/src/users/UsersSelection/index.tsx
index ad65ccf4b..aef978854 100644
--- a/frontend/src/users/UsersSelection/index.tsx
+++ b/frontend/src/users/UsersSelection/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Checkbox, NonIdealState } from '@blueprintjs/core'
+import { Button, ButtonGroup, Checkbox, NonIdealState } from '@blueprintjs/core'
import type { RestrictedUser } from '@inject/graphql/fragments/RestrictedUser.generated'
import type { FC } from 'react'
import { useState } from 'react'
@@ -47,7 +47,7 @@ const UsersSelection: FC<UserSelectionProps> = ({
/>
))}
</div>
- <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+ <ButtonGroup style={{ display: 'flex', justifyContent: 'space-between' }}>
<Button
onClick={() => {
onRemove(
@@ -55,11 +55,17 @@ const UsersSelection: FC<UserSelectionProps> = ({
)
setSelectedUsers(new Array(users.length).fill(false))
}}
+ icon='trash'
text={removeTitle}
disabled={selectedUsers.every(val => !val)}
/>
- <Button intent='primary' onClick={onAssign} text={assignTitle} />
- </div>
+ <Button
+ intent='primary'
+ onClick={onAssign}
+ icon='plus'
+ text={assignTitle}
+ />
+ </ButtonGroup>
</>
)
}
diff --git a/frontend/src/users/utilities.ts b/frontend/src/users/utilities.ts
index 172b630bb..dc5f70c5a 100644
--- a/frontend/src/users/utilities.ts
+++ b/frontend/src/users/utilities.ts
@@ -1,5 +1,5 @@
import { formatTimestamp } from '@/analyst/utilities'
-import { UserValueType } from './UserTable'
+import type { UserValueType } from './UserTable'
export const formatValue = (value: UserValueType) => {
if (typeof value === 'string') return value
--
GitLab