adding create resource button to overview page

[R-Lawton]

Resolves #126

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: R-Lawton

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [R-Lawton]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[jasonmadigan]

Looks good. I noticed a very small mis-alignment of the button to the title. Small suggestions here:

diff --git a/src/components/KuadrantOverviewPage.tsx b/src/components/KuadrantOverviewPage.tsx
index 31fa334..c680e61 100644
--- a/src/components/KuadrantOverviewPage.tsx
+++ b/src/components/KuadrantOverviewPage.tsx
@@ -335,6 +335,37 @@ const KuadrantOverviewPage: React.FC = () => {
               <Card>
                 <CardTitle>
                   <Title headingLevel="h2">{t('Policies')}</Title>
+                  <Dropdown
+                    isOpen={isCreateOpen}
+                    onSelect={onMenuSelect}
+                    onOpenChange={setIsCreateOpen}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
+                        onClick={onToggleClick}
+                        isExpanded={isCreateOpen}
+                        variant="primary"
+                        className="kuadrant-overview-create-button pf-u-mt-md pf-u-mr-md"
+                      >
+                        {t('Create Policy')}
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList class="kuadrant-overview-create-list pf-u-p-0">
+                      <DropdownItem value="AuthPolicy" key="auth-policy">
+                        {t('AuthPolicy')}
+                      </DropdownItem>
+                      <DropdownItem value="RateLimitPolicy" key="rate-limit-policy">
+                        {t('RateLimitPolicy')}
+                      </DropdownItem>
+                      <DropdownItem value="DNSPolicy" key="dns-policy">
+                        {t('DNSPolicy')}
+                      </DropdownItem>
+                      <DropdownItem value="TLSPolicy" key="tls-policy">
+                        {t('TLSPolicy')}
+                      </DropdownItem>
+                    </DropdownList>
+                  </Dropdown>
                 </CardTitle>
                 <CardBody className="pf-u-p-10">
                   <ResourceList
@@ -348,38 +379,6 @@ const KuadrantOverviewPage: React.FC = () => {
                     namespace="#ALL_NS#"
                     paginationLimit={5}
                   />
-                  <div className="kuadrant-overview-create-button pf-u-mt-md">
-                    <Dropdown
-                      isOpen={isCreateOpen}
-                      onSelect={onMenuSelect}
-                      onOpenChange={setIsCreateOpen}
-                      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                        <MenuToggle
-                          ref={toggleRef}
-                          onClick={onToggleClick}
-                          isExpanded={isCreateOpen}
-                          variant="primary"
-                        >
-                          {t('Create Policy')}
-                        </MenuToggle>
-                      )}
-                    >
-                      <DropdownList>
-                        <DropdownItem value="AuthPolicy" key="auth-policy">
-                          {t('AuthPolicy')}
-                        </DropdownItem>
-                        <DropdownItem value="RateLimitPolicy" key="rate-limit-policy">
-                          {t('RateLimitPolicy')}
-                        </DropdownItem>
-                        <DropdownItem value="DNSPolicy" key="dns-policy">
-                          {t('DNSPolicy')}
-                        </DropdownItem>
-                        <DropdownItem value="TLSPolicy" key="tls-policy">
-                          {t('TLSPolicy')}
-                        </DropdownItem>
-                      </DropdownList>
-                    </Dropdown>
-                  </div>
                 </CardBody>
               </Card>
             </FlexItem>
@@ -390,6 +389,12 @@ const KuadrantOverviewPage: React.FC = () => {
               <Card>
                 <CardTitle>
                   <Title headingLevel="h2">{t('Gateways')}</Title>
+                  <Button
+                    onClick={() => handleCreateResource('Gateway')}
+                    className="kuadrant-overview-create-button pf-u-mt-md pf-u-mr-md"
+                  >
+                    {t(`Create Gateway`)}
+                  </Button>
                 </CardTitle>
                 <CardBody className="pf-u-p-10">
                   <ResourceList
@@ -398,11 +403,6 @@ const KuadrantOverviewPage: React.FC = () => {
                     namespace="#ALL_NS#"
                     emtpyResourceName="Gateways"
                   />
-                  <div className="kuadrant-overview-create-button pf-u-mt-md">
-                    <Button onClick={() => handleCreateResource('Gateway')}>
-                      {t(`Create Gateway`)}
-                    </Button>
-                  </div>
                 </CardBody>
               </Card>
             </FlexItem>
@@ -410,6 +410,12 @@ const KuadrantOverviewPage: React.FC = () => {
               <Card>
                 <CardTitle>
                   <Title headingLevel="h2">{t('APIs / HTTPRoutes')}</Title>
+                  <Button
+                    onClick={() => handleCreateResource('HTTPRoute')}
+                    className="kuadrant-overview-create-button pf-u-mt-md pf-u-mr-md"
+                  >
+                    {t(`Create HTTPRoute`)}
+                  </Button>
                 </CardTitle>
                 <CardBody className="pf-u-p-10">
                   <ResourceList
@@ -418,11 +424,6 @@ const KuadrantOverviewPage: React.FC = () => {
                     namespace="#ALL_NS#"
                     emtpyResourceName="HTTPRoutes"
                   />
-                  <div className="kuadrant-overview-create-button pf-u-mt-md">
-                    <Button onClick={() => handleCreateResource('HTTPRoute')}>
-                      {t(`Create HTTPRoute`)}
-                    </Button>
-                  </div>
                 </CardBody>
               </Card>
             </FlexItem>
diff --git a/src/components/kuadrant.css b/src/components/kuadrant.css
index f6f55df..380ecc4 100644
--- a/src/components/kuadrant.css
+++ b/src/components/kuadrant.css
@@ -143,6 +143,10 @@
 
 .kuadrant-overview-create-button {
   position: absolute;
-  top: 30px;   
-  right: 30px; 
+  top: 0;
+  right: 0;
+}
+
+.kuadrant-overview-create-list, .kuadrant-overview-create-button {
+  font-family: RedHatText, helvetica, arial, sans-serif;
 }

• Shifts the buttons to the CardTitle's
• Uses some PF utils for padding (PF utils use REMs for units, will scale right on mobile or resizing the page, better than pixels)
• Did have to add a small font-family reset, as titles seem to have their own font families, so set back

[jasonmadigan]

/lgtm