From 048be07295007efd73fee2dd30fb833437b4f63d Mon Sep 17 00:00:00 2001
From: Andrey Nenashev <anenashev90@gmail.com>
Date: Tue, 7 Nov 2023 15:30:18 +0100
Subject: [PATCH] feature(fe): monitored tables dashboard. Linter fixes

---
 .../AlertsList/AlertItem/AlertItemStyles.ts   |   2 +-
 .../Alerts/AlertsList/AlertsList.tsx          |   4 +-
 .../DataCollaborationStyles.ts                |   2 +-
 .../ActivityItem/ActivityItem.tsx             |  10 +-
 .../ActivityItem/ActivityItemStyles.ts        |   4 +-
 .../DataEntityAlertItemStyles.ts              |   2 +-
 .../DatasetStructureCompareListItem.styles.ts |   2 +-
 .../DatasetFieldTagsStyles.ts                 |   2 +-
 .../TagsEditForm/TagsEditFormStyles.ts        |   2 +-
 .../DatasetStructureList.styles.ts            |   2 +-
 .../Lineage/DEGLineage/DEGLineage.styles.ts   |   2 +-
 .../EdgesRenderer/EdgesRenderer.styles.ts     |   2 +-
 .../ZoomableDEGLineage.styles.ts              |   4 +-
 .../DEGLineage/components/Node/Node.styles.ts |   2 +-
 .../Node/NodeTitle/NodeTitleStyles.ts         |   2 +-
 .../OverviewDQSLAReportStyles.ts              |   2 +-
 .../OverviewDataConsumerStats.tsx             |  22 +-
 .../OverviewDataInputStats.tsx                |  20 +-
 .../OverviewEntityGroupItems.styles.ts        |   4 +-
 .../OverviewQualityTestStats.tsx              |  20 +-
 .../OverviewTransformerStats.tsx              |  40 +--
 .../OverviewTags/OverviewTagsStyles.ts        |   2 +-
 .../TagsEditForm/TagsEditFormStyles.ts        |   2 +-
 .../components/DataQuality/DataQuality.tsx    |  62 +++--
 .../DirectoryItem/DirectoryItem.styles.ts     |   2 +-
 .../src/components/Directory/shared/styles.ts |   2 +-
 .../EditableOwnerItemStyles.ts                |   2 +-
 .../RolesList/RoleItem/RoleItemStyles.ts      |   2 +-
 .../OwnerAssociationStyles.ts                 |   2 +-
 .../ActivityFieldStateStyles.ts               |   2 +-
 .../AlertActivityField/AlertActivityField.tsx |   2 +-
 .../OwnerActivityField/OwnerActivityField.tsx |  13 +-
 .../AppCircularProgressStyles.ts              |   2 +-
 .../elements/AppJSONEditor/AppJSONEditor.tsx  |   2 +-
 .../AppLoadingPage/AppLoadingPageStyles.ts    |   2 +-
 .../elements/AppPopover/AppPopoverStyles.ts   |   2 +-
 .../shared/elements/Button/Button.styles.ts   | 240 +++++++++---------
 .../CollapsibleInfoContainer.styles.ts        |   2 +-
 .../shared/elements/DonutChart/DonutChart.tsx |  15 +-
 .../elements/FileInput/FileInput.styles.ts    |   4 +-
 .../dataEntityAttachments/dataEntityFiles.ts  |   5 +-
 .../src/redux/interfaces/dataentityLineage.ts |   4 +-
 odd-platform-ui/src/redux/lib/helpers.ts      |   4 +-
 43 files changed, 280 insertions(+), 247 deletions(-)

diff --git a/odd-platform-ui/src/components/Alerts/AlertsList/AlertItem/AlertItemStyles.ts b/odd-platform-ui/src/components/Alerts/AlertsList/AlertItem/AlertItemStyles.ts
index 08c041720..1345141b8 100644
--- a/odd-platform-ui/src/components/Alerts/AlertsList/AlertItem/AlertItemStyles.ts
+++ b/odd-platform-ui/src/components/Alerts/AlertsList/AlertItem/AlertItemStyles.ts
@@ -15,5 +15,5 @@ export const Wrapper = styled(Grid)<{ $alignItems?: CSSObject['alignItems'] }>(
       flexWrap: 'nowrap',
       alignItems: $alignItems,
       justifyContent: 'flex-end',
-    } as CSSObject)
+    }) as CSSObject
 );
diff --git a/odd-platform-ui/src/components/Alerts/AlertsList/AlertsList.tsx b/odd-platform-ui/src/components/Alerts/AlertsList/AlertsList.tsx
index d33b3c275..419eac00e 100644
--- a/odd-platform-ui/src/components/Alerts/AlertsList/AlertsList.tsx
+++ b/odd-platform-ui/src/components/Alerts/AlertsList/AlertsList.tsx
@@ -92,9 +92,7 @@ const AlertsList: React.FC<AlertsListProps> = ({ fetchAlerts }) => {
           loader={isAlertsFetching && <DataEntityAlertsSkeleton length={5} />}
           scrollableTarget='alerts-list'
         >
-          {alerts?.map(alert => (
-            <AlertItem key={alert.id} alert={alert} />
-          ))}
+          {alerts?.map(alert => <AlertItem key={alert.id} alert={alert} />)}
         </InfiniteScroll>
       </S.AlertsContainer>
 
diff --git a/odd-platform-ui/src/components/DataEntityDetails/DataCollaboration/DataCollaborationStyles.ts b/odd-platform-ui/src/components/DataEntityDetails/DataCollaboration/DataCollaborationStyles.ts
index 7cc23eb1b..c01381d0a 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/DataCollaboration/DataCollaborationStyles.ts
+++ b/odd-platform-ui/src/components/DataEntityDetails/DataCollaboration/DataCollaborationStyles.ts
@@ -6,5 +6,5 @@ export const Container = styled(Grid)(
     ({
       position: 'relative',
       flexWrap: 'nowrap',
-    } as CSSObject)
+    }) as CSSObject
 );
