Field Selector: Show scroll and add "suggested" section for fields (#113178)

* Show scrollbar

* ActiveFields: move suggested fields to another section

* Translations

* Update tests

public/app/features/logs/components/fieldSelector/ActiveFields.tsx

@@ -44,12 +44,16 @@ export const ActiveFields = ({ activeFields, clear, fields, reorder, suggestedFi
           (name) => fields.find((field) => field.name === name) ?? suggestedFields.find((field) => field.name === name)
         )
         .filter((field) => field !== undefined),
-      ...suggestedFields.filter((suggestedField) => !activeFields.includes(suggestedField.name)),
     ],
     [activeFields, fields, suggestedFields]
   );
 
-  if (active.length) {
+  const suggested = useMemo(
+    () => suggestedFields.filter((suggestedField) => !activeFields.includes(suggestedField.name)),
+    [activeFields, suggestedFields]
+  );
+
+  if (active.length || suggested.length) {
     return (
       <>
         <div className={styles.columnHeader}>
@@ -96,6 +100,20 @@ export const ActiveFields = ({ activeFields, clear, fields, reorder, suggestedFi
             )}
           </Droppable>
         </DragDropContext>
+        {suggested.length > 0 && (
+          <>
+            <div className={styles.columnSubHeader}>
+              <Trans i18nKey="explore.logs-table-multi-select.suggested-fields">Suggested</Trans>
+            </div>
+            <div className={styles.columnWrapper}>
+              {suggested.map((field) => (
+                <div className={styles.wrap} key={field.name}>
+                  <Field field={field} toggle={toggle} />
+                </div>
+              ))}
+            </div>
+          </>
+        )}
       </>
     );
   }
@@ -129,6 +147,10 @@ export function getLogsFieldsStyles(theme: GrafanaTheme2) {
       zIndex: 3,
       marginBottom: theme.spacing(2),
     }),
+    columnSubHeader: css({
+      padding: theme.spacing(0, 0, 0.75, 0.5),
+      color: theme.colors.text.secondary,
+    }),
     columnHeaderButton: css({
       appearance: 'none',
       background: 'none',

public/app/features/logs/components/fieldSelector/FieldList.tsx

@@ -48,12 +48,7 @@ function getStyles(theme: GrafanaTheme2) {
     sidebarWrap: css({
       overflowY: 'scroll',
       flex: 1,
-      /* Hide scrollbar for Chrome, Safari, and Opera */
+      scrollbarWidth: 'thin',
-      '&::-webkit-scrollbar': {
-        display: 'none',
-      },
-      /* Hide scrollbar for Firefox */
-      scrollbarWidth: 'none',
     }),
     columnHeader: css({
       display: 'flex',

public/locales/en-US/grafana.json

@@ -7189,7 +7189,8 @@
     "logs-table-multi-select": {
       "fields": "Fields",
       "reset": "Reset",
-      "selected-fields": "Selected fields"
+      "selected-fields": "Selected fields",
+      "suggested-fields": "Suggested"
     },
     "logs-table-wrap": {
       "aria-label-select-query-by-name": "Select query by name",