feat: add tags on item header, used for filters in LL

For LL items we don't apply filters.
Show a tag in the item header to indicate this to the user.

src/components/Item/ItemHeader/ItemHeader.js

@@ -6,6 +6,7 @@ import EditItemActions from './EditItemActions.js'
 import PrintItemInfo from './PrintItemInfo.js'
 import classes from './styles/ItemHeader.module.css'
 import ViewItemActions from './ViewItemActions.js'
+import ViewItemTags from './ViewItemTags.js'
 
 const getItemActionsMap = (isShortened) => {
     return {
@@ -16,12 +17,15 @@ const getItemActionsMap = (isShortened) => {
 }
 
 const ItemHeader = React.forwardRef(
-    ({ dashboardMode, title, isShortened, ...rest }, ref) => {
+    ({ dashboardMode, title, isShortened, tags, ...rest }, ref) => {
         const Actions = getItemActionsMap(isShortened)[dashboardMode]
         return (
             <div className={classes.itemHeaderWrap} ref={ref}>
                 <p className={classes.itemTitle}>{title}</p>
-                {Actions ? <Actions {...rest} /> : null}
+                <div className={classes.itemHeaderRightWrap}>
+                    {tags ? <ViewItemTags tags={tags} /> : null}
+                    {Actions ? <Actions {...rest} /> : null}
+                </div>
             </div>
         )
     }
@@ -32,6 +36,7 @@ ItemHeader.displayName = 'ItemHeader'
 ItemHeader.propTypes = {
     dashboardMode: PropTypes.string,
     isShortened: PropTypes.bool,
+    tags: PropTypes.node,
     title: PropTypes.string,
 }
 

src/components/Item/ItemHeader/ViewItemTags.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import classes from './styles/ItemHeader.module.css'
+
+const ViewItemTags = ({ tags }) =>
+    tags ? <div className={classes.itemTagsWrap}>{tags}</div> : null
+
+ViewItemTags.propTypes = {
+    tags: PropTypes.node,
+}
+
+export default ViewItemTags

src/components/Item/ItemHeader/styles/ItemHeader.module.css

@@ -13,10 +13,13 @@
     align-self: center;
 }
 
-.itemActionsWrap {
-    margin-left: auto;
+.itemHeaderRightWrap {
+    display: flex;
     flex-shrink: 0;
+    align-items: center;
+    margin-left: auto;
 }
+
 .itemActionsWrap button {
     margin-left: var(--spacers-dp8);
 }

src/components/Item/VisualizationItem/Item.js

@@ -1,4 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
+import { Tag, Tooltip, IconWarningFilled16 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
@@ -19,6 +20,7 @@ import {
 import {
     getDataStatisticsName,
     getItemTypeForVis,
+    EVENT_VISUALIZATION,
 } from '../../../modules/itemTypes.js'
 import { sGetIsEditing } from '../../../reducers/editDashboard.js'
 import { sGetItemActiveType } from '../../../reducers/itemActiveTypes.js'
@@ -196,6 +198,21 @@ class Item extends Component {
                 />
             ) : null
 
+        const tags =
+            Object.keys(itemFilters).length &&
+            isViewMode(dashboardMode) &&
+            activeType === EVENT_VISUALIZATION ? (
+                <Tooltip
+                    content={i18n.t(
+                        'Filters are not applied to line list dashboard items'
+                    )}
+                >
+                    <Tag negative icon={<IconWarningFilled16 />}>
+                        {i18n.t('Filters not applied')}
+                    </Tag>
+                </Tooltip>
+            ) : null
+
         return (
             <>
                 <ItemHeader
@@ -205,6 +222,7 @@ class Item extends Component {
                     ref={this.headerRef}
                     dashboardMode={dashboardMode}
                     isShortened={item.shortened}
+                    tags={tags}
                 />
                 <FatalErrorBoundary
                     message={i18n.t(

src/components/styles/ItemGrid.css

@@ -70,6 +70,7 @@
 .MAP .dashboard-item-content,
 .EVENT_CHART .dashboard-item-content,
 .EVENT_VISUALIZATION .dashboard-item-content {
+    position: relative;
     overflow: hidden;
 }