diff --git a/odd-platform-ui/src/components/DataEntityDetails/DataEntityActivity/ActivityResults/ActivityItem/ActivityItem.tsx b/odd-platform-ui/src/components/DataEntityDetails/DataEntityActivity/ActivityResults/ActivityItem/ActivityItem.tsx
index 5491ca0a2..2125565b4 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/DataEntityActivity/ActivityResults/ActivityItem/ActivityItem.tsx
+++ b/odd-platform-ui/src/components/DataEntityDetails/DataEntityActivity/ActivityResults/ActivityItem/ActivityItem.tsx
@@ -88,9 +88,8 @@ const ActivityItem: React.FC<ActivityItemProps> = ({ activity, hideAllDetails })
         )}
         {isTypeRelatedTo([ActivityEventType.DATASET_FIELD_DESCRIPTION_UPDATED]) && (
           <StringActivityField
-            activityName={`${t('Dataset field')} ${
-              activity.oldState.datasetFieldInformation?.name
-            } ${t('description')}`}
+            activityName={`${t('Dataset field')} ${activity.oldState
+              .datasetFieldInformation?.name} ${t('description')}`}
             oldState={activity.oldState.datasetFieldInformation?.description}
             newState={activity.newState.datasetFieldInformation?.description}
             hideAllDetails={hideAllDetails}
@@ -108,9 +107,8 @@ const ActivityItem: React.FC<ActivityItemProps> = ({ activity, hideAllDetails })
         )}
         {isTypeRelatedTo([ActivityEventType.DATASET_FIELD_TAGS_UPDATED]) && (
           <ArrayActivityField
-            activityName={`${t('Tags')} ${t('in')} ${
-              activity.oldState.datasetFieldInformation?.name
-            } ${t('column')}`}
+            activityName={`${t('Tags')} ${t('in')} ${activity.oldState
+              .datasetFieldInformation?.name} ${t('column')}`}
             oldState={activity.oldState.datasetFieldInformation?.tags}
             newState={activity.newState.datasetFieldInformation?.tags}
             hideAllDetails={hideAllDetails}
diff --git a/odd-platform-ui/src/components/DataEntityDetails/DataEntityActivity/ActivityResults/ActivityItem/ActivityItemStyles.ts b/odd-platform-ui/src/components/DataEntityDetails/DataEntityActivity/ActivityResults/ActivityItem/ActivityItemStyles.ts
index c84ca4001..cdf6bb9eb 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/DataEntityActivity/ActivityResults/ActivityItem/ActivityItemStyles.ts
+++ b/odd-platform-ui/src/components/DataEntityDetails/DataEntityActivity/ActivityResults/ActivityItem/ActivityItemStyles.ts
@@ -16,7 +16,7 @@ export const ContentContainer = styled(Grid)(
       alignItems: 'baseline',
       flexWrap: 'nowrap',
       position: 'relative',
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const InfoContainer = styled('div')(
@@ -27,5 +27,5 @@ export const InfoContainer = styled('div')(
       alignItems: 'center',
       position: 'absolute',
       right: 0,
-    } as CSSObject)
+    }) as CSSObject
 );
diff --git a/odd-platform-ui/src/components/DataEntityDetails/DataEntityAlerts/DataEntityAlertItem/DataEntityAlertItemStyles.ts b/odd-platform-ui/src/components/DataEntityDetails/DataEntityAlerts/DataEntityAlertItem/DataEntityAlertItemStyles.ts
index c278810cb..6c950ae2d 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/DataEntityAlerts/DataEntityAlertItem/DataEntityAlertItemStyles.ts
+++ b/odd-platform-ui/src/components/DataEntityDetails/DataEntityAlerts/DataEntityAlertItem/DataEntityAlertItemStyles.ts
@@ -15,5 +15,5 @@ export const Wrapper = styled(Grid)(
       flexWrap: 'nowrap',
       alignItems: 'center',
       justifyContent: 'flex-end',
-    } as CSSObject)
+    }) as CSSObject
 );
diff --git a/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureCompare/DatasetStructureCompareList/DatasetStructureCompareListItem/DatasetStructureCompareListItem.styles.ts b/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureCompare/DatasetStructureCompareList/DatasetStructureCompareListItem/DatasetStructureCompareListItem.styles.ts
index ae0092097..d93e0d63e 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureCompare/DatasetStructureCompareList/DatasetStructureCompareListItem/DatasetStructureCompareListItem.styles.ts
+++ b/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureCompare/DatasetStructureCompareList/DatasetStructureCompareListItem/DatasetStructureCompareListItem.styles.ts
@@ -40,7 +40,7 @@ export const Container = styled('div')(
       display: 'flex',
       width: `100%`,
       flexWrap: 'nowrap',
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const CollapseContainer = styled('div')<{ $visibility: boolean }>(
diff --git a/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTags/DatasetFieldTagsStyles.ts b/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTags/DatasetFieldTagsStyles.ts
index 8f38f60a9..713b2ca30 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTags/DatasetFieldTagsStyles.ts
+++ b/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTags/DatasetFieldTagsStyles.ts
@@ -8,5 +8,5 @@ export const TagsContainer = styled(Box)(
       alignItems: 'center',
       justifyContent: 'flex-start',
       flexWrap: 'wrap',
-    } as CSSObject)
+    }) as CSSObject
 );
diff --git a/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTags/TagsEditForm/TagsEditFormStyles.ts b/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTags/TagsEditForm/TagsEditFormStyles.ts
index 9bb2dd9d1..f301c6786 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTags/TagsEditForm/TagsEditFormStyles.ts
+++ b/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTags/TagsEditForm/TagsEditFormStyles.ts
@@ -27,5 +27,5 @@ export const TagListContainer = styled(Box)(
       alignItems: 'center',
       justifyContent: 'flex-start',
       flexWrap: 'wrap',
-    } as CSSObject)
+    }) as CSSObject
 );
diff --git a/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetStructureList/DatasetStructureList.styles.ts b/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetStructureList/DatasetStructureList.styles.ts
index 0d990496b..9050da4d3 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetStructureList/DatasetStructureList.styles.ts
+++ b/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetStructureList/DatasetStructureList.styles.ts
@@ -7,7 +7,7 @@ export const Scrollable = styled('div')(
       width: '100%',
       overflowY: 'auto',
       contain: 'strict',
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const Container = styled('div')<{ $height: number }>(({ $height }) => ({
diff --git a/odd-platform-ui/src/components/DataEntityDetails/Lineage/DEGLineage/DEGLineage.styles.ts b/odd-platform-ui/src/components/DataEntityDetails/Lineage/DEGLineage/DEGLineage.styles.ts
index 5b2d37e59..dd1823afc 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/Lineage/DEGLineage/DEGLineage.styles.ts
+++ b/odd-platform-ui/src/components/DataEntityDetails/Lineage/DEGLineage/DEGLineage.styles.ts
@@ -25,5 +25,5 @@ export const LineageViewContainer = styled('div')(
       width: '100%',
       height: '100%',
       position: 'relative',
-    } as CSSObject)
+    }) as CSSObject
 );
diff --git a/odd-platform-ui/src/components/DataEntityDetails/Lineage/DEGLineage/ZoomableDEGLineage/DEGLinegeGraph/EdgesRenderer/EdgesRenderer.styles.ts b/odd-platform-ui/src/components/DataEntityDetails/Lineage/DEGLineage/ZoomableDEGLineage/DEGLinegeGraph/EdgesRenderer/EdgesRenderer.styles.ts
index e343915f8..f93ec7c93 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/Lineage/DEGLineage/ZoomableDEGLineage/DEGLinegeGraph/EdgesRenderer/EdgesRenderer.styles.ts
+++ b/odd-platform-ui/src/components/DataEntityDetails/Lineage/DEGLineage/ZoomableDEGLineage/DEGLinegeGraph/EdgesRenderer/EdgesRenderer.styles.ts
@@ -11,5 +11,5 @@ export const Container = styled('svg')(
       height: '100%',
       top: 0,
       left: 0,
-    } as CSSObject)
+    }) as CSSObject
 );
