Added new component for PageLayout and refactor

openshift · Jul 22, 2020 · 459c85a · 459c85a
1 parent e19a596
commit 459c85a
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 68 deletions.
diff --git a/frontend/packages/console-shared/src/components/index.ts b/frontend/packages/console-shared/src/components/index.ts
@@ -12,3 +12,4 @@ export * from './shortcuts';
 export * from './drawer';
 export * from './health-checks';
 export * from './virtualized-grid';
+export * from './layout';
diff --git a/frontend/packages/console-shared/src/components/layout/PageLayout.scss b/frontend/packages/console-shared/src/components/layout/PageLayout.scss
@@ -0,0 +1,22 @@
+.ocs-page-layout {
+  &__content {
+    padding: var(--pf-global--spacer--lg);
+    flex: 1;
+  }
+
+  &__header {
+    background-color: var(--pf-global--BackgroundColor--light-100);
+  }
+
+  &__hint {
+    padding-left: var(--pf-global--spacer--lg);
+    padding-right: var(--pf-global--spacer--lg);
+    padding-bottom: var(--pf-global--spacer--md);
+  }
+
+  &__title {
+    padding-left: var(--pf-global--spacer--lg);
+    padding-right: var(--pf-global--spacer--lg);
+  }
+
+}
diff --git a/frontend/packages/console-shared/src/components/layout/PageLayout.tsx b/frontend/packages/console-shared/src/components/layout/PageLayout.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Text } from '@patternfly/react-core';
+
+import './PageLayout.scss';
+
+type PageLayoutProps = {
+  children: React.ReactNode;
+  title: React.ReactNode;
+  hint?: React.ReactNode;
+};
+
+const PageLayout: React.FC<PageLayoutProps> = ({ children, title, hint }) => (
+  <>
+    <div className="ocs-page-layout__header">
+      <Text component="h1" className="ocs-page-layout__title">
+        {title}
+      </Text>
+      {hint && <div className="ocs-page-layout__hint">{hint}</div>}
+    </div>
+    <div className="ocs-page-layout__content">{children}</div>
+  </>
+);
+
+export default PageLayout;
diff --git a/frontend/packages/console-shared/src/components/layout/index.ts b/frontend/packages/console-shared/src/components/layout/index.ts
@@ -0,0 +1 @@
+export { default as PageLayout } from './PageLayout';
diff --git a/frontend/packages/dev-console/src/components/EmptyState.scss b/frontend/packages/dev-console/src/components/EmptyState.scss
diff --git a/frontend/packages/dev-console/src/components/EmptyState.tsx b/frontend/packages/dev-console/src/components/EmptyState.tsx
@@ -2,14 +2,13 @@ import * as React from 'react';
 import { Gallery, GalleryItem } from '@patternfly/react-core';
 import { CatalogTile } from '@patternfly/react-catalog-view-extension';
 import { connect } from 'react-redux';
-import { history, PageHeading, useAccessReview } from '@console/internal/components/utils';
+import { history, useAccessReview } from '@console/internal/components/utils';
 import { useExtensions } from '@console/plugin-sdk';
 import { RootState } from '@console/internal/redux';
 import { isAddAction, AddAction } from '../extensions/add-actions';
 import GuidedTourTile from './GuidedTourTile';
 
