Эх сурвалжийг харах

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

Nidhi Bhat G 1 жил өмнө
parent
commit
eb37ea6333

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

@@ -17,6 +17,7 @@
 @use 'mixins';
 @use 'mixins';
 
 
 $cell-height: 40px;
 $cell-height: 40px;
+$table-placeholder-height: 100px;
 
 
 .hue-storage-browser__table {
 .hue-storage-browser__table {
   @include mixins.hue-svg-icon__d3-conflict;
   @include mixins.hue-svg-icon__d3-conflict;
@@ -28,6 +29,11 @@ $cell-height: 40px;
     margin-right: 6px;
     margin-right: 6px;
   }
   }
 
 
+  .ant-table-placeholder {
+    height: $table-placeholder-height;
+    text-align: center;
+  }
+
   thead {
   thead {
     //TODO:Check why height isnt applied in safari browser
     //TODO:Check why height isnt applied in safari browser
     height: $cell-height;
     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) {
   if (dataSource && pageStats) {
     return (
     return (
       <>
       <>
         <Table
         <Table
           className={className}
           className={className}
           columns={getColumns(dataSource[0])}
           columns={getColumns(dataSource[0])}
-          dataSource={dataSource}
+          dataSource={removeDots(dataSource)}
           onRow={onRowClicked}
           onRow={onRowClicked}
           pagination={false}
           pagination={false}
           rowClassName={rowClassName}
           rowClassName={rowClassName}
           rowKey={(record, index) => record.path + '' + index}
           rowKey={(record, index) => record.path + '' + index}
           scroll={{ y: tableHeight }}
           scroll={{ y: tableHeight }}
           data-testid={`${testId}`}
           data-testid={`${testId}`}
+          locale={locale}
           {...restProps}
           {...restProps}
         ></Table>
         ></Table>
         <Pagination
         <Pagination