CSCFC4EMSCR- 261 List files on schema detail page

mscr-ui/public/locales/en/common.json

@@ -131,6 +131,15 @@
   "schema": {
     "created": "Created",
     "description": "Description",
+    "file": {
+      "actions": "Actions",
+      "added": "Added",
+      "format": "Format",
+      "label": "Schema files",
+      "name": "Filename",
+      "id":"ID",
+      "size":"Size"
+    },
     "format": "Format",
     "metadata": "Metadata",
     "metadata-and-files": "Metadata and files",

mscr-ui/public/locales/fi/common.json

@@ -131,6 +131,13 @@
   "schema": {
     "created": "",
     "description": "",
+    "file": {
+      "actions": "",
+      "added": "",
+      "format": "",
+      "label": "",
+      "name": ""
+    },
     "format": "",
     "metadata": "",
     "metadata-and-files": "",

mscr-ui/public/locales/sv/common.json

@@ -131,6 +131,13 @@
   "schema": {
     "created": "",
     "description": "",
+    "file": {
+      "actions": "",
+      "added": "",
+      "format": "",
+      "label": "",
+      "name": ""
+    },
     "format": "",
     "metadata": "",
     "metadata-and-files": "",

mscr-ui/src/common/components/schema-list/index.tsx

@@ -2,7 +2,16 @@ import { useTranslation } from 'next-i18next';
 import { ExternalLink, Button, Text, Label } from 'suomifi-ui-components';
 import { List, ListItem } from './schema-list.styles';
 import { Schema } from '@app/common/interfaces/schema.interface';
-import { Grid, InputLabel } from '@mui/material';
+import {
+  Grid,
+  InputLabel,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@mui/material';
 import router from 'next/router';
 import { getLanguageVersion } from '@app/common/utils/get-language-version';
 
@@ -13,13 +22,7 @@ export interface SchemaListProps {
   deleteDisabled: string[] | boolean;
 }
 
-export default function SchemaList({
-  items,
-  handleRemoval,
-
-  labelRow,
-  deleteDisabled,
-}: SchemaListProps) {
+export default function SchemaList({ items }: SchemaListProps) {
   const { t } = useTranslation('admin');
   const lang = router.locale ?? '';
 
@@ -29,81 +32,50 @@ export default function SchemaList({
   }
 
   function handleClick(pid: string): void {
-    console.log(pid);
     // will go the schema detail page
-    router.push(`/schema/${pid}`);
+    if (pid) {
+      router.push(`/schema/${pid}`);
+    }
   }
 
   return (
     //Creating Header row
 
     <div>
-      <List className="header-list">
-        <ListItem>
-          <Grid container spacing={2} style={{ fontWeight: 'bold' }}>
-            <Grid item xs={2}>
-              {'Name'}
-            </Grid>
-            <Grid item xs={2}>
-              {'Namespace'}
-            </Grid>
-            <Grid item xs={2}>
-              {'Status'}
-            </Grid>
-            <Grid item xs={2}>
-              {'Revision'}
-            </Grid>
-            <Grid item xs={2}>
-              {'PID'}
-            </Grid>
-            <Grid item xs={2}></Grid>
-          </Grid>
-        </ListItem>
-      </List>
-      <List className="inline-list">
-        {items &&
-          items.map((item) => (
-            <ListItem
-              key={item.pid}
-              onClick={() => handleClick(item.pid)}
-              onMouseEnter={() => item.onMouseEnter && item.onMouseEnter()}
-              onMouseLeave={() => item.onMouseLeave && item.onMouseLeave()}
-              onKeyDown={(e) => e.key === 'Enter' && item.onClick()}
-            >
-              <Grid container spacing={2}>
-                <Grid item xs={2}>
-                  {getLanguageVersion({ data: item.label, lang })}
-                </Grid>
-                <Grid item xs={2}>
-                  {item.namespace}
-                </Grid>
-                <Grid item xs={2}>
-                  {item.state}
-                </Grid>
-                <Grid item xs={2}>
-                  {item.versionLabel}
-                </Grid>
-                <Grid item xs={2}>
-                  {item.pid}
-                </Grid>
-                <Grid item xs={2}>
-                  {Array.isArray(deleteDisabled) &&
-                  deleteDisabled.includes(item.pid) ? (
-                    <></>
-                  ) : (
-                    <Button
-                      variant="secondaryNoBorder"
-                      icon="remove"
-                      onClick={() => handleRemoval(item.pid)}
-                    >
-                      {t('remove')}
-                    </Button>
-                  )}
-                </Grid>
-              </Grid>
-            </ListItem>
-          ))}
-      </List>
+      <TableContainer>
+        <Table aria-label={'Schemas'}>
+          <TableHead>
+            <TableRow>
+              <TableCell> {'Name'}</TableCell>
+              <TableCell>{'Namespace'}</TableCell>
+              <TableCell>{'Status'}</TableCell>
+              <TableCell>{'Revision'}</TableCell>
+              <TableCell>{'PID'}</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {/*TODO: Use the below template to create lines for files*/}
+            {items &&
+              items.map((item) => (
+                <TableRow
+                  key={item.pid}
+                  hover={true}
+                  onClick={() => handleClick(item.pid)}
+                  sx={{ cursor: 'pointer' }}
+                >
+                  <TableCell>
+                    {' '}
+                    {getLanguageVersion({ data: item.label, lang })}
+                  </TableCell>
+                  <TableCell>{item.namespace}</TableCell>
+                  <TableCell>{item.state}</TableCell>
+                  <TableCell>{item.versionLabel}</TableCell>
+                  <TableCell>{item.pid}</TableCell>
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
     </div>
   );
 }

mscr-ui/src/common/components/schema-list/schema-list.styles.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 
+
 export const List = styled.div`
   display: flex;
   flex-direction: column;
@@ -12,6 +13,9 @@ export const List = styled.div`
   .header-list {
     font-weight: bold;
   }
+  .inline-list{
+
+  }
 `;
 
 export const ListItem = styled.div`
@@ -33,4 +37,15 @@ export const ListItem = styled.div`
   .fi-link--external {
     font-size: 16px;
   }
+  &:hover {
+    background-color: ${(props) => props.theme.suomifi.colors.highlightBase};
+    color: ${(props) => props.theme.suomifi.colors.whiteBase};
+    border-radius: 2px;
+    cursor: pointer;
+
+    .fi-text {
+      color: ${(props) => props.theme.suomifi.colors.whiteBase};
+    }
+  }
 `;
+

mscr-ui/src/common/components/schema/schema.slice.tsx

@@ -53,6 +53,13 @@ export const schemaApi = createApi({
         method: 'GET',
       }),
     }),
+    // TODO: What is the return type?
+    getSchemaOriginal: builder.query<undefined, string>({
+      query: (pid) => ({
+        url: `/schema/${pid}/original`,
+        method: 'GET',
+      }),
+    }),
     postSchema: builder.mutation<
       string,
       {
@@ -86,6 +93,7 @@ export const {
   usePutSchemaMutation,
   useGetSchemaQuery,
   useGetSchemaWithRevisionsQuery,
+  useGetSchemaOriginalQuery,
   usePostSchemaMutation,
   useDeleteSchemaMutation,
   useGetSchemasQuery,

mscr-ui/src/common/components/table/index.tsx

@@ -43,15 +43,14 @@ export default function BasicTable() {
   return (
     <div>
       {'Schemas'}
-      <Separator isLarge />
       <SchemaList
         items={schemas ?? []}
         handleRemoval={function (value: string): void {
           throw new Error('Function not implemented.');
         }}
         deleteDisabled={false}
       ></SchemaList>
-      <Separator isLarge />
+
       {'Crosswalks'}
       <Separator isLarge />
 

mscr-ui/src/common/interfaces/schema.interface.ts

@@ -1,3 +1,5 @@
+import { ExposureTwoTone } from "@mui/icons-material";
+
 export interface Schema {
   namespace?: string;
   pid?: string;
@@ -35,6 +37,15 @@ export interface Revision {
 
 export interface SchemaWithVersionInfo extends Schema {
   revisions: Revision[];
+  fileMetadata?: SchemaFileData[];
+}
+
+export interface SchemaFileData{
+  id?: string;
+  contentType?: string,
+  size?: number;
+  fileID?: number;
+  name?: string;
 }
 
 export interface Organization {

mscr-ui/src/modules/schema-form/index.tsx

@@ -79,6 +79,7 @@ export default function SchemaForm({
         >
           <DropdownItem value={'JSONSCHEMA'}>{'JSON'}</DropdownItem>
           <DropdownItem value={'CSV'}>{'CSV'}</DropdownItem>
+          <DropdownItem value={'PDF'}>{'PDF'}</DropdownItem>
         </Dropdown>
       </div>
     );

mscr-ui/src/modules/schema-form/schema-form-modal.tsx

@@ -152,7 +152,7 @@ export default function SchemaFormModal({ refetch }: SchemaFormModalProps) {
           <FileDropArea
             setFileData={setFileData}
             setIsValid={setIsValid}
-            validFileTypes={['json', 'csv']}
+            validFileTypes={['json', 'csv','pdf']}
             translateFileUploadError={translateFileUploadError}
           />
           <Separator isLarge></Separator>

mscr-ui/src/modules/schema-view/index.tsx

@@ -27,6 +27,8 @@ export default function SchemaView({
     // isError,
     // error,
   } = useGetSchemaWithRevisionsQuery(schemaId);
+  // TODO: I can't make sense of the format this returns, and how it would be offered for download
+
   const [selectedTab, setSelectedTab] = useState(0);
 
   function a11yProps(index: number) {
@@ -71,7 +73,8 @@ export default function SchemaView({
 
 
         {selectedTab === 0 && (
-          <MetadataAndFiles schemaDetails={schemaDetails} />
+              <MetadataAndFiles schemaDetails={schemaDetails} schemaFiles={schemaDetails?.fileMetadata
+              } />
         )}
             {selectedTab === 1 && <VersionHistory schemaDetails={schemaDetails} />}
             </Grid>