diff --git a/odd-platform-ui/src/components/DataEntityDetails/Lineage/DEGLineage/ZoomableDEGLineage/ZoomableDEGLineage.styles.ts b/odd-platform-ui/src/components/DataEntityDetails/Lineage/DEGLineage/ZoomableDEGLineage/ZoomableDEGLineage.styles.ts
index 4ab84046a..93a5583a8 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/Lineage/DEGLineage/ZoomableDEGLineage/ZoomableDEGLineage.styles.ts
+++ b/odd-platform-ui/src/components/DataEntityDetails/Lineage/DEGLineage/ZoomableDEGLineage/ZoomableDEGLineage.styles.ts
@@ -16,7 +16,7 @@ export const ZoomWrapper = styled('div')(
       position: 'absolute',
       top: 0,
       left: 0,
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const ZoomContainer = styled('div')(
@@ -28,5 +28,5 @@ export const ZoomContainer = styled('div')(
       top: 0,
       left: 0,
       transformOrigin: '0 0',
-    } as CSSObject)
+    }) as CSSObject
 );
diff --git a/odd-platform-ui/src/components/DataEntityDetails/Lineage/DEGLineage/components/Node/Node.styles.ts b/odd-platform-ui/src/components/DataEntityDetails/Lineage/DEGLineage/components/Node/Node.styles.ts
index 326e07471..64b041e45 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/Lineage/DEGLineage/components/Node/Node.styles.ts
+++ b/odd-platform-ui/src/components/DataEntityDetails/Lineage/DEGLineage/components/Node/Node.styles.ts
@@ -36,7 +36,7 @@ export const TitleContainer = styled(Typography)(
     ({
       wordBreak: 'break-all',
       '&:hover': { cursor: 'pointer' },
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const SourceContainer = styled('div')(({ theme }) => ({
diff --git a/odd-platform-ui/src/components/DataEntityDetails/Lineage/HierarchyLineage/ZoomableLineage/LineageGraph/Node/NodeTitle/NodeTitleStyles.ts b/odd-platform-ui/src/components/DataEntityDetails/Lineage/HierarchyLineage/ZoomableLineage/LineageGraph/Node/NodeTitle/NodeTitleStyles.ts
index 3af68c33f..af9f2684c 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/Lineage/HierarchyLineage/ZoomableLineage/LineageGraph/Node/NodeTitle/NodeTitleStyles.ts
+++ b/odd-platform-ui/src/components/DataEntityDetails/Lineage/HierarchyLineage/ZoomableLineage/LineageGraph/Node/NodeTitle/NodeTitleStyles.ts
@@ -18,7 +18,7 @@ export const TitleWrapper = styled('div')<{ $fullNames: boolean }>(
       overflow: $fullNames ? 'initial' : 'hidden',
       textOverflow: $fullNames ? 'initial' : 'ellipsis',
       whiteSpace: $fullNames ? 'initial' : 'nowrap',
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const UnknownEntityNameCircle = styled('circle')(({ theme }) => ({
diff --git a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewDataQualityReport/OverviewDQSLAReport/OverviewDQSLAReportStyles.ts b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewDataQualityReport/OverviewDQSLAReport/OverviewDQSLAReportStyles.ts
index 99b9f5375..17d536f3f 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewDataQualityReport/OverviewDQSLAReport/OverviewDQSLAReportStyles.ts
+++ b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewDataQualityReport/OverviewDQSLAReport/OverviewDQSLAReportStyles.ts
@@ -23,7 +23,7 @@ export const TooltipStyles = {
 };
 
 export const BarContainer = styled(Grid)(
-  () => ({ flexWrap: 'nowrap', marginTop: '3px', columnGap: '2px' } as CSSObject)
+  () => ({ flexWrap: 'nowrap', marginTop: '3px', columnGap: '2px' }) as CSSObject
 );
 
 export const Bar = styled(LinearProgress)<{
diff --git a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewDataConsumerStats/OverviewDataConsumerStats.tsx b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewDataConsumerStats/OverviewDataConsumerStats.tsx
index 77d12ef13..2e12e0d3f 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewDataConsumerStats/OverviewDataConsumerStats.tsx
+++ b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewDataConsumerStats/OverviewDataConsumerStats.tsx
@@ -35,16 +35,18 @@ const OverviewDataConsumerStats: React.FC<OverviewDataConsumerStatsProps> = ({
           </Typography>
         </Grid>
         <Grid item container xs={12} direction='column' alignItems='flex-start'>
-          {inputs?.slice(0, displayedEntitiesNumber).map(input => (
-            <Button
-              text={input.internalName || input.externalName}
-              to={dataEntityOverviewPath(input.id)}
-              key={input.id}
-              sx={{ my: 0.25 }}
-              buttonType='tertiary-m'
-              onClick={() => {}}
-            />
-          ))}
+          {inputs
+            ?.slice(0, displayedEntitiesNumber)
+            .map(input => (
+              <Button
+                text={input.internalName || input.externalName}
+                to={dataEntityOverviewPath(input.id)}
+                key={input.id}
+                sx={{ my: 0.25 }}
+                buttonType='tertiary-m'
+                onClick={() => {}}
+              />
+            ))}
           {unknownInputsCount ? (
             <Typography sx={{ ml: 0.5 }} variant='subtitle1'>
               {unknownInputsCount} {t('more source')}
diff --git a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewDataInputStats/OverviewDataInputStats.tsx b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewDataInputStats/OverviewDataInputStats.tsx
index a0d7b3a7d..a8bf50006 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewDataInputStats/OverviewDataInputStats.tsx
+++ b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewDataInputStats/OverviewDataInputStats.tsx
@@ -33,15 +33,17 @@ const OverviewDataInputStats: React.FC<OverviewDataInputStatsProps> = ({
           <Typography variant='h4'>{t('outputs')}</Typography>
         </Grid>
         <Grid item container xs={12} direction='column' alignItems='flex-start'>
-          {outputs?.slice(0, displayedEntitiesNumber).map(output => (
-            <Button
-              text={output.internalName || output.externalName}
-              to={dataEntityOverviewPath(output.id)}
-              key={output.id}
-              sx={{ my: 0.25 }}
-              buttonType='tertiary-m'
-            />
-          ))}
+          {outputs
+            ?.slice(0, displayedEntitiesNumber)
+            .map(output => (
+              <Button
+                text={output.internalName || output.externalName}
+                to={dataEntityOverviewPath(output.id)}
+                key={output.id}
+                sx={{ my: 0.25 }}
+                buttonType='tertiary-m'
+              />
+            ))}
           {unknownOutputsCount ? (
             <Typography variant='subtitle1' sx={{ ml: 0.5 }}>
               {unknownOutputsCount} {t('more output')}
diff --git a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewEntityGroupItems/OverviewEntityGroupItems.styles.ts b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewEntityGroupItems/OverviewEntityGroupItems.styles.ts
index f295ecc13..91e1abfdb 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewEntityGroupItems/OverviewEntityGroupItems.styles.ts
+++ b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewEntityGroupItems/OverviewEntityGroupItems.styles.ts
@@ -6,7 +6,7 @@ export const Container = styled('div')(
       display: 'flex',
       flexDirection: 'column',
       maxHeight: '488px',
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const Header = styled('div')(
@@ -14,7 +14,7 @@ export const Header = styled('div')(
     ({
       display: 'flex',
       flexDirection: 'column',
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const HeaderContent = styled('div')(({ theme }) => ({
diff --git a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewQualityTestStats/OverviewQualityTestStats.tsx b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewQualityTestStats/OverviewQualityTestStats.tsx
index 60c0d4af1..52e5e6962 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewQualityTestStats/OverviewQualityTestStats.tsx
+++ b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewQualityTestStats/OverviewQualityTestStats.tsx
@@ -52,15 +52,17 @@ const OverviewQualityTestStats: React.FC<OverviewQualityTestStatsProps> = ({
             {datasetsList?.length || 0}{' '}
             {`dataset${datasetsList?.length === 1 ? '' : 's'}`}
           </Typography>
-          {datasetsList?.slice(0, displayedEntitiesNumber).map(dataset => (
-            <Button
-              text={dataset.internalName || dataset.externalName}
-              to={dataEntityOverviewPath(dataset.id)}
-              key={dataset.id}
-              sx={{ my: 0.25, maxWidth: '100%' }}
-              buttonType='link-m'
-            />
-          ))}
+          {datasetsList
+            ?.slice(0, displayedEntitiesNumber)
+            .map(dataset => (
+              <Button
+                text={dataset.internalName || dataset.externalName}
+                to={dataEntityOverviewPath(dataset.id)}
+                key={dataset.id}
+                sx={{ my: 0.25, maxWidth: '100%' }}
+                buttonType='link-m'
+              />
+            ))}
           {datasetsList && datasetsList.length > displayedEntitiesNumber ? (
             <EntitiesListModal
               entities={datasetsList}
diff --git a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewTransformerStats/OverviewTransformerStats.tsx b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewTransformerStats/OverviewTransformerStats.tsx
index 13b8121e5..01ed57dd9 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewTransformerStats/OverviewTransformerStats.tsx
+++ b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewTransformerStats/OverviewTransformerStats.tsx
@@ -50,15 +50,17 @@ const OverviewTransformerStats: React.FC<OverviewTransformerStatsProps> = ({
             alignItems='flex-start'
             sx={{ mt: 1 }}
           >
-            {sources?.slice(0, displayedEntitiesNumber).map(source => (
-              <Button
-                text={source.internalName || source.externalName}
-                to={dataEntityOverviewPath(source.id)}
-                key={source.id}
-                buttonType='link-m'
-                sx={{ my: 0.25 }}
-              />
-            ))}
+            {sources
+              ?.slice(0, displayedEntitiesNumber)
+              .map(source => (
+                <Button
+                  text={source.internalName || source.externalName}
+                  to={dataEntityOverviewPath(source.id)}
+                  key={source.id}
+                  buttonType='link-m'
+                  sx={{ my: 0.25 }}
+                />
+              ))}
             {unknownSourcesCount ? (
               <Typography variant='subtitle1' sx={{ ml: 0.5 }}>
                 {unknownSourcesCount} {t('more source')}
@@ -95,15 +97,17 @@ const OverviewTransformerStats: React.FC<OverviewTransformerStatsProps> = ({
             alignItems='flex-start'
             sx={{ mt: 1 }}
           >
-            {targets?.slice(0, displayedEntitiesNumber).map(target => (
-              <Button
-                text={target.internalName || target.externalName}
-                to={dataEntityOverviewPath(target.id)}
-                key={target.id}
-                sx={{ my: 0.25 }}
-                buttonType='link-m'
-              />
-            ))}
+            {targets
+              ?.slice(0, displayedEntitiesNumber)
+              .map(target => (
+                <Button
+                  text={target.internalName || target.externalName}
+                  to={dataEntityOverviewPath(target.id)}
+                  key={target.id}
+                  sx={{ my: 0.25 }}
+                  buttonType='link-m'
+                />
+              ))}
             {unknownTargetsCount ? (
               <Typography variant='subtitle1' sx={{ ml: 0.5 }}>
                 {unknownTargetsCount} {t('more target')}
diff --git a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewTags/OverviewTagsStyles.ts b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewTags/OverviewTagsStyles.ts
index 53bcaf826..e7e312332 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewTags/OverviewTagsStyles.ts
+++ b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewTags/OverviewTagsStyles.ts
@@ -15,5 +15,5 @@ export const TagsContainer = styled(Box)(
       alignItems: 'center',
       justifyContent: 'flex-start',
       flexWrap: 'wrap',
-    } as CSSObject)
+    }) as CSSObject
 );
diff --git a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewTags/TagsEditForm/TagsEditFormStyles.ts b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewTags/TagsEditForm/TagsEditFormStyles.ts
index 9bb2dd9d1..f301c6786 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewTags/TagsEditForm/TagsEditFormStyles.ts
+++ b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewTags/TagsEditForm/TagsEditFormStyles.ts
@@ -27,5 +27,5 @@ export const TagListContainer = styled(Box)(
       alignItems: 'center',
       justifyContent: 'flex-start',
       flexWrap: 'wrap',
-    } as CSSObject)
+    }) as CSSObject
 );
diff --git a/odd-platform-ui/src/components/DataQuality/DataQuality.tsx b/odd-platform-ui/src/components/DataQuality/DataQuality.tsx
index 0158d0b0b..70022c97e 100644
--- a/odd-platform-ui/src/components/DataQuality/DataQuality.tsx
+++ b/odd-platform-ui/src/components/DataQuality/DataQuality.tsx
@@ -13,6 +13,11 @@ function capitalizeFirstLetter(str: string) {
   return [...str][0].toUpperCase() + str.slice(1);
 }
 
+const DONUT_CHART_WIDTH = 300;
+const DONUT_CHART_HEIGHT = 300;
+const DONUT_CHART_INNER_RADIUS = 66;
+const DONUT_CHART_OUTER_RADIUS = 90;
+
 function calcTestResultsBreakdown(categoryResults: DataQualityCategoryResults[]) {
   return categoryResults.reduce(
     ({ statusCounts, total }, { results }) => {
@@ -46,40 +51,43 @@ const DataQuality: React.FC = () => {
 
   const tableHealthData = useMemo(() => {
     if (!data) return [];
+    const { healthyTables, warningTables, errorTables } =
+      data.tablesDashboard.tablesHealth;
     return [
       {
         title: 'Healthy',
-        value: 10,
+        value: healthyTables,
         color: palette.runStatus.SUCCESS.color,
       },
       {
-        title: 'Unhealthy',
-        value: 5,
-        color: palette.runStatus.FAILED.color,
+        title: 'Warning',
+        value: warningTables,
+        color: palette.runStatus.BROKEN.color,
       },
       {
-        title: 'Unknown',
-        value: 2,
-        color: palette.runStatus.BROKEN.color,
+        title: 'Error',
+        value: errorTables,
+        color: palette.runStatus.FAILED.color,
       },
     ];
-  }, [data?.testResults]);
+  }, [data?.tablesDashboard.monitoredTables]);
 
   const tableMonitoredTables = useMemo(() => {
     if (!data) return [];
+    const { monitoredTables, notMonitoredTables } = data.tablesDashboard.monitoredTables;
     return [
       {
         title: 'Monitored',
-        value: 10,
+        value: monitoredTables,
         color: palette.runStatus.SUCCESS.color,
       },
       {
         title: 'Not Monitored',
-        value: 5,
+        value: notMonitoredTables,
         color: palette.runStatus.UNKNOWN.color,
       },
     ];
-  }, [data?.testResults]);
+  }, [data?.tablesDashboard.monitoredTables]);
 
   const testResults = useMemo(() => {
     if (!data) return [];
@@ -106,10 +114,10 @@ const DataQuality: React.FC = () => {
               {t('Table Health')}
             </Typography>
             <DonutChart
-              width={300}
-              height={300}
-              innerRadius={66}
-              outerRadius={90}
+              width={DONUT_CHART_WIDTH}
+              height={DONUT_CHART_HEIGHT}
+              innerRadius={DONUT_CHART_INNER_RADIUS}
+              outerRadius={DONUT_CHART_OUTER_RADIUS}
               label={t('Total Tables')}
               data={tableHealthData}
             />
@@ -119,10 +127,10 @@ const DataQuality: React.FC = () => {
               {t('Test Results Breakdown')}
             </Typography>
             <DonutChart
-              width={300}
-              height={300}
-              innerRadius={66}
-              outerRadius={90}
+              width={DONUT_CHART_WIDTH}
+              height={DONUT_CHART_HEIGHT}
+              innerRadius={DONUT_CHART_INNER_RADIUS}
+              outerRadius={DONUT_CHART_OUTER_RADIUS}
               label={t('Total Tests')}
               data={testResultsBreakdownChartData}
             />
@@ -139,15 +147,23 @@ const DataQuality: React.FC = () => {
         </S.SubSection>
       </S.Section>
       <S.Section>
+        <S.DashboardLegend>
+          <S.DashboardLegendItem $status={DataEntityRunStatus.SUCCESS}>
+            <Typography variant='label'>{t('Monitored')}</Typography>
+          </S.DashboardLegendItem>
+          <S.DashboardLegendItem $status={DataEntityRunStatus.UNKNOWN}>
+            <Typography variant='label'>{t('Unmonitored')}</Typography>
+          </S.DashboardLegendItem>
+        </S.DashboardLegend>
         <S.ChartWrapper>
           <Typography variant='title' component='h4' align='center'>
             {t('Monitored Tables')}
           </Typography>
           <DonutChart
-            width={300}
-            height={300}
-            innerRadius={66}
-            outerRadius={90}
+            width={DONUT_CHART_WIDTH}
+            height={DONUT_CHART_HEIGHT}
+            innerRadius={DONUT_CHART_INNER_RADIUS}
+            outerRadius={DONUT_CHART_OUTER_RADIUS}
             label={t('Total Tables')}
             data={tableMonitoredTables}
           />
diff --git a/odd-platform-ui/src/components/Directory/Directory/DirectoryItem/DirectoryItem.styles.ts b/odd-platform-ui/src/components/Directory/Directory/DirectoryItem/DirectoryItem.styles.ts
index f8ba501a8..058770919 100644
--- a/odd-platform-ui/src/components/Directory/Directory/DirectoryItem/DirectoryItem.styles.ts
+++ b/odd-platform-ui/src/components/Directory/Directory/DirectoryItem/DirectoryItem.styles.ts
@@ -7,7 +7,7 @@ export const Container = styled('div')(
       flexDirection: 'column',
       width: '160px',
       cursor: 'pointer',
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const LogoContainer = styled('div')(({ theme }) => ({
diff --git a/odd-platform-ui/src/components/Directory/shared/styles.ts b/odd-platform-ui/src/components/Directory/shared/styles.ts
index 4604f6dd9..eb663ef76 100644
--- a/odd-platform-ui/src/components/Directory/shared/styles.ts
+++ b/odd-platform-ui/src/components/Directory/shared/styles.ts
@@ -6,7 +6,7 @@ export const Container = styled('div')(
     ({
       display: 'flex',
       flexDirection: 'column',
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const Header = styled('div')(() => ({
diff --git a/odd-platform-ui/src/components/Management/OwnersList/EditableOwnerItem/EditableOwnerItemStyles.ts b/odd-platform-ui/src/components/Management/OwnersList/EditableOwnerItem/EditableOwnerItemStyles.ts
index cf61898a3..cf5488d89 100644
--- a/odd-platform-ui/src/components/Management/OwnersList/EditableOwnerItem/EditableOwnerItemStyles.ts
+++ b/odd-platform-ui/src/components/Management/OwnersList/EditableOwnerItem/EditableOwnerItemStyles.ts
@@ -7,7 +7,7 @@ export const ActionsContainer = styled(Grid)(
       justifyContent: 'flex-end',
       flexWrap: 'nowrap',
       opacity: 0,
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const Container = styled(Grid)(({ theme }) => ({
diff --git a/odd-platform-ui/src/components/Management/RolesList/RoleItem/RoleItemStyles.ts b/odd-platform-ui/src/components/Management/RolesList/RoleItem/RoleItemStyles.ts
index 1a4e591d0..a72d028bf 100644
--- a/odd-platform-ui/src/components/Management/RolesList/RoleItem/RoleItemStyles.ts
+++ b/odd-platform-ui/src/components/Management/RolesList/RoleItem/RoleItemStyles.ts
@@ -7,7 +7,7 @@ export const ActionsContainer = styled(Grid)(
       justifyContent: 'flex-end',
       flexWrap: 'nowrap',
       opacity: 0,
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const Container = styled(Grid)(({ theme }) => ({
diff --git a/odd-platform-ui/src/components/Overview/OwnerAssociation/OwnerAssociationStyles.ts b/odd-platform-ui/src/components/Overview/OwnerAssociation/OwnerAssociationStyles.ts
index d295e2e16..49e7bcdca 100644
--- a/odd-platform-ui/src/components/Overview/OwnerAssociation/OwnerAssociationStyles.ts
+++ b/odd-platform-ui/src/components/Overview/OwnerAssociation/OwnerAssociationStyles.ts
@@ -20,7 +20,7 @@ export const PendingContainer = styled(Grid)(
       flexDirection: 'column',
       alignItems: 'center',
       justifyContent: 'center',
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const RejectMsg = styled(Grid)(({ theme }) => ({
diff --git a/odd-platform-ui/src/components/shared/elements/Activity/ActivityFields/ActivityFieldState/ActivityFieldStateStyles.ts b/odd-platform-ui/src/components/shared/elements/Activity/ActivityFields/ActivityFieldState/ActivityFieldStateStyles.ts
index 2ed9dfa41..9dc7b0100 100644
--- a/odd-platform-ui/src/components/shared/elements/Activity/ActivityFields/ActivityFieldState/ActivityFieldStateStyles.ts
+++ b/odd-platform-ui/src/components/shared/elements/Activity/ActivityFields/ActivityFieldState/ActivityFieldStateStyles.ts
@@ -16,7 +16,7 @@ export const Container = styled(Grid)(
       flexWrap: 'nowrap',
       alignItems: 'center',
       height: '100%',
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const StateContainer = styled(Grid)<{
diff --git a/odd-platform-ui/src/components/shared/elements/Activity/ActivityFields/AlertActivityField/AlertActivityField.tsx b/odd-platform-ui/src/components/shared/elements/Activity/ActivityFields/AlertActivityField/AlertActivityField.tsx
index 32084ac64..4f64bb10c 100644
--- a/odd-platform-ui/src/components/shared/elements/Activity/ActivityFields/AlertActivityField/AlertActivityField.tsx
+++ b/odd-platform-ui/src/components/shared/elements/Activity/ActivityFields/AlertActivityField/AlertActivityField.tsx
@@ -73,7 +73,7 @@ const AlertActivityField: React.FC<AlertActivityFieldProps> = ({
 
   type AlertHaltConfigEntriesType = [
     keyof AlertHaltConfigActivityState,
-    number | undefined
+    number | undefined,
   ][];
   const alertHaltConfigEntries = newState.alertHaltConfig
     ? (Object.entries(newState.alertHaltConfig) as AlertHaltConfigEntriesType)
diff --git a/odd-platform-ui/src/components/shared/elements/Activity/ActivityFields/OwnerActivityField/OwnerActivityField.tsx b/odd-platform-ui/src/components/shared/elements/Activity/ActivityFields/OwnerActivityField/OwnerActivityField.tsx
index a49a0fa1b..613a1a672 100644
--- a/odd-platform-ui/src/components/shared/elements/Activity/ActivityFields/OwnerActivityField/OwnerActivityField.tsx
+++ b/odd-platform-ui/src/components/shared/elements/Activity/ActivityFields/OwnerActivityField/OwnerActivityField.tsx
@@ -61,12 +61,13 @@ const OwnerActivityField: React.FC<ActivityItemProps> = ({
     ) || {};
 
   const getUpdatedItem = () => {
-    const updatedItem = newState?.find(newItem =>
-      oldState?.some(
-        oldItem =>
-          newItem.ownerName === oldItem.ownerName &&
-          newItem.titleName !== oldItem.titleName
-      )
+    const updatedItem = newState?.find(
+      newItem =>
+        oldState?.some(
+          oldItem =>
+            newItem.ownerName === oldItem.ownerName &&
+            newItem.titleName !== oldItem.titleName
+        )
     );
 
     return updatedItem ? { ...updatedItem, typeOfChange: 'updated' } : {};
diff --git a/odd-platform-ui/src/components/shared/elements/AppCircularProgress/AppCircularProgressStyles.ts b/odd-platform-ui/src/components/shared/elements/AppCircularProgress/AppCircularProgressStyles.ts
index 2281a4e23..0f8565956 100644
--- a/odd-platform-ui/src/components/shared/elements/AppCircularProgress/AppCircularProgressStyles.ts
+++ b/odd-platform-ui/src/components/shared/elements/AppCircularProgress/AppCircularProgressStyles.ts
@@ -31,7 +31,7 @@ export const SpinnerContainer = styled(Grid)(
       position: 'relative',
       alignItems: 'center',
       justifyContent: 'center',
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const ProgressBack = styled(CircularProgress)<{
diff --git a/odd-platform-ui/src/components/shared/elements/AppJSONEditor/AppJSONEditor.tsx b/odd-platform-ui/src/components/shared/elements/AppJSONEditor/AppJSONEditor.tsx
index ddebfa0b6..4db88b0f3 100644
--- a/odd-platform-ui/src/components/shared/elements/AppJSONEditor/AppJSONEditor.tsx
+++ b/odd-platform-ui/src/components/shared/elements/AppJSONEditor/AppJSONEditor.tsx
@@ -36,7 +36,7 @@ export type AnySchemaObject = SchemaObject | AsyncSchema;
 interface ErrorObject<
   K extends string = string,
   P = Record<string, unknown>,
-  S = unknown
+  S = unknown,
 > {
   keyword: K;
   instancePath: string;
diff --git a/odd-platform-ui/src/components/shared/elements/AppLoadingPage/AppLoadingPageStyles.ts b/odd-platform-ui/src/components/shared/elements/AppLoadingPage/AppLoadingPageStyles.ts
index 716c31e9e..341a89046 100644
--- a/odd-platform-ui/src/components/shared/elements/AppLoadingPage/AppLoadingPageStyles.ts
+++ b/odd-platform-ui/src/components/shared/elements/AppLoadingPage/AppLoadingPageStyles.ts
@@ -14,5 +14,5 @@ export const Container = styled(Grid)(
       alignContent: 'center',
       justifyContent: 'center',
       overflow: 'auto',
-    } as CSSObject)
+    }) as CSSObject
 );
diff --git a/odd-platform-ui/src/components/shared/elements/AppPopover/AppPopoverStyles.ts b/odd-platform-ui/src/components/shared/elements/AppPopover/AppPopoverStyles.ts
index 1968be7dc..97a65e030 100644
--- a/odd-platform-ui/src/components/shared/elements/AppPopover/AppPopoverStyles.ts
+++ b/odd-platform-ui/src/components/shared/elements/AppPopover/AppPopoverStyles.ts
@@ -20,5 +20,5 @@ export const PopoverChildren = styled(Box)(
       display: 'flex',
       flexWrap: 'wrap',
       alignItems: 'center',
-    } as CSSObject)
+    }) as CSSObject
 );
diff --git a/odd-platform-ui/src/components/shared/elements/Button/Button.styles.ts b/odd-platform-ui/src/components/shared/elements/Button/Button.styles.ts
index 8c3b5e2c1..95bd55c60 100644
--- a/odd-platform-ui/src/components/shared/elements/Button/Button.styles.ts
+++ b/odd-platform-ui/src/components/shared/elements/Button/Button.styles.ts
@@ -13,126 +13,130 @@ interface ButtonProps {
   $iconButton: boolean | undefined;
 }
 
-export const StyledButton = styled('button')<ButtonProps>(
-  ({ theme, $color, $size, $iconButton, $fullWidth }) => {
-    const btnType = getButtonType($color, $size, $iconButton);
-    const btnFontType = getButtonFontType($color, $size);
-
-    const common = {
-      width: $fullWidth ? '100%' : 'auto',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      fontFamily: 'inherit',
-      border: 'none',
-      minWidth: 0,
-      boxSizing: 'border-box',
-
-      color: theme.palette.button[$color].normal.color,
-      backgroundColor: theme.palette.button[$color].normal.background,
-
-      fontWeight: theme.typography[btnFontType].fontWeight,
-      fontSize: theme.typography[btnFontType].fontSize,
-      lineHeight: theme.typography[btnFontType].lineHeight,
-
-      '&:hover': {
-        cursor: 'pointer',
-        color: theme.palette.button[$color].hover.color,
-        backgroundColor: theme.palette.button[$color].hover.background,
-      },
-      '&:active': {
-        color: theme.palette.button[$color].active.color,
-        backgroundColor: theme.palette.button[$color].active.background,
-      },
-      '&:disabled': {
-        cursor: 'auto',
-        color: theme.palette.button[$color].disabled?.color,
-        backgroundColor: theme.palette.button[$color].disabled?.background,
-      },
-    };
-
-    const stylesByButtonType: Record<Button, CSSProperties> = {
-      [getButtonType('main', 'lg')]: {
-        height: '32px',
-        borderRadius: '4px',
-        padding: theme.spacing(0.75, 1),
-      },
-      [getButtonType('main', 'm')]: {
-        height: '24px',
-        borderRadius: '12px',
-        padding: theme.spacing(0.25, 1),
-      },
-      [getButtonType('secondary', 'lg')]: {
-        height: '32px',
-        borderRadius: '16px',
-        padding: theme.spacing(0.75, 1.5),
-      },
-      ...mapKeysToValue(
-        [
-          getButtonType('secondary', 'm'),
-          getButtonType('secondarySuccess', 'm'),
-          getButtonType('secondaryWarning', 'm'),
-        ],
-        {
-          height: '24px',
-          borderRadius: '16px',
-          padding: theme.spacing(0.25, 1.5),
-        }
-      ),
-      [getButtonType('secondary', 'sm')]: {
-        height: '16px',
-        borderRadius: '2px',
-        padding: theme.spacing(0, 0.25),
-      },
-      [getButtonType('secondary', 'm', true)]: {
+export const StyledButton = styled('button')<ButtonProps>(({
+  theme,
+  $color,
+  $size,
+  $iconButton,
+  $fullWidth,
+}) => {
+  const btnType = getButtonType($color, $size, $iconButton);
+  const btnFontType = getButtonFontType($color, $size);
+
+  const common = {
+    width: $fullWidth ? '100%' : 'auto',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fontFamily: 'inherit',
+    border: 'none',
+    minWidth: 0,
+    boxSizing: 'border-box',
+
+    color: theme.palette.button[$color].normal.color,
+    backgroundColor: theme.palette.button[$color].normal.background,
+
+    fontWeight: theme.typography[btnFontType].fontWeight,
+    fontSize: theme.typography[btnFontType].fontSize,
+    lineHeight: theme.typography[btnFontType].lineHeight,
+
+    '&:hover': {
+      cursor: 'pointer',
+      color: theme.palette.button[$color].hover.color,
+      backgroundColor: theme.palette.button[$color].hover.background,
+    },
+    '&:active': {
+      color: theme.palette.button[$color].active.color,
+      backgroundColor: theme.palette.button[$color].active.background,
+    },
+    '&:disabled': {
+      cursor: 'auto',
+      color: theme.palette.button[$color].disabled?.color,
+      backgroundColor: theme.palette.button[$color].disabled?.background,
+    },
+  };
+
+  const stylesByButtonType: Record<Button, CSSProperties> = {
+    [getButtonType('main', 'lg')]: {
+      height: '32px',
+      borderRadius: '4px',
+      padding: theme.spacing(0.75, 1),
+    },
+    [getButtonType('main', 'm')]: {
+      height: '24px',
+      borderRadius: '12px',
+      padding: theme.spacing(0.25, 1),
+    },
+    [getButtonType('secondary', 'lg')]: {
+      height: '32px',
+      borderRadius: '16px',
+      padding: theme.spacing(0.75, 1.5),
+    },
+    ...mapKeysToValue(
+      [
+        getButtonType('secondary', 'm'),
+        getButtonType('secondarySuccess', 'm'),
+        getButtonType('secondaryWarning', 'm'),
+      ],
+      {
         height: '24px',
         borderRadius: '16px',
-        padding: theme.spacing(0.5),
-      },
-      [getButtonType('secondary', 'sm', true)]: {
-        height: '16px',
-        borderRadius: '8px',
-      },
-
-      [getButtonType('tertiary', 'm')]: {
-        height: '20px',
-        borderRadius: '4px',
-        padding: theme.spacing(0, 0.5),
-      },
-      [getButtonType('tertiary', 'sm')]: {
-        height: '16px',
-        borderRadius: '2px',
-        padding: theme.spacing(0, 0.25),
-      },
-      [getButtonType('tertiary', 'm', true)]: {
-        height: '20px',
-        borderRadius: '4px',
-        padding: theme.spacing(0.25),
-      },
-
-      [getButtonType('link', 'm')]: {
-        height: '20px',
-        padding: theme.spacing(0),
-      },
-      [getButtonType('linkGray', 'm', true)]: {
-        height: '16px',
-        padding: theme.spacing(0),
-      },
-
-      [getButtonType('expand', 'sm', true)]: {
-        height: '16px',
-        borderRadius: '2px',
-        padding: theme.spacing(0.75, 0.5),
-      },
-
-      [getButtonType('service', 'm')]: {
-        height: '20px',
-      },
-    };
-
-    return { ...(common as CSSObject), ...stylesByButtonType[btnType] };
-  }
-);
+        padding: theme.spacing(0.25, 1.5),
+      }
+    ),
+    [getButtonType('secondary', 'sm')]: {
+      height: '16px',
+      borderRadius: '2px',
+      padding: theme.spacing(0, 0.25),
+    },
+    [getButtonType('secondary', 'm', true)]: {
+      height: '24px',
+      borderRadius: '16px',
+      padding: theme.spacing(0.5),
+    },
+    [getButtonType('secondary', 'sm', true)]: {
+      height: '16px',
+      borderRadius: '8px',
+    },
+
+    [getButtonType('tertiary', 'm')]: {
+      height: '20px',
+      borderRadius: '4px',
+      padding: theme.spacing(0, 0.5),
+    },
+    [getButtonType('tertiary', 'sm')]: {
+      height: '16px',
+      borderRadius: '2px',
+      padding: theme.spacing(0, 0.25),
+    },
+    [getButtonType('tertiary', 'm', true)]: {
+      height: '20px',
+      borderRadius: '4px',
+      padding: theme.spacing(0.25),
+    },
+
+    [getButtonType('link', 'm')]: {
+      height: '20px',
+      padding: theme.spacing(0),
+    },
+    [getButtonType('linkGray', 'm', true)]: {
+      height: '16px',
+      padding: theme.spacing(0),
+    },
+
+    [getButtonType('expand', 'sm', true)]: {
+      height: '16px',
+      borderRadius: '2px',
+      padding: theme.spacing(0.75, 0.5),
+    },
+
+    [getButtonType('service', 'm')]: {
+      height: '20px',
+    },
+  };
+
+  return { ...(common as CSSObject), ...stylesByButtonType[btnType] };
+});
 
 export const StyledLink = styled(Link)<{
   $disabled?: boolean;
diff --git a/odd-platform-ui/src/components/shared/elements/CollapsibleInfoContainer/CollapsibleInfoContainer.styles.ts b/odd-platform-ui/src/components/shared/elements/CollapsibleInfoContainer/CollapsibleInfoContainer.styles.ts
index 8789203a5..eccd46cc9 100644
--- a/odd-platform-ui/src/components/shared/elements/CollapsibleInfoContainer/CollapsibleInfoContainer.styles.ts
+++ b/odd-platform-ui/src/components/shared/elements/CollapsibleInfoContainer/CollapsibleInfoContainer.styles.ts
@@ -25,7 +25,7 @@ export const ContentWrapper = styled('div')(
       display: 'flex',
       flexWrap: 'nowrap',
       justifyContent: 'space-between',
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const ContentContainer = styled('div')(({ theme }) => ({
diff --git a/odd-platform-ui/src/components/shared/elements/DonutChart/DonutChart.tsx b/odd-platform-ui/src/components/shared/elements/DonutChart/DonutChart.tsx
index e2c76477b..ba6a991cf 100644
--- a/odd-platform-ui/src/components/shared/elements/DonutChart/DonutChart.tsx
+++ b/odd-platform-ui/src/components/shared/elements/DonutChart/DonutChart.tsx
@@ -81,17 +81,24 @@ const CustomPieLabel = ({ viewBox, value, label }: LabelProps & { label?: string
 };
 
 const DonutChart: React.FC<DonutChartProps> = props => {
-  const { data, label, ...pieChartProps } = props;
+  const { data: rawData, label, ...pieChartProps } = props;
   const { width, height, innerRadius, outerRadius } = pieChartProps;
   const totalValue = useMemo(
-    () => data.reduce((acc, { value }) => acc + value, 0),
-    [data]
+    () => rawData.reduce((acc, { value }) => acc + value, 0),
+    [rawData]
   );
 
+  const data = useMemo(() => {
+    if (totalValue === 0)
+      return [{ title: 'No data', value: 1, color: palette.runStatus.UNKNOWN.color }];
+
+    return rawData;
+  }, [rawData, totalValue]);
+
   return (
     <PieChart width={width} height={height}>
       <Pie
-        label={CustomLabel}
+        label={totalValue ? CustomLabel : false}
         labelLine={false}
         data={data}
         dataKey='value'
diff --git a/odd-platform-ui/src/components/shared/elements/FileInput/FileInput.styles.ts b/odd-platform-ui/src/components/shared/elements/FileInput/FileInput.styles.ts
index 30f224876..aee438cfb 100644
--- a/odd-platform-ui/src/components/shared/elements/FileInput/FileInput.styles.ts
+++ b/odd-platform-ui/src/components/shared/elements/FileInput/FileInput.styles.ts
@@ -6,7 +6,7 @@ export const Container = styled('div')(
     ({
       display: 'flex',
       flexDirection: 'column',
-    } as CSSObject)
+    }) as CSSObject
 );
 
 export const Input = styled('div')(({ theme }) => ({
@@ -36,5 +36,5 @@ export const InputContent = styled('div')(
     ({
       display: 'flex',
       flexWrap: 'nowrap',
-    } as CSSObject)
+    }) as CSSObject
 );
diff --git a/odd-platform-ui/src/lib/hooks/api/dataEntityAttachments/dataEntityFiles.ts b/odd-platform-ui/src/lib/hooks/api/dataEntityAttachments/dataEntityFiles.ts
index a239ed614..ca6eb6b04 100644
--- a/odd-platform-ui/src/lib/hooks/api/dataEntityAttachments/dataEntityFiles.ts
+++ b/odd-platform-ui/src/lib/hooks/api/dataEntityAttachments/dataEntityFiles.ts
@@ -56,9 +56,8 @@ export function useSaveDataEntityFile() {
     mutationFn: async ({ dataEntityId, file }: UseSaveDataEntityFileParams) => {
       const dataEntityUploadFormData = { fileName: file.name };
       const initialUploadParams = { dataEntityId, dataEntityUploadFormData };
-      const { id: uploadId } = await dataEntityAttachmentApi.initiateFileUpload(
-        initialUploadParams
-      );
+      const { id: uploadId } =
+        await dataEntityAttachmentApi.initiateFileUpload(initialUploadParams);
 
       await uploadFile({
         file,
diff --git a/odd-platform-ui/src/redux/interfaces/dataentityLineage.ts b/odd-platform-ui/src/redux/interfaces/dataentityLineage.ts
index 361a074f8..ffe6007c3 100644
--- a/odd-platform-ui/src/redux/interfaces/dataentityLineage.ts
+++ b/odd-platform-ui/src/redux/interfaces/dataentityLineage.ts
@@ -7,7 +7,7 @@ import type { DataEntityLineageState } from 'redux/interfaces';
 
 export interface DataEntityLineageById<
   NodeT = GroupedDataEntityLineageNode,
-  EdgeT = DataEntityLineageEdge
+  EdgeT = DataEntityLineageEdge,
 > {
   rootNode: NodeT;
   upstream: DataEntityLineageStreamById<NodeT, EdgeT>;
@@ -16,7 +16,7 @@ export interface DataEntityLineageById<
 
 export interface DataEntityLineageStreamById<
   NodeT = GroupedDataEntityLineageNode,
-  EdgeT = DataEntityLineageEdge
+  EdgeT = DataEntityLineageEdge,
 > {
   nodesById: { [nodeId: number]: NodeT };
   // Id of parent entity in the tree. It is source_id of DataEntityLineageEdge for downstream, and target_id for upstream
diff --git a/odd-platform-ui/src/redux/lib/helpers.ts b/odd-platform-ui/src/redux/lib/helpers.ts
index ec2cef7f6..95db34718 100644
--- a/odd-platform-ui/src/redux/lib/helpers.ts
+++ b/odd-platform-ui/src/redux/lib/helpers.ts
@@ -5,7 +5,7 @@ export const assignWith = <
   TargetType extends Record<string, any>,
   SourceType extends Record<string, any>,
   ReturnType extends Record<keyof TargetType | keyof SourceType, unknown> = TargetType &
-    SourceType
+    SourceType,
 >(
   target: TargetType,
   source: SourceType,
@@ -35,7 +35,7 @@ export const isArray = (value: unknown): value is Array<unknown> => Array.isArra
 
 export const castDatesToTimestampInItemsArray = <
   Data extends object,
-  RData extends object
+  RData extends object,
 >(
   data: Array<Data>
 ): Array<RData> =>