feat: add clear selection button label config

Author: yordan-st

packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx

@@ -117,6 +117,7 @@ const Container = observer((props: Props): ReactElement => {
                 pageSize={props.pageSize}
                 paginationType={props.pagination}
                 loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
+                clearSelectionButtonLabel={props.clearSelectionButtonLabel?.value}
                 paging={paginationCtrl.showPagination}
                 pagingPosition={props.pagingPosition}
                 showPagingButtons={props.showPagingButtons}

packages/pluggableWidgets/datagrid-web/src/Datagrid.xml

@@ -65,6 +65,13 @@
                     <caption>Show refresh indicator</caption>
                     <description>Show a refresh indicator when the data is being loaded.</description>
                 </property>
+                <property key="clearSelectionButtonLabel" type="textTemplate" required="false">
+                    <caption>Clear selection</caption>
+                    <description>Customize the label of the 'Clear section' button</description>
+                    <translations>
+                        <translation lang="en_US">Clear selection</translation>
+                    </translations>
+                </property>
             </propertyGroup>
             <propertyGroup caption="Columns">
                 <property key="columns" type="object" isList="true">

packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx

@@ -48,6 +48,7 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     page: number;
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
+    clearSelectionButtonLabel?: string;
     pageSize: number;
     paging: boolean;
     pagingPosition: PagingPositionEnum;
@@ -118,6 +119,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         headerContent,
         headerTitle,
         loadMoreButtonCaption,
+        clearSelectionButtonLabel,
         numberOfItems,
         page,
         pageSize,
@@ -235,6 +237,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                 pagingPosition={pagingPosition}
                 paginationType={paginationType}
                 loadMoreButtonCaption={loadMoreButtonCaption}
+                clearSelectionButtonLabel={clearSelectionButtonLabel}
                 hasMoreItems={hasMoreItems}
                 setPage={setPage}
             />

packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx

@@ -9,17 +9,28 @@ type WidgetFooterProps = {
     pagination: ReactNode;
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
+    clearSelectionButtonLabel?: string;
     hasMoreItems: boolean;
     setPage?: (computePage: (prevPage: number) => number) => void;
 } & JSX.IntrinsicElements["div"];
 
 export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
-    const { pagingPosition, pagination, paginationType, loadMoreButtonCaption, hasMoreItems, setPage, ...rest } = props;
+    const {
+        pagingPosition,
+        pagination,
+        paginationType,
+        loadMoreButtonCaption,
+        clearSelectionButtonLabel,
+        hasMoreItems,
+        setPage,
+        ...rest
+    } = props;
+
     return (
         <div {...rest} className="widget-datagrid-footer table-footer">
             <div className="widget-datagrid-paging-bottom">
                 <div className="widget-datagrid-pb-start">
-                    <SelectionCounter />
+                    <SelectionCounter clearSelectionButtonLabel={clearSelectionButtonLabel} />
                 </div>
                 {hasMoreItems && paginationType === "loadMore" && (
                     <div className="widget-datagrid-pb-middle">
@@ -40,14 +51,18 @@ export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
     );
 }
 
-const SelectionCounter = observer(function SelectionCounter() {
+const SelectionCounter = observer(function SelectionCounter({
+    clearSelectionButtonLabel
+}: {
+    clearSelectionButtonLabel?: string;
+}) {
     const { selectionCountStore, selectActionHelper } = useDatagridRootScope();
 
     return (
         <If condition={selectionCountStore.displayCount !== ""}>
             <span className="widget-datagrid-selection-count">{selectionCountStore.displayCount}</span>&nbsp;|&nbsp;
             <button className="widget-datagrid-clear-selection" onClick={selectActionHelper.onClearSelection}>
-                Clear selection
+                {clearSelectionButtonLabel || "Clear selection"}
             </button>
         </If>
     );

packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts

@@ -98,6 +98,7 @@ export interface DatagridContainerProps {
     keepSelection: boolean;
     loadingType: LoadingTypeEnum;
     refreshIndicator: boolean;
+    clearSelectionButtonLabel?: DynamicValue<string>;
     columns: ColumnsType[];
     columnsFilterable: boolean;
     pageSize: number;
@@ -150,6 +151,7 @@ export interface DatagridPreviewProps {
     keepSelection: boolean;
     loadingType: LoadingTypeEnum;
     refreshIndicator: boolean;
+    clearSelectionButtonLabel: string;
     columns: ColumnsPreviewType[];
     columnsFilterable: boolean;
     pageSize: number | null;