feat(table): add button disabled and tooltip

eclipse-tractusx · Apr 11, 2024 · 58edf4d · 58edf4d
2 parents 901688b + b52ecf7
commit 58edf4d
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.3
+
+- Add button disabled and tooltip in table
+
 ## 3.0.2
 
 - Remove eclipse dash tool jar: add step to dependencies check to download eclipse dash tool instead

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

diff --git a/src/components/basic/Table/components/Toolbar/index.tsx b/src/components/basic/Table/components/Toolbar/index.tsx
@@ -30,6 +30,7 @@ import ClearIcon from '@mui/icons-material/Clear'
 import { Checkbox } from '../../../Checkbox'
 import { getSelectedFilterUpdate } from './helper'
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
+import { Tooltips } from '../../../ToolTips'
 
 interface FilterValue {
   value: string
@@ -54,6 +55,8 @@ export interface ToolbarProps {
   rowsCountMax?: number
   buttonLabel?: string
   onButtonClick?: React.MouseEventHandler
+  buttonDisabled?: boolean
+  buttonTooltip?: string
   secondButtonLabel?: string
   onSecondButtonClick?: React.MouseEventHandler
   onSearch?: (value: string) => void
@@ -80,6 +83,8 @@ export const Toolbar = ({
   rowsCountMax = 0,
   buttonLabel,
   onButtonClick,
+  buttonDisabled,
+  buttonTooltip,
   secondButtonLabel,
   onSecondButtonClick,
   onSearch,
@@ -187,14 +192,26 @@ export const Toolbar = ({
             </Box>
           </Typography>
           {buttonLabel && onButtonClick != null && (
-            <Button
-              startIcon={<AddCircleOutlineIcon />}
-              size="small"
-              onClick={onButtonClick}
-              sx={{ marginLeft: 15 }}
+            <Tooltips
+              additionalStyles={{
+                marginLeft: '50px',
+                cursor: 'pointer',
+              }}
+              tooltipPlacement="top-end"
+              tooltipText={buttonTooltip ?? ''}
             >
-              {buttonLabel}
-            </Button>
+              <span>
+                <Button
+                  startIcon={<AddCircleOutlineIcon />}
+                  size="small"
+                  onClick={onButtonClick}
+                  sx={{ marginLeft: 15 }}
+                  disabled={buttonDisabled}
+                >
+                  {buttonLabel}
+                </Button>
+              </span>
+            </Tooltips>
           )}
           {secondButtonLabel && onSecondButtonClick != null && (
             <Button

diff --git a/src/components/basic/Table/index.tsx b/src/components/basic/Table/index.tsx
@@ -59,6 +59,8 @@ export interface TableProps extends DataGridProps {
   hasBorder?: boolean
   buttonLabel?: string
   onButtonClick?: React.MouseEventHandler
+  buttonDisabled?: boolean
+  buttonTooltip?: string
   secondButtonLabel?: string
   onSecondButtonClick?: React.MouseEventHandler
   onSelection?: (value: GridRowId[]) => void
@@ -95,6 +97,8 @@ export const Table = ({
   hasBorder = true,
   buttonLabel,
   onButtonClick,
+  buttonDisabled,
+  buttonTooltip,
   secondButtonLabel,
   onSecondButtonClick,
   onSelection,
@@ -117,6 +121,8 @@ export const Table = ({
     noRowsMsg,
     buttonLabel,
     onButtonClick,
+    buttonDisabled,
+    buttonTooltip,
     secondButtonLabel,
     onSecondButtonClick,
     onSelection,

diff --git a/src/components/basic/Table/table.stories.tsx b/src/components/basic/Table/table.stories.tsx
@@ -104,6 +104,8 @@ TableToolbar.args = {
   toolbar: {
     buttonLabel: 'Add user',
     onButtonClick: () => console.log('on button click'),
+    buttonDisabled: true,
+    buttonTooltip: 'Not able to add',
     secondButtonLabel: 'Add Multiple users',
     onSecondButtonClick: () => console.log('on multiple button click'),
     onSearch: (value) => console.log(`search: "${value}"`),