18128: Fixes app's main content layouts.

[arvados-workbench2.git] / src / views / link-panel / link-panel-root.tsx

diff --git a/src/views/link-panel/link-panel-root.tsx b/src/views/link-panel/link-panel-root.tsx
index d5ba79b335a1bde9c19f8e7cf28f6047eee223b2..b32208cd74a04895c569d5e227b2cf037b4207e3 100644 (file)
--- a/src/views/link-panel/link-panel-root.tsx
+++ b/src/views/link-panel/link-panel-root.tsx
@@ -2,19 +2,29 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
-import { LINK_PANEL_ID } from '~/store/link-panel/link-panel-actions';
-import { DataExplorer } from '~/views-components/data-explorer/data-explorer';
-import { SortDirection } from '~/components/data-table/data-column';
-import { DataColumns } from '~/components/data-table/data-table';
-import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
-import { ResourcesState } from '~/store/resources/resources';
-import { ShareMeIcon } from '~/components/icon/icon';
-import { createTree } from '~/models/tree';
-import { 
-    ResourceLinkUuid, ResourceLinkHead, ResourceLinkTail, 
-    ResourceLinkClass, ResourceLinkName } 
-from '~/views-components/data-explorer/renderers';
+import React from 'react';
+import { LINK_PANEL_ID } from 'store/link-panel/link-panel-actions';
+import { DataExplorer } from 'views-components/data-explorer/data-explorer';
+import { SortDirection } from 'components/data-table/data-column';
+import { DataColumns } from 'components/data-table/data-table';
+import { DataTableDefaultView } from 'components/data-table-default-view/data-table-default-view';
+import { ResourcesState } from 'store/resources/resources';
+import { ShareMeIcon } from 'components/icon/icon';
+import { createTree } from 'models/tree';
+import {
+    ResourceLinkUuid, ResourceLinkHead, ResourceLinkTail,
+    ResourceLinkClass, ResourceLinkName }
+from 'views-components/data-explorer/renderers';
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+import { ArvadosTheme } from 'common/custom-theme';
+
+type CssRules = "root";
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+        width: '100%',
+    }
+});
 
 export enum LinkPanelColumnNames {
     NAME = "Name",
@@ -63,30 +73,30 @@ export const linkPanelColumns: DataColumns<string> = [
     }
 ];
 
-export interface LinkPanelDataProps {
+export interface LinkPanelRootDataProps {
     resources: ResourcesState;
 }
 
-export interface LinkPanelActionProps {
+export interface LinkPanelRootActionProps {
     onItemClick: (item: string) => void;
     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: string) => void;
     onItemDoubleClick: (item: string) => void;
 }
 
-export type LinkPanelProps = LinkPanelDataProps & LinkPanelActionProps;
+export type LinkPanelRootProps = LinkPanelRootDataProps & LinkPanelRootActionProps & WithStyles<CssRules>;
 
-export const LinkPanelRoot = (props: LinkPanelProps) => {
-    return <DataExplorer
+export const LinkPanelRoot = withStyles(styles)((props: LinkPanelRootProps) => {
+    return <div className={props.classes.root}><DataExplorer
         id={LINK_PANEL_ID}
         onRowClick={props.onItemClick}
         onRowDoubleClick={props.onItemDoubleClick}
         onContextMenu={props.onContextMenu}
-        contextMenuColumn={true} 
+        contextMenuColumn={true}
         hideColumnSelector
         hideSearchInput
         dataTableDefaultView={
             <DataTableDefaultView
                 icon={ShareMeIcon}
                 messages={['Your link list is empty.']} />
-        }/>;
-};
\ No newline at end of file
+        }/></div>;
+});
\ No newline at end of file