From 6df983642b4adf6c682bc4ede9db82f2ccbc94f6 Mon Sep 17 00:00:00 2001
From: Riku Rauhala <riku@rauhala.io>
Date: Wed, 11 Dec 2024 14:41:52 +0200
Subject: [PATCH] [Faculties] Add mini info button for sorting the data table

---
 services/frontend/src/common/InfoToolTips/faculty.ts         | 3 +++
 services/frontend/src/components/material/ExpandableRow.tsx  | 4 ++--
 .../src/components/material/Section/LoadingSkeleton.tsx      | 2 +-
 .../BasicInformationTab/InteractiveDataTable/index.tsx       | 5 ++++-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/services/frontend/src/common/InfoToolTips/faculty.ts b/services/frontend/src/common/InfoToolTips/faculty.ts
index 4fad85cff4..0cf04de26a 100644
--- a/services/frontend/src/common/InfoToolTips/faculty.ts
+++ b/services/frontend/src/common/InfoToolTips/faculty.ts
@@ -73,6 +73,9 @@ export const facultyToolTips: Record<string, string> = {
     start date of the bachelor programme and at the moment, they do not include any transferred credits.
     Thus, in these statistics some students have fewer credits than in reality.
   `,
+  interactiveDataTable: `
+    Sort bars in the yearly charts by programme code or other column values. Sorting is done inside the degree group.
+  `,
 }
 
 facultyToolTips.studentsStatsOfTheFaculty = studyProgrammeToolTips.studyTrackOverview.replace(
diff --git a/services/frontend/src/components/material/ExpandableRow.tsx b/services/frontend/src/components/material/ExpandableRow.tsx
index 56c3aee5da..032108719b 100644
--- a/services/frontend/src/components/material/ExpandableRow.tsx
+++ b/services/frontend/src/components/material/ExpandableRow.tsx
@@ -26,9 +26,9 @@ export const ExpandableRow = ({
   return (
     <TableRow>
       {yearArray?.map((value, index) => (
-        <TableCell align={index === 0 ? 'center' : 'right'} key={getKey(value, index)}>
+        <TableCell align="right" key={getKey(value, index)}>
           {index === 0 ? (
-            <Box alignItems="center" display="flex" justifyContent="center">
+            <Box alignItems="center" display="flex" justifyContent="left">
               <IconButton data-cy={`${cypress}${yearIndex}`} onClick={toggleVisibility} size="small">
                 {visible ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
               </IconButton>
diff --git a/services/frontend/src/components/material/Section/LoadingSkeleton.tsx b/services/frontend/src/components/material/Section/LoadingSkeleton.tsx
index 97f80c972c..eff931a7f5 100644
--- a/services/frontend/src/components/material/Section/LoadingSkeleton.tsx
+++ b/services/frontend/src/components/material/Section/LoadingSkeleton.tsx
@@ -3,7 +3,7 @@ import { Box, CircularProgress, Skeleton, Stack, Typography } from '@mui/materia
 export const LoadingSkeleton = () => {
   return (
     <Box sx={{ height: 400, position: 'relative' }}>
-      <Skeleton height={400} variant="rectangular" />
+      <Skeleton height={400} sx={{ borderRadius: 1 }} variant="rectangular" />
       <Box
         sx={{
           position: 'absolute',
diff --git a/services/frontend/src/pages/Faculties/BasicInformationTab/InteractiveDataTable/index.tsx b/services/frontend/src/pages/Faculties/BasicInformationTab/InteractiveDataTable/index.tsx
index 60fbf5fa33..8f23e33f82 100644
--- a/services/frontend/src/pages/Faculties/BasicInformationTab/InteractiveDataTable/index.tsx
+++ b/services/frontend/src/pages/Faculties/BasicInformationTab/InteractiveDataTable/index.tsx
@@ -1,7 +1,9 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel } from '@mui/material'
 import { Fragment, useState } from 'react'
 
+import { facultyToolTips } from '@/common/InfoToolTips'
 import { ExpandableRow } from '@/components/material/ExpandableRow'
+import { InfoBox } from '@/components/material/InfoBox'
 import { Section } from '@/components/material/Section'
 import { NameWithCode } from '@/shared/types'
 import { CollapsedStackedBar } from './CollapsedStackedBar'
@@ -115,7 +117,8 @@ export const InteractiveDataTable = ({
           <TableHead>
             <TableRow>
               {titles.map((title, index) => (
-                <TableCell align="right" key={title}>
+                <TableCell align={index === 0 ? 'left' : 'right'} key={title}>
+                  {index === 0 && <InfoBox content={facultyToolTips.interactiveDataTable} mini />}
                   <TableSortLabel
                     active={sorter === sorterNames[index]}
                     direction={sortDirection}