Переглянути джерело

[frontend] Implement placeholder for empty table scenario (#3682)

Nidhi Bhat G 1 рік тому
батько
коміт
eb37ea6333

+ 6 - 0
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTable/StorageBrowserTable.scss

@@ -17,6 +17,7 @@
 @use 'mixins';
 
 $cell-height: 40px;
+$table-placeholder-height: 100px;
 
 .hue-storage-browser__table {
   @include mixins.hue-svg-icon__d3-conflict;
@@ -28,6 +29,11 @@ $cell-height: 40px;
     margin-right: 6px;
   }
 
+  .ant-table-placeholder {
+    height: $table-placeholder-height;
+    text-align: center;
+  }
+
   thead {
     //TODO:Check why height isnt applied in safari browser
     height: $cell-height;

+ 11 - 1
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTable/StorageBrowserTable.tsx

@@ -179,19 +179,29 @@ const StorageBrowserTable: React.FC<StorageBrowserTableProps> = ({
     };
   }, []);
 
+  //function removes ..(previous folder) and .(current folder) from table data
+  const removeDots = (dataSource: StorageBrowserTableData[]) => {
+    return dataSource.length > 2 ? dataSource.slice(2) : [];
+  };
+
+  const locale = {
+    emptyText: t('Folder is empty')
+  };
+
   if (dataSource && pageStats) {
     return (
       <>
         <Table
           className={className}
           columns={getColumns(dataSource[0])}
-          dataSource={dataSource}
+          dataSource={removeDots(dataSource)}
           onRow={onRowClicked}
           pagination={false}
           rowClassName={rowClassName}
           rowKey={(record, index) => record.path + '' + index}
           scroll={{ y: tableHeight }}
           data-testid={`${testId}`}
+          locale={locale}
           {...restProps}
         ></Table>
         <Pagination