-import './EmptyState.scss';
-import { ALL_NAMESPACES_KEY } from '@console/shared';
+import { ALL_NAMESPACES_KEY, PageLayout } from '@console/shared';
 
 const navigateTo = (e: React.SyntheticEvent, url: string) => {
   history.push(url);
@@ -41,7 +40,7 @@ const Item: React.FC<ItemProps> = ({
     <GalleryItem>
       <CatalogTile
         data-test-id={id}
-        className="odc-empty-state__tile"
+        className="co-catalog-tile"
         onClick={(e: React.SyntheticEvent) => navigateTo(e, resolvedUrl)}
         href={resolvedUrl}
         title={label}
@@ -75,24 +74,14 @@ const ODCEmptyState: React.FC<Props> = ({
   ).filter(({ properties: { hide } }) => (hide ? hide() : true));
 
   return (
-    <>
-      <div className="odc-empty-state__title">
-        <PageHeading title={title} />
-        {hintBlock && (
-          <div className="co-catalog-page__description odc-empty-state__hint-block">
-            {hintBlock}
-          </div>
-        )}
-      </div>
-      <div className="odc-empty-state__content">
-        <Gallery className="co-catalog-tile-view" hasGutter>
-          <GuidedTourTile />
-          {addActionExtensions.map((action) => (
-            <Item key={action.properties.id} namespace={activeNamespace} action={action} />
-          ))}
-        </Gallery>
-      </div>
-    </>
+    <PageLayout title={title} hint={hintBlock}>
+      <Gallery className="co-catalog-tile-view" hasGutter>
+        <GuidedTourTile />
+        {addActionExtensions.map((action) => (
+          <Item key={action.properties.id} namespace={activeNamespace} action={action} />
+        ))}
+      </Gallery>
+    </PageLayout>
   );
 };
 

diff --git a/frontend/packages/dev-console/src/components/import/SamplesCatalog.tsx b/frontend/packages/dev-console/src/components/import/SamplesCatalog.tsx
@@ -5,18 +5,12 @@ import { Gallery, GalleryItem } from '@patternfly/react-core';
 import { CatalogTile } from '@patternfly/react-catalog-view-extension';
 import { ImageStreamModel } from '@console/internal/models';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
-import {
-  FirehoseResource,
-  PageHeading,
-  LoadingBox,
-  history,
-} from '@console/internal/components/utils';
+import { FirehoseResource, LoadingBox, history } from '@console/internal/components/utils';
+import { PageLayout } from '@console/shared';
 import { normalizeBuilderImages, NormalizedBuilderImages } from '../../utils/imagestream-utils';
 import ProjectListPage from '../projects/ProjectListPage';
 import NamespacedPage from '../NamespacedPage';
 
-import '../EmptyState.scss';
-
 const imageStreamResource: FirehoseResource = {
   kind: ImageStreamModel.kind,
   prop: 'imageStreams',
@@ -47,7 +41,7 @@ const SampleCatalog: React.FC<SampleCatalogProps> = ({ match }) => {
     return (
       <GalleryItem key={name}>
         <CatalogTile
-          className="odc-empty-state__tile"
+          className="co-catalog-tile"
           onClick={handleClick}
           href={url}
           title={title}
@@ -65,19 +59,14 @@ const SampleCatalog: React.FC<SampleCatalogProps> = ({ match }) => {
       </Helmet>
       <NamespacedPage hideApplications>
         {namespace ? (
-          <>
-            <div className="odc-empty-state__title">
-              <PageHeading title="Samples" />
-              <div className="co-catalog-page__description odc-empty-state__hint-block">
-                Get Started using applications by choosing a code sample.
-              </div>
-            </div>
-            <div className="odc-empty-state__content">
-              <Gallery className="co-catalog-tile-view" hasGutter>
-                {galleryItems}
-              </Gallery>
-            </div>
-          </>
+          <PageLayout
+            title="Samples"
+            hint="Get Started using applications by choosing a code sample."
+          >
+            <Gallery className="co-catalog-tile-view" hasGutter>
+              {galleryItems}
+            </Gallery>
+          </PageLayout>
         ) : (
           <ProjectListPage title="Samples">
             Select a project to view the list of Samples.

diff --git a/frontend/packages/dev-console/src/plugin.tsx b/frontend/packages/dev-console/src/plugin.tsx
@@ -1,6 +1,12 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-import { CodeIcon, BoltIcon, DatabaseIcon, CatalogIcon } from '@patternfly/react-icons';
+import {
+  BoltIcon,
+  CatalogIcon,
+  CodeIcon,
+  DatabaseIcon,
+  LaptopCodeIcon,
+} from '@patternfly/react-icons';
 import {
   Plugin,
   ModelDefinition,
@@ -887,7 +893,7 @@ const plugin: Plugin<ConsumedExtensions> = [
       url: '/samples',
       label: 'Samples',
       description: 'Create an application from a code sample',
-      icon: <CodeIcon />,
+      icon: <LaptopCodeIcon />,
       accessReview: [
         BuildConfigModel,
         ImageStreamModel,