Create shared PanelHeading and CollapsibleFileList components (#22995)

GitOrigin-RevId: ffe524cc0ddf6a1cf532a50f37900b1747b2afee

services/web/frontend/js/shared/components/collapsible-file-header.tsx

@@ -0,0 +1,21 @@
+import MaterialIcon from '@/shared/components/material-icon'
+import { Dispatch, FC, SetStateAction } from 'react'
+
+export const CollapsibleFileHeader: FC<{
+  name: string
+  count: number
+  collapsed: boolean
+  toggleCollapsed: Dispatch<SetStateAction<any>>
+}> = ({ name, count, collapsed, toggleCollapsed }) => (
+  <button
+    type="button"
+    className="collapsible-file-header"
+    onClick={toggleCollapsed}
+  >
+    <MaterialIcon
+      type={collapsed ? 'keyboard_arrow_right' : 'keyboard_arrow_down'}
+    />
+    {name}
+    <div className="collapsible-file-header-count">{count}</div>
+  </button>
+)

services/web/frontend/js/shared/components/panel-heading.tsx

@@ -0,0 +1,38 @@
+import { FC } from 'react'
+import SplitTestBadge from '@/shared/components/split-test-badge'
+import MaterialIcon from '@/shared/components/material-icon'
+import { useTranslation } from 'react-i18next'
+
+export const PanelHeading: FC<{
+  title: string
+  splitTestName?: string
+  children?: React.ReactNode
+  handleClose(): void
+}> = ({ title, splitTestName, children, handleClose }) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="panel-heading">
+      <div className="panel-heading-label">
+        <span>{title}</span>
+        {splitTestName && (
+          <SplitTestBadge
+            splitTestName={splitTestName}
+            displayOnVariants={['enabled']}
+          />
+        )}
+      </div>
+
+      {children}
+
+      <button
+        type="button"
+        className="btn panel-heading-close-button"
+        aria-label={t('close')}
+        onClick={handleClose}
+      >
+        <MaterialIcon type="close" />
+      </button>
+    </div>
+  )
+}