Merge pull request #134 from Kuadrant/bug-fixes

adding create resource button to overview page
Kuadrant · Oct 24, 2024 · 7786873 · 7786873
2 parents b391657 + b088bf7
commit 7786873
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 2 deletions.
diff --git a/.github/workflows/i18n.yaml b/.github/workflows/i18n.yaml
@@ -29,6 +29,7 @@ jobs:
         run: |
           if [[ $(git status --porcelain) ]]; then
             echo "i18n generation caused changes, failing the build."
+            git diff
             exit 1
           else
             echo "No changes detected."

diff --git a/locales/en/plugin__kuadrant-console-plugin.json b/locales/en/plugin__kuadrant-console-plugin.json
@@ -19,6 +19,8 @@
   "Create": "Create",
   "Create AuthPolicy": "Create AuthPolicy",
   "Create DNS Policy": "Create DNS Policy",
+  "Create Gateway": "Create Gateway",
+  "Create HTTPRoute": "Create HTTPRoute",
   "Create Policies in": "Create Policies in",
   "Create Policy": "Create Policy",
   "Create RateLimit Policy": "Create RateLimit Policy",

diff --git a/src/components/KuadrantOverviewPage.tsx b/src/components/KuadrantOverviewPage.tsx
@@ -22,6 +22,7 @@ import {
   DropdownItem,
   DropdownList,
   MenuToggle,
+  Button,
 } from '@patternfly/react-core';
 import {
   GlobeIcon,
@@ -37,16 +38,38 @@ import ResourceList from './ResourceList';
 import { sortable } from '@patternfly/react-table';
 import { INTERNAL_LINKS, EXTERNAL_LINKS } from '../constants/links';
 import resourceGVKMapping from '../utils/latest';
+import { useHistory } from 'react-router-dom';
 
+export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
+
+interface Resource {
+  name: string;
+  gvk: {
+    group: string;
+    version: string;
+    kind: string;
+  };
+}
+export const resources: Resource[] = [
+  { name: 'AuthPolicies', gvk: resourceGVKMapping['AuthPolicy'] },
+  { name: 'DNSPolicies', gvk: resourceGVKMapping['DNSPolicy'] },
+  { name: 'RateLimitPolicies', gvk: resourceGVKMapping['RateLimitPolicy'] },
+  { name: 'TLSPolicies', gvk: resourceGVKMapping['TLSPolicy'] },
+];
 const KuadrantOverviewPage: React.FC = () => {
+  const history = useHistory();
   const { t } = useTranslation('plugin__kuadrant-console-plugin');
   const { ns } = useParams<{ ns: string }>();
   const [activeNamespace, setActiveNamespace] = useActiveNamespace();
   const [isExpanded, setIsExpanded] = React.useState(true);
   const [isOpen, setIsOpen] = React.useState(false);
+  const [isCreateOpen, setIsCreateOpen] = React.useState(false);
   const [hideCard, setHideCard] = React.useState(
     sessionStorage.getItem('hideGettingStarted') === 'true',
   );
+  const onToggleClick = () => {
+    setIsCreateOpen(!isCreateOpen);
+  };
 
   React.useEffect(() => {
     if (ns && ns !== activeNamespace) {
@@ -118,6 +141,30 @@ const KuadrantOverviewPage: React.FC = () => {
     },
   ];
 
+  const handleCreateResource = (resource) => {
+    const resolvedNamespace = activeNamespace === '#ALL_NS#' ? 'default' : activeNamespace;
+
+    if (resource === 'Gateway') {
+      const gateway = resourceGVKMapping['Gateway'];
+      history.push(
+        `/k8s/ns/${resolvedNamespace}/${gateway.group}~${gateway.version}~${gateway.kind}/~new`,
+      );
+    } else {
+      const httpRoute = resourceGVKMapping['HTTPRoute'];
+      history.push(
+        `/k8s/ns/${resolvedNamespace}/${httpRoute.group}~${httpRoute.version}~${httpRoute.kind}/~new`,
+      );
+    }
+  };
+
+  const onMenuSelect = (_event: React.MouseEvent<Element, MouseEvent>, policyType: string) => {
+    const resource = resourceGVKMapping[policyType];
+    const resolvedNamespace = activeNamespace === '#ALL_NS#' ? 'default' : activeNamespace;
+    const targetUrl = `/k8s/ns/${resolvedNamespace}/${resource.group}~${resource.version}~${resource.kind}/~new`;
+    history.push(targetUrl);
+    setIsOpen(false);
+  };
+
   return (
     <>
       <Helmet>
@@ -288,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
@@ -305,12 +383,17 @@ const KuadrantOverviewPage: React.FC = () => {
               </Card>
             </FlexItem>
           </Flex>
-
           <Flex className="pf-u-mt-xl">
             <FlexItem flex={{ default: 'flex_1' }}>
               <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
@@ -326,6 +409,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

diff --git a/src/components/kuadrant.css b/src/components/kuadrant.css
@@ -139,4 +139,14 @@
 
 .kuadrant-policy-list-body {
   width: 100%;
-}
+}
+
+.kuadrant-overview-create-button {
+  position: absolute;
+  top: 0;   
+  right: 0; 
+}
+
+.kuadrant-overview-create-list, .kuadrant-overview-create-button {
+  font-family: RedHatText, helvetica, arial, sans-serif;
+   }