[app] Add hasDivider prop for PageContentSection

ricoberger · ricoberger · commit ed4e67145945 · 2022-06-30T14:23:43.000+02:00
The PageContentSection component has now a "hasDivider" property to
explicit enable and disable the Divider component. This allows us to
also show an diver when no toolbar is set. Before this the divider was
only enabled when also a toolbar was provided.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -39,6 +39,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#367](https://github.com/kobsio/kobs/pull/#367): [app] Change filtering for select components, by using `item.includes(value)`.
 - [#369](https://github.com/kobsio/kobs/pull/#369): [app] Add `insights` panel, to display the insights of an application within a dashboard.
 - [#370](https://github.com/kobsio/kobs/pull/#370): [app] Change toolbar handling by replacing the Patternfly `Toolbar` and `ToolbarItem` components with a custom `Toolbar` and `ToolbarItem` component.
+- [#371](https://github.com/kobsio/kobs/pull/#371): [app] Change `hasDivider` property to `PageContentSection` component to explicit enable / disable the diver.
 
 ## [v0.8.0](https://github.com/kobsio/kobs/releases/tag/v0.8.0) (2022-03-24)
 
diff --git a/plugins/app/public/browserconfig.xml b/plugins/app/public/browserconfig.xml
@@ -1,2 +1,2 @@
 <?xml version="1.0" encoding="utf-8"?>
-<browserconfig><msapplication><tile><square70x70logo src="ms-icon-70x70.png"/><square150x150logo src="ms-icon-150x150.png"/><square310x310logo src="ms-icon-310x310.png"/><TileColor>#0066cc</TileColor></tile></msapplication></browserconfig>
+<browserconfig><msapplication><tile><square70x70logo src="ms-icon-70x70.png"/><square150x150logo src="ms-icon-150x150.png"/><square310x310logo src="ms-icon-310x310.png"/><TileColor>#000000</TileColor></tile></msapplication></browserconfig>
diff --git a/plugins/app/public/index.html b/plugins/app/public/index.html
@@ -22,8 +22,8 @@
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-    <meta name="theme-color" content="#0066cc" />
-    <meta name="msapplication-TileColor" content="#0066cc" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="msapplication-TileColor" content="#000000" />
     <meta name="msapplication-TileImage" content="%PUBLIC_URL%/ms-icon-144x144.png" />
 
     <title>kobs</title>
diff --git a/plugins/app/public/manifest.json b/plugins/app/public/manifest.json
@@ -38,5 +38,9 @@
       "type": "image/png",
       "density": "4.0"
     }
-  ]
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
 }
diff --git a/plugins/app/src/components/applications/Application.tsx b/plugins/app/src/components/applications/Application.tsx
@@ -104,7 +104,7 @@ const Application: React.FunctionComponent = () => {
         }
       />
 
