table: include external files table

src/lib/components/form/moldure/search/FilterBuilder/serializers/StaticQueryStringSerializer.js

@@ -38,11 +38,7 @@ export class StaticQueryStringSerializer extends QueryStringSerializer {
       'OR',
       'value'
     ),
-    recordTypes: new ValueField(
-      'form.recordTypes',
-      'parent.type',
-      'OR'
-    ),
+    recordTypes: new ValueField('form.recordTypes', 'parent.type', 'OR'),
     resourceTypes: new ValueField(
       'form.resourceTypes',
       'metadata.resource_type.id',

src/lib/components/table/thematic/ExternalFilesTable/ExternalFilesTable.css

@@ -0,0 +1,23 @@
+/*
+ * This file is part of GEO-Components-React.
+ * Copyright (C) 2022 GEO Secretariat.
+ *
+ * GEO-Components-React is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+.table-external-files .ui.container .grid p {
+  overflow-wrap: break-word;
+}
+
+.table-external-files .ui.grid .row .column.pt-0 {
+  padding-top: 0 !important;
+}
+
+.table-external-files .ui.grid .row .column.pt-1 {
+  padding-top: 1px !important;
+}
+
+.table-external-files .ui.table td {
+  overflow: visible;
+}

src/lib/components/table/thematic/ExternalFilesTable/ExternalFilesTable.js

@@ -0,0 +1,221 @@
+/*
+ * This file is part of GEO-Components-React.
+ * Copyright (C) 2022 GEO Secretariat.
+ *
+ * GEO-Components-React is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import React, { useMemo } from 'react';
+
+import { BaseGlobalFilter } from '../../base';
+import { PaginableTable } from '../../moldure';
+
+import _get from 'lodash/get';
+import _isNil from 'lodash/isNil';
+
+import regeneratorRuntime from 'regenerator-runtime';
+import { useAsyncDebounce } from 'react-table';
+
+import { Grid, Button, Icon, Header, Dropdown, Label } from 'semantic-ui-react';
+
+import './ExternalFilesTable.css';
+
+/**
+ * External files table.
+ */
+export const ExternalFilesTable = ({ tableData, tableConfig }) => {
+  const tableColumnsDefinition = useMemo(() => {
+    return [
+      // Defining invisible columns that are used as the index for the table filter
+      {
+        Header: () => null,
+        id: 'idx_key',
+        accessor: 'key',
+      },
+      {
+        Header: () => null,
+        id: 'idx_mimetype',
+        accessor: 'mimetype',
+      },
+      {
+        Header: () => null,
+        id: 'idx_metadata',
+        accessor: 'metadata',
+      },
+      // Content column
+      {
+        Header: () => null,
+        id: 'external-files-table',
+        Cell: ({ row }) => {
+          // Getting data
+          const { original: rowData } = row;
+
+          // Preparing data
+          // Provider
+          const rowSource = _get(rowData, 'source');
+
+          // Name, checksum and size
+          const rowKey = _get(rowData, 'key');
+          const rowSize = _get(rowData, 'size');
+          const rowChecksum = _get(rowData, 'checksum');
+
+          // Download and preview URL
+          const rowPreviewUrl = _get(rowData, 'url_preview');
+          const rowDownloadUrl = _get(rowData, 'url_download');
+
+          return (
+            <Grid>
+              <Grid.Row verticalAlign="middle">
+                <Grid.Column
+                  widescreen={12}
+                  largeScreen={12}
+                  computer={12}
+                  tablet={16}
+                  mobile={16}
+                >
+                  <div>
+                    <Label size={'tiny'}>Source: {rowSource}</Label>
+                    <Label size={'tiny'}>Provision: Source-dependent</Label>
+                  </div>
+
+                  <Grid className={'user-stories-metadata'}>
+                    <Grid.Row columns={1}>
+                      <Grid.Column>
+                        <div className={'truncated file-key'}>
+                          <a href={rowDownloadUrl} target={'_blank'}>
+                            {rowKey}
+                          </a>
+                        </div>
+                      </Grid.Column>
+                    </Grid.Row>
+                    <Grid.Row columns={1}>
+                      <Grid.Column>
+                        <small className="ui text-muted font-tiny">
+                          {rowChecksum}
+                          <div
+                            className="ui icon inline-block"
+                            data-tooltip="This is the file fingerprint (checksum), which can be used to verify the file integrity."
+                          >
+                            <i className="question circle checksum icon"></i>
+                          </div>
+                        </small>
+                      </Grid.Column>
+                    </Grid.Row>
+                  </Grid>
+                </Grid.Column>
+                <Grid.Column
+                  widescreen={4}
+                  largeScreen={4}
+                  computer={4}
+                  only={'computer'}
+                >
+                  <Button.Group size={'mini'} floated={'right'}>
+                    {!_isNil(rowPreviewUrl) && (
+                      <Button
+                        content={'Access'}
+                        as={'a'}
+                        size={'mini'}
+                        target={'_blank'}
+                        disabled={_isNil(rowPreviewUrl)}
+                        href={rowPreviewUrl}
+                      >
+                        <Icon name={'external'} /> Preview
+                      </Button>
+                    )}
+
+                    <Button
+                      content={'Access'}
+                      as={'a'}
+                      size={'mini'}
+                      target={'_blank'}
+                      disabled={_isNil(rowDownloadUrl)}
+                      href={rowDownloadUrl}
+                    >
+                      <Icon name={'download'} /> Download
+                    </Button>
+                  </Button.Group>
+                </Grid.Column>
+              </Grid.Row>
+              <Grid.Row only={'mobile tablet'} className={'mt-0'}>
+                <Grid.Column className={'pt-0'}>
+                  <Grid stackable>
+                    <Grid.Row>
+                      <Grid.Column className={'pt-0'}>
+                        <Dropdown
+                          icon={'caret square down outline'}
+                          floating
+                          button
+                          labeled
+                          fluid
+                          text={'Options'}
+                          className={'icon right floated tiny'}
+                        >
+                          <Dropdown.Menu>
+                            <Dropdown.Item
+                              href={rowPreviewUrl}
+                              target={'_blank'}
+                            >
+                              <p>
+                                <Icon name={'external alternate'} /> Preview
+                              </p>
+                            </Dropdown.Item>
+
+                            <Dropdown.Item
+                              href={rowDownloadUrl}
+                              target={'_blank'}
+                            >
+                              <p>
+                                <Icon name={'cloud download'} /> Download
+                              </p>
+                            </Dropdown.Item>
+                          </Dropdown.Menu>
+                        </Dropdown>
+                      </Grid.Column>
+                    </Grid.Row>
+                  </Grid>
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+          );
+        },
+      },
+    ];
+  });
+
+  const tableDataMemoized = useMemo(() => tableData);
+
+  return (
+    <div className={'table-external-files'}>
+      <PaginableTable
+        unstackable
+        fixed={true}
+        padded={true}
+        data={tableDataMemoized}
+        columnsConfiguration={tableColumnsDefinition}
+        initialState={{
+          hiddenColumns: ['idx_key', 'idx_mimetype', 'idx_metadata'],
+          sortBy: [
+            {
+              id: 'idx_key',
+              desc: true,
+            },
+          ],
+        }}
+        globalFilter={(
+          globalFilter,
+          preGlobalFilteredRows,
+          setGlobalFilter
+        ) => (
+          <BaseGlobalFilter
+            globalFilter={globalFilter}
+            setGlobalFilter={setGlobalFilter}
+            preGlobalFilteredRows={preGlobalFilteredRows}
+          />
+        )}
+        showHeader={false}
+        {...tableConfig}
+      />
+    </div>
+  );
+};

src/lib/components/table/thematic/ExternalFilesTable/ExternalFilesTable.stories.js

@@ -0,0 +1,31 @@
+/*
+ * This file is part of GEO-Components-React.
+ * Copyright (C) 2022 GEO Secretariat.
+ *
+ * GEO-Components-React is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import React from 'react';
+
+import { ExternalFilesTable as ExternalFilesTableComponent } from './ExternalFilesTable';
+
+import externalFilesData from '../../../../../mocks/table/table-external-files.json';
+
+export default {
+  title: 'Table/Thematic/External Files Table',
+  component: ExternalFilesTableComponent,
+};
+
+/**
+ * Component template
+ */
+const Template = (args) => <ExternalFilesTableComponent {...args} />;
+
+/**
+ * Component stories
+ */
+export const Base = Template.bind({});
+Base.args = {
+  tableData: externalFilesData,
+};

src/lib/components/table/thematic/ExternalFilesTable/ExternalFilesTable.test.js

@@ -0,0 +1,23 @@
+/*
+ * This file is part of GEO-Components-React.
+ * Copyright (C) 2022 GEO Secretariat.
+ *
+ * GEO-Components-React is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import React from 'react';
+
+import { ExternalFilesTable } from './ExternalFilesTable';
+
+import { render } from '../../../../../setupTestRenders';
+
+import externalFilesData from '../../../../../mocks/table/table-external-files.json';
+
+describe('ExternalFilesTable tests', () => {
+  describe('Render tests', () => {
+    it('should render with the required props without crashing', () => {
+      render(<ExternalFilesTable tableData={externalFilesData} />);
+    });
+  });
+});

src/lib/components/table/thematic/ExternalFilesTable/index.js

@@ -0,0 +1,9 @@
+/*
+ * This file is part of GEO-Components-React.
+ * Copyright (C) 2022 GEO Secretariat.
+ *
+ * GEO-Components-React is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+export { ExternalFilesTable } from './ExternalFilesTable';

src/lib/components/table/thematic/ExternalResourceTable/youtube.css

@@ -7,9 +7,9 @@
  */
 
 .youtube-embed {
-    border-radius: 3px;
+  border-radius: 3px;
 }
 
 .youtube-embed-container {
-    padding: 20px;
+  padding: 20px;
 }

src/lib/components/table/thematic/RelatedResourceTable/RelatedResourceTable.css

@@ -7,5 +7,5 @@
  */
 
 .related-resource-table .ui.accordion .title {
-    padding: 0;
+  padding: 0;
 }

src/lib/components/table/thematic/index.js

@@ -11,3 +11,5 @@ export { RelatedResourceTable } from './RelatedResourceTable';
 export { RelatedPackagesTable } from './RelatedPackagesTable';
 export { UserStoriesTable } from './UserStoriesTable';
 export { RecordsTable } from './RecordsTable';
+
+export { ExternalFilesTable } from './ExternalFilesTable';

src/mocks/table/table-external-files.json

@@ -0,0 +1,38 @@
+[
+  {
+    "key": "File Name.zip",
+    "checksum": "md5:afea585e933b456af6e1686byuhg212",
+    "size": 60740526,
+    "mimetype": "application/zip",
+    "metadata": null,
+    "url_download": "https://link-to-zenodo.org/records-file-link",
+    "url_preview": "https://link-to-zenodo.org/preview-file-link"
+  },
+  {
+    "key": "File Name.json",
+    "checksum": "md5:afea585e933b456af6e1686byuhg212",
+    "size": 60740526,
+    "mimetype": "application/json",
+    "metadata": null,
+    "url_download": "https://link-to-zenodo.org/records-file-link",
+    "url_preview": "https://link-to-zenodo.org/preview-file-link"
+  },
+  {
+    "key": "File Name.pdf",
+    "checksum": "md5:afea585e933b456af6e1686byuhg212",
+    "size": 60740526,
+    "mimetype": "application/pdf",
+    "metadata": null,
+    "url_download": "https://link-to-zenodo.org/records-file-link",
+    "url_preview": "https://link-to-zenodo.org/preview-file-link"
+  },
+  {
+    "key": "File Name.tif",
+    "checksum": "md5:afea585e933b456af6e1686byuhg212",
+    "size": 60740526,
+    "mimetype": "image/tiff",
+    "metadata": null,
+    "url_download": "https://link-to-zenodo.org/records-file-link",
+    "url_preview": "https://link-to-zenodo.org/preview-file-link"
+  }
+]