feat(variant): added No Variants page (#63)

aerogear · Sep 16, 2020 · 0ddddb8 · 0ddddb8
1 parent 4a6d11d
commit 0ddddb8
Showing 1 changed file with 34 additions and 10 deletions.
diff --git a/src/application/ApplicationDetail/ApplicationDetail.tsx b/src/application/ApplicationDetail/ApplicationDetail.tsx
@@ -1,6 +1,17 @@
 import React, { Component, ReactNode } from 'react';
 import { PushApplication } from '@aerogear/unifiedpush-admin-client';
-import { Modal, Tabs, Tab } from '@patternfly/react-core';
+import { CubesIcon, MobileAltIcon, PlusIcon } from '@patternfly/react-icons';
+import {
+  Modal,
+  Tabs,
+  Tab,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  Title,
+  EmptyStateBody,
+  Button,
+} from '@patternfly/react-core';
 
 interface Props {
   app?: PushApplication;
@@ -23,15 +34,28 @@ export class ApplicationDetail extends Component<Props> {
       //     </Button>
       // ]}
     >
-      <Tabs activeKey={0}>
-        <Tab eventKey={0} title="Users">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
+      <Tabs activeKey={0} isBox={true}>
+        <Tab eventKey={0} title="Variants">
+          <EmptyState variant={EmptyStateVariant.full}>
+            <EmptyStateIcon icon={MobileAltIcon} />
+            <Title headingLevel="h4" size="lg">
+              There are no variants yet.
+            </Title>
+            <EmptyStateBody>
+              The first step to set up your mobile device is to add a variants.
+              That will generate the code necessary to register UPS on your
+              device.
+              <br />
+              Learn more about variants in the{' '}
+              <a href="https://aerogear.org/docs/unifiedpush/ups_userguide/index/#_create_and_manage_variants">
+                documentation
+              </a>
+              .
+            </EmptyStateBody>
+            <Button variant="primary" icon={<PlusIcon />}>
+              Add A Variant
+            </Button>
+          </EmptyState>
         </Tab>
       </Tabs>
     </Modal>