feat(gallery-web): always show header, change texts

Author: r0b1n

packages/pluggableWidgets/gallery-web/src/Gallery.editorConfig.ts

@@ -26,10 +26,6 @@ export function getProperties(
         hidePropertyIn(defaultProperties, values, "emptyPlaceholder");
     }
 
-    if (!showHeader(values)) {
-        hidePropertyIn(defaultProperties, values, "filtersPlaceholder");
-    }
-
     if (values.itemSelection === "None") {
         hidePropertyIn(defaultProperties, values, "onSelectionChange");
     }
@@ -116,7 +112,7 @@ export function getPreview(values: GalleryPreviewProps, isDarkMode: boolean): St
             {
                 type: "DropZone",
                 property: values.filtersPlaceholder,
-                placeholder: "Gallery header: Place widgets here"
+                placeholder: "Place widgets like filter widget(s) and action button(s) here"
             } as DropZoneProps
         ]
     } as RowLayoutProps;
@@ -187,14 +183,10 @@ export function getPreview(values: GalleryPreviewProps, isDarkMode: boolean): St
 
     return {
         type: "Container",
-        children: [titleHeader, ...(showHeader(values) ? [filters] : []), content, ...footer]
+        children: [titleHeader, filters, content, ...footer]
     };
 }
 
 function getSingularPlural(word: string, elements: number): string {
     return elements > 1 ? word + "s" : word;
 }
-
-function showHeader(values: GalleryPreviewProps): boolean {
-    return values.filterList?.length > 0 || values.sortList?.length > 0 || values.itemSelection === "Multi";
-}

packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx

@@ -8,7 +8,6 @@ function Preview(props: GalleryPreviewProps): ReactElement {
         id: String(index) as GUID
     }));
 
-    const showHeader = props.filterList.length > 0 || props.sortList.length > 0 || props.itemSelection === "Multi";
     return (
         <GalleryComponent
             className={props.class}
@@ -22,13 +21,11 @@ function Preview(props: GalleryPreviewProps): ReactElement {
                 [props.emptyPlaceholder]
             )}
             header={
-                showHeader ? (
-                    <props.filtersPlaceholder.renderer caption="Gallery header: Place widgets here">
-                        <div />
-                    </props.filtersPlaceholder.renderer>
-                ) : null
+                <props.filtersPlaceholder.renderer caption="Place widgets like filter widget(s) and action button(s) here">
+                    <div />
+                </props.filtersPlaceholder.renderer>
             }
-            showHeader={!!props.filterList.length}
+            showHeader
             hasMoreItems={false}
             items={items}
             itemRenderer={useCallback(