-      <PageContentSection hasPadding={false} toolbarContent={undefined} panelContent={details}>
+      <PageContentSection hasPadding={false} hasDivider={false} toolbarContent={undefined} panelContent={details}>
         {data.dashboards ? (
           <DashboardsWrapper manifest={data} references={data.dashboards} setDetails={setDetails} />
         ) : (
diff --git a/plugins/app/src/components/applications/Applications.tsx b/plugins/app/src/components/applications/Applications.tsx
@@ -45,6 +45,7 @@ const Applications: React.FunctionComponent = () => {
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={options ? <ApplicationsToolbar options={options} setOptions={changeOptions} /> : undefined}
         panelContent={
           selectedApplication ? (
diff --git a/plugins/app/src/components/dashboards/DashboardPage.tsx b/plugins/app/src/components/dashboards/DashboardPage.tsx
@@ -97,7 +97,7 @@ const DashboardPage: React.FunctionComponent = () => {
         }
       />
 
-      <PageContentSection hasPadding={true} toolbarContent={undefined} panelContent={details}>
+      <PageContentSection hasPadding={true} hasDivider={true} toolbarContent={undefined} panelContent={details}>
         <Dashboard dashboard={data} forceDefaultSpan={false} setDetails={setDetails} />
       </PageContentSection>
     </React.Fragment>
diff --git a/plugins/app/src/components/plugins/PluginInstances.tsx b/plugins/app/src/components/plugins/PluginInstances.tsx
@@ -49,6 +49,7 @@ const PluginInstances: React.FunctionComponent = () => {
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={
           <Toolbar usePageInsets={true}>
             <ToolbarItem width="200px">
diff --git a/plugins/app/src/components/plugins/PluginPageLoading.tsx b/plugins/app/src/components/plugins/PluginPageLoading.tsx
@@ -11,7 +11,7 @@ const PluginPageLoading: React.FunctionComponent = () => {
         <br />
         <Skeleton width="75%" fontSize="sm" screenreaderText="Loading description" />
       </PageSection>
-      <PageContentSection hasPadding={true} toolbarContent={undefined} panelContent={undefined}>
+      <PageContentSection hasPadding={true} hasDivider={false} toolbarContent={undefined} panelContent={undefined}>
         <p></p>
       </PageContentSection>
     </React.Fragment>
diff --git a/plugins/app/src/components/profile/Profile.tsx b/plugins/app/src/components/profile/Profile.tsx
@@ -23,7 +23,7 @@ const Profile: React.FunctionComponent = () => {
     <React.Fragment>
       <PageHeaderSection title={authContext.user.email} description="" />
 
-      <PageContentSection hasPadding={false} toolbarContent={undefined} panelContent={details}>
+      <PageContentSection hasPadding={false} hasDivider={false} toolbarContent={undefined} panelContent={details}>
         <ProfileWrapper email={authContext.user.email} setDetails={setDetails} />
       </PageContentSection>
     </React.Fragment>
diff --git a/plugins/app/src/components/resources/Resources.tsx b/plugins/app/src/components/resources/Resources.tsx
@@ -43,6 +43,7 @@ const Resources: React.FunctionComponent = () => {
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={options ? <ResourcesToolbar options={options} setOptions={changeOptions} /> : undefined}
         panelContent={details ? details : undefined}
       >
diff --git a/plugins/app/src/components/settings/Settings.tsx b/plugins/app/src/components/settings/Settings.tsx
@@ -10,7 +10,7 @@ const Settings: React.FunctionComponent = () => {
         description="The settings for you hub and all the satellites. You can also view the resources, which are available via each satellite."
       />
 
-      <PageContentSection hasPadding={true} toolbarContent={undefined} panelContent={undefined}>
+      <PageContentSection hasPadding={true} hasDivider={true} toolbarContent={undefined} panelContent={undefined}>
         <div>TODO: Show settings</div>
       </PageContentSection>
     </React.Fragment>
diff --git a/plugins/app/src/components/teams/Team.tsx b/plugins/app/src/components/teams/Team.tsx
@@ -108,7 +108,7 @@ const Team: React.FunctionComponent = () => {
         }
       />
 
-      <PageContentSection hasPadding={false} toolbarContent={undefined} panelContent={details}>
+      <PageContentSection hasPadding={false} hasDivider={false} toolbarContent={undefined} panelContent={details}>
         {data.dashboards ? (
           <DashboardsWrapper manifest={data} references={data.dashboards} setDetails={setDetails} />
         ) : (
diff --git a/plugins/app/src/components/teams/Teams.tsx b/plugins/app/src/components/teams/Teams.tsx
@@ -57,6 +57,7 @@ const Teams: React.FunctionComponent = () => {
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={
           <Toolbar usePageInsets={true}>
             <ToolbarItem>
diff --git a/plugins/app/src/components/topology/Applications.tsx b/plugins/app/src/components/topology/Applications.tsx
@@ -43,6 +43,7 @@ const Applications: React.FunctionComponent = () => {
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={options ? <ApplicationsToolbar options={options} setOptions={changeOptions} /> : undefined}
         panelContent={details}
       >
diff --git a/plugins/plugin-azure/src/components/containerinstances/Page.tsx b/plugins/plugin-azure/src/components/containerinstances/Page.tsx
@@ -29,7 +29,7 @@ const ContainerInstancesPage: React.FunctionComponent<IContainerInstancesPagePro
         }
       />
 
-      <PageContentSection hasPadding={true} toolbarContent={undefined} panelContent={details}>
+      <PageContentSection hasPadding={true} hasDivider={true} toolbarContent={undefined} panelContent={details}>
         <ContainerGroups instance={instance} resourceGroups={resourceGroups} setDetails={setDetails} />
       </PageContentSection>
     </React.Fragment>
diff --git a/plugins/plugin-azure/src/components/costmanagement/Page.tsx b/plugins/plugin-azure/src/components/costmanagement/Page.tsx
@@ -52,6 +52,7 @@ const CostManagementPage: React.FunctionComponent<ICostManagementPageProps> = ({
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={
           <CostManagementToolbar resourceGroups={resourceGroups} options={options} setOptions={changeOptions} />
         }
diff --git a/plugins/plugin-azure/src/components/kubernetesservices/Page.tsx b/plugins/plugin-azure/src/components/kubernetesservices/Page.tsx
@@ -29,7 +29,7 @@ const KubernetesServicesPage: React.FunctionComponent<IKubernetesServicesPagePro
         }
       />
 
-      <PageContentSection hasPadding={true} toolbarContent={undefined} panelContent={details}>
+      <PageContentSection hasPadding={true} hasDivider={true} toolbarContent={undefined} panelContent={details}>
         <KubernetesServices instance={instance} resourceGroups={resourceGroups} setDetails={setDetails} />
       </PageContentSection>
     </React.Fragment>
diff --git a/plugins/plugin-azure/src/components/page/OverviewPage.tsx b/plugins/plugin-azure/src/components/page/OverviewPage.tsx
@@ -29,7 +29,7 @@ const OverviewPage: React.FunctionComponent<IOverviewPageProps> = ({ instance }:
         }
       />
 
-      <PageContentSection hasPadding={true} toolbarContent={undefined} panelContent={undefined}>
+      <PageContentSection hasPadding={true} hasDivider={true} toolbarContent={undefined} panelContent={undefined}>
         <Gallery hasGutter={true}>
           {Object.keys(services).map((service) => (
             <GalleryItem key={service}>
diff --git a/plugins/plugin-azure/src/components/virtualmachinescalesets/Page.tsx b/plugins/plugin-azure/src/components/virtualmachinescalesets/Page.tsx
@@ -29,7 +29,7 @@ const VirtualMachineScaleSetsPage: React.FunctionComponent<IVirtualMachineScaleS
         }
       />
 
-      <PageContentSection hasPadding={true} toolbarContent={undefined} panelContent={details}>
+      <PageContentSection hasPadding={true} hasDivider={true} toolbarContent={undefined} panelContent={details}>
         <VirtualMachineScaleSets instance={instance} resourceGroups={resourceGroups} setDetails={setDetails} />
       </PageContentSection>
     </React.Fragment>
diff --git a/plugins/plugin-elasticsearch/src/components/page/Page.tsx b/plugins/plugin-elasticsearch/src/components/page/Page.tsx
@@ -80,6 +80,7 @@ const Page: React.FunctionComponent<IPluginPageProps> = ({ instance }: IPluginPa
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={<PageToolbar options={options} setOptions={changeOptions} />}
         panelContent={undefined}
       >
diff --git a/plugins/plugin-flux/src/components/page/Page.tsx b/plugins/plugin-flux/src/components/page/Page.tsx
@@ -45,6 +45,7 @@ const Page: React.FunctionComponent<IPluginPageProps> = ({ instance }: IPluginPa
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={<PageToolbar instance={instance} options={options} setOptions={changeOptions} />}
         panelContent={details}
       >
diff --git a/plugins/plugin-grafana/src/components/page/Page.tsx b/plugins/plugin-grafana/src/components/page/Page.tsx
@@ -41,6 +41,7 @@ const Page: React.FunctionComponent<IPluginPageProps> = ({ instance }: IPluginPa
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={<PageToolbar options={options} setOptions={changeOptions} />}
         panelContent={undefined}
       >
diff --git a/plugins/plugin-harbor/src/components/page/ArtifactsPage.tsx b/plugins/plugin-harbor/src/components/page/ArtifactsPage.tsx
@@ -99,6 +99,7 @@ const ArtifactsPage: React.FunctionComponent<IArtifactsPageProps> = ({ instance
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={<PageToolbar options={options} setOptions={changeOptions} />}
         panelContent={details}
       >
diff --git a/plugins/plugin-harbor/src/components/page/ProjectsPage.tsx b/plugins/plugin-harbor/src/components/page/ProjectsPage.tsx
@@ -89,7 +89,7 @@ const ProjectsPage: React.FunctionComponent<IProjectsPageProps> = ({ instance }:
         }
       />
 
-      <PageContentSection hasPadding={true} toolbarContent={undefined} panelContent={undefined}>
+      <PageContentSection hasPadding={true} hasDivider={true} toolbarContent={undefined} panelContent={undefined}>
         {isLoading ? (
           <div className="pf-u-text-align-center">
             <Spinner />
diff --git a/plugins/plugin-harbor/src/components/page/RepositoriesPage.tsx b/plugins/plugin-harbor/src/components/page/RepositoriesPage.tsx
@@ -97,6 +97,7 @@ const RepositoriesPage: React.FunctionComponent<IRepositoriesPageProps> = ({ ins
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={<PageToolbar options={options} setOptions={changeOptions} />}
         panelContent={undefined}
       >
diff --git a/plugins/plugin-helm/src/components/page/Page.tsx b/plugins/plugin-helm/src/components/page/Page.tsx
@@ -50,6 +50,7 @@ const Page: React.FunctionComponent<IPluginPageProps> = ({ instance }: IPluginPa
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={<PageToolbar instance={instance} options={options} setOptions={changeOptions} />}
         panelContent={details}
       >
diff --git a/plugins/plugin-istio/src/components/page/Application.tsx b/plugins/plugin-istio/src/components/page/Application.tsx
@@ -74,6 +74,7 @@ const Application: React.FunctionComponent<IApplicationProps> = ({ instance }: I
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={<ApplicationToolbar options={options} setOptions={changeOptions} />}
         panelContent={details}
       >
diff --git a/plugins/plugin-istio/src/components/page/Applications.tsx b/plugins/plugin-istio/src/components/page/Applications.tsx
@@ -58,6 +58,7 @@ const Applications: React.FunctionComponent<IApplicationsProps> = ({ instance }:
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={<ApplicationsToolbar instance={instance} options={options} setOptions={changeOptions} />}
         panelContent={undefined}
       >
diff --git a/plugins/plugin-jaeger/src/components/page/Traces.tsx b/plugins/plugin-jaeger/src/components/page/Traces.tsx
@@ -54,6 +54,7 @@ const Traces: React.FunctionComponent<ITracesProps> = ({ instance }: ITracesProp
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={<TracesToolbar instance={instance} options={options} setOptions={changeOptions} />}
         panelContent={details}
       >
diff --git a/plugins/plugin-kiali/src/components/page/Page.tsx b/plugins/plugin-kiali/src/components/page/Page.tsx
@@ -47,8 +47,9 @@ const Page: React.FunctionComponent<IPluginPageProps> = ({ instance }: IPluginPa
         }
       />
       <PageContentSection
-        toolbarContent={<PageToolbar instance={instance} options={options} setOptions={changeOptions} />}
         hasPadding={true}
+        hasDivider={true}
+        toolbarContent={<PageToolbar instance={instance} options={options} setOptions={changeOptions} />}
         panelContent={details}
       >
         {options.namespaces && options.namespaces.length > 0 ? (
diff --git a/plugins/plugin-klogs/src/components/page/AggregationPage.tsx b/plugins/plugin-klogs/src/components/page/AggregationPage.tsx
@@ -60,6 +60,7 @@ const AggregationPage: React.FunctionComponent<IAggregationPageProps> = ({ insta
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={<AggregationToolbar options={tmpOptions} setOptions={setTmpOptions} />}
         panelContent={undefined}
       >
diff --git a/plugins/plugin-klogs/src/components/page/LogsPage.tsx b/plugins/plugin-klogs/src/components/page/LogsPage.tsx
@@ -106,6 +106,7 @@ const LogsPage: React.FunctionComponent<ILogsPageProps> = ({ instance }: ILogsPa
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={<LogsToolbar options={options} setOptions={changeOptions} />}
         panelContent={undefined}
       >
diff --git a/plugins/plugin-opsgenie/src/components/page/Page.tsx b/plugins/plugin-opsgenie/src/components/page/Page.tsx
@@ -48,6 +48,7 @@ const Page: React.FunctionComponent<IPluginPageProps> = ({ instance }: IPluginPa
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={<PageToolbar options={options} setOptions={changeOptions} />}
         panelContent={details}
       >
diff --git a/plugins/plugin-prometheus/src/components/page/Page.tsx b/plugins/plugin-prometheus/src/components/page/Page.tsx
@@ -47,6 +47,7 @@ const Page: React.FunctionComponent<IPluginPageProps> = ({ instance }: IPluginPa
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={<PageToolbar instance={instance} options={options} setOptions={changeOptions} />}
         panelContent={undefined}
       >
diff --git a/plugins/plugin-rss/src/components/page/Page.tsx b/plugins/plugin-rss/src/components/page/Page.tsx
@@ -16,7 +16,7 @@ const Page: React.FunctionComponent<IPluginPageProps> = ({ instance }: IPluginPa
         }
       />
 
-      <PageContentSection hasPadding={true} toolbarContent={undefined} panelContent={undefined}>
+      <PageContentSection hasPadding={true} hasDivider={true} toolbarContent={undefined} panelContent={undefined}>
         <div></div>
       </PageContentSection>
     </React.Fragment>
diff --git a/plugins/plugin-sonarqube/src/components/page/Page.tsx b/plugins/plugin-sonarqube/src/components/page/Page.tsx
@@ -92,6 +92,7 @@ const Page: React.FunctionComponent<IPluginPageProps> = ({ instance }: IPluginPa
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={<PageToolbar options={options} setOptions={changeOptions} />}
         panelContent={undefined}
       >
diff --git a/plugins/plugin-sql/src/components/page/Page.tsx b/plugins/plugin-sql/src/components/page/Page.tsx
@@ -41,6 +41,7 @@ const Page: React.FunctionComponent<IPluginPageProps> = ({ instance }: IPluginPa
 
       <PageContentSection
         hasPadding={true}
+        hasDivider={true}
         toolbarContent={<PageToolbar options={options} setOptions={changeOptions} />}
         panelContent={undefined}
       >
diff --git a/plugins/plugin-techdocs/src/components/page/ServicePage.tsx b/plugins/plugin-techdocs/src/components/page/ServicePage.tsx
@@ -94,7 +94,7 @@ const ServicePage: React.FunctionComponent<IServicePageProps> = ({ instance }: I
         component={<PluginPageTitle satellite={data.key} name={data.name} description={data.description} />}
       />
 
-      <PageContentSection hasPadding={true} toolbarContent={undefined} panelContent={details}>
+      <PageContentSection hasPadding={true} hasDivider={true} toolbarContent={undefined} panelContent={details}>
         <ServicePageWrapper
           instance={instance}
           index={data}
diff --git a/plugins/plugin-techdocs/src/components/page/TechDocsPage.tsx b/plugins/plugin-techdocs/src/components/page/TechDocsPage.tsx
@@ -22,7 +22,7 @@ const TechDocsPage: React.FunctionComponent<ITechDocsPageProps> = ({ instance }:
         }
       />
 
-      <PageContentSection hasPadding={true} toolbarContent={undefined} panelContent={undefined}>
+      <PageContentSection hasPadding={true} hasDivider={true} toolbarContent={undefined} panelContent={undefined}>
         <Card>
           <TechDocsList instance={instance} />
         </Card>
diff --git a/plugins/shared/src/components/misc/PageContentSection.tsx b/plugins/shared/src/components/misc/PageContentSection.tsx
@@ -3,26 +3,24 @@ import React from 'react';
 
 interface IPageContentSectionProps {
   hasPadding: boolean;
+  hasDivider: boolean;
   panelContent: React.ReactNode;
   toolbarContent: React.ReactNode;
   children: React.ReactElement;
 }
 
 export const PageContentSection: React.FunctionComponent<IPageContentSectionProps> = ({
   hasPadding,
+  hasDivider,
   panelContent,
   toolbarContent,
   children,
 }: IPageContentSectionProps) => {
   return (
     <PageSection isFilled={true} padding={{ default: 'noPadding' }}>
       <Drawer isExpanded={panelContent !== undefined}>
-        {toolbarContent && (
-          <DrawerSection>
-            {toolbarContent}
-            <Divider component="div" />
-          </DrawerSection>
-        )}
+        {toolbarContent && <DrawerSection>{toolbarContent}</DrawerSection>}
+        {hasDivider && <Divider component="div" />}
         <DrawerContent className="pf-m-no-background" panelContent={panelContent}>
           <DrawerContentBody hasPadding={hasPadding}>{children}</DrawerContentBody>
         </DrawerContent>

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`<?xml version="1.0" encoding="utf-8"?>`
`2`		`-<browserconfig><msapplication><tile><square70x70logo src="ms-icon-70x70.png"/><square150x150logo src="ms-icon-150x150.png"/><square310x310logo src="ms-icon-310x310.png"/><TileColor>#0066cc</TileColor></tile></msapplication></browserconfig>`
	`2`	`+<browserconfig><msapplication><tile><square70x70logo src="ms-icon-70x70.png"/><square150x150logo src="ms-icon-150x150.png"/><square310x310logo src="ms-icon-310x310.png"/><TileColor>#000000</TileColor></tile></msapplication></browserconfig>`
Original file line number	Diff line number	Diff line change
`@@ -38,5 +38,9 @@`
`38`	`38`	`"type": "image/png",`
`39`	`39`	`"density": "4.0"`
`40`	`40`	`}`
`41`		`- ]`
	`41`	`+ ],`
	`42`	`+ "start_url": ".",`
	`43`	`+ "display": "standalone",`
	`44`	`+ "theme_color": "#000000",`
	`45`	`+ "background_color": "#ffffff"`
`42`	`46`	`}`
Original file line number	Diff line number	Diff line change
`@@ -104,7 +104,7 @@ const Application: React.FunctionComponent = () => {`
`104`	`104`	`}`
`105`	`105`	`/>`
`106`	`106`
`107`		`- <PageContentSection hasPadding={false} toolbarContent={undefined} panelContent={details}>`
	`107`	`+ <PageContentSection hasPadding={false} hasDivider={false} toolbarContent={undefined} panelContent={details}>`
`108`	`108`	`{data.dashboards ? (`
`109`	`109`	`<DashboardsWrapper manifest={data} references={data.dashboards} setDetails={setDetails} />`
`110`	`110`	`) : (`
Original file line number	Diff line number	Diff line change
`@@ -97,7 +97,7 @@ const DashboardPage: React.FunctionComponent = () => {`
`97`	`97`	`}`
`98`	`98`	`/>`
`99`	`99`
`100`		`- <PageContentSection hasPadding={true} toolbarContent={undefined} panelContent={details}>`
	`100`	`+ <PageContentSection hasPadding={true} hasDivider={true} toolbarContent={undefined} panelContent={details}>`
`101`	`101`	`<Dashboard dashboard={data} forceDefaultSpan={false} setDetails={setDetails} />`
`102`	`102`	`</PageContentSection>`
`103`	`103`	`</React.Fragment>`
Original file line number	Diff line number	Diff line change
`@@ -43,6 +43,7 @@ const Resources: React.FunctionComponent = () => {`
`43`	`43`
`44`	`44`	`<PageContentSection`
`45`	`45`	`hasPadding={true}`
	`46`	`+ hasDivider={true}`
`46`	`47`	`toolbarContent={options ? <ResourcesToolbar options={options} setOptions={changeOptions} /> : undefined}`
`47`	`48`	`panelContent={details ? details : undefined}`
`48`	`49`	`>`
Original file line number	Diff line number	Diff line change
`@@ -108,7 +108,7 @@ const Team: React.FunctionComponent = () => {`
`108`	`108`	`}`
`109`	`109`	`/>`
`110`	`110`
`111`		`- <PageContentSection hasPadding={false} toolbarContent={undefined} panelContent={details}>`
	`111`	`+ <PageContentSection hasPadding={false} hasDivider={false} toolbarContent={undefined} panelContent={details}>`
`112`	`112`	`{data.dashboards ? (`
`113`	`113`	`<DashboardsWrapper manifest={data} references={data.dashboards} setDetails={setDetails} />`
`114`	`114`	`) : (`
Original file line number	Diff line number	Diff line change
`@@ -43,6 +43,7 @@ const Applications: React.FunctionComponent = () => {`
`43`	`43`
`44`	`44`	`<PageContentSection`
`45`	`45`	`hasPadding={true}`
	`46`	`+ hasDivider={true}`
`46`	`47`	`toolbarContent={options ? <ApplicationsToolbar options={options} setOptions={changeOptions} /> : undefined}`
`47`	`48`	`panelContent={details}`
`48`	`49`	`>`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ const ContainerInstancesPage: React.FunctionComponent<IContainerInstancesPagePro`
`29`	`29`	`}`
`30`	`30`	`/>`
`31`	`31`
`32`		`- <PageContentSection hasPadding={true} toolbarContent={undefined} panelContent={details}>`
	`32`	`+ <PageContentSection hasPadding={true} hasDivider={true} toolbarContent={undefined} panelContent={details}>`
`33`	`33`	`<ContainerGroups instance={instance} resourceGroups={resourceGroups} setDetails={setDetails} />`
`34`	`34`	`</PageContentSection>`
`35`	`35`	`</React.Fragment>`
Original file line number	Diff line number	Diff line change
`@@ -52,6 +52,7 @@ const CostManagementPage: React.FunctionComponent<ICostManagementPageProps> = ({`
`52`	`52`
`53`	`53`	`<PageContentSection`
`54`	`54`	`hasPadding={true}`
	`55`	`+ hasDivider={true}`
`55`	`56`	`toolbarContent={`
`56`	`57`	`<CostManagementToolbar resourceGroups={resourceGroups} options={options} setOptions={changeOptions} />`
`57`	`58`	`}`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ const KubernetesServicesPage: React.FunctionComponent<IKubernetesServicesPagePro`
`29`	`29`	`}`
`30`	`30`	`/>`
`31`	`31`
`32`		`- <PageContentSection hasPadding={true} toolbarContent={undefined} panelContent={details}>`
	`32`	`+ <PageContentSection hasPadding={true} hasDivider={true} toolbarContent={undefined} panelContent={details}>`
`33`	`33`	`<KubernetesServices instance={instance} resourceGroups={resourceGroups} setDetails={setDetails} />`
`34`	`34`	`</PageContentSection>`
`35`	`35`	`</React.Fragment>`