From fcd3112474ea79d82bf2ca9265d1f1df775f0e41 Mon Sep 17 00:00:00 2001 From: R-Lawton Date: Wed, 23 Oct 2024 14:27:04 +0100 Subject: [PATCH 1/4] adding create resource button to overview page Signed-off-by: R-Lawton --- src/components/KuadrantOverviewPage.tsx | 93 ++++++++++++++++++++++++- src/components/kuadrant.css | 8 ++- 2 files changed, 99 insertions(+), 2 deletions(-) diff --git a/src/components/KuadrantOverviewPage.tsx b/src/components/KuadrantOverviewPage.tsx index 4dd2c09..8a3ce57 100644 --- 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,40 @@ 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 = () => { + console.log("Hello toggle click",!isCreateOpen) + setIsCreateOpen(!isCreateOpen); + }; + React.useEffect(() => { if (ns && ns !== activeNamespace) { @@ -118,6 +143,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, 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 ( <> @@ -301,6 +350,38 @@ const KuadrantOverviewPage: React.FC = () => { namespace="#ALL_NS#" paginationLimit={5} /> +
+ ) => ( + + {t('Create Policy')} + + )} + > + + + {t('AuthPolicy')} + + + {t('RateLimitPolicy')} + + + {t('DNSPolicy')} + + + {t('TLSPolicy')} + + + +
@@ -310,7 +391,7 @@ const KuadrantOverviewPage: React.FC = () => { - {t('Gateways')} + {t('Gateways test')} { namespace="#ALL_NS#" emtpyResourceName="Gateways" /> +
+ +
@@ -334,6 +420,11 @@ const KuadrantOverviewPage: React.FC = () => { namespace="#ALL_NS#" emtpyResourceName="HTTPRoutes" /> +
+ +
diff --git a/src/components/kuadrant.css b/src/components/kuadrant.css index 172d954..f6f55df 100644 --- a/src/components/kuadrant.css +++ b/src/components/kuadrant.css @@ -139,4 +139,10 @@ .kuadrant-policy-list-body { width: 100%; -} \ No newline at end of file +} + +.kuadrant-overview-create-button { + position: absolute; + top: 30px; + right: 30px; +} From 35c70ce3191df99b4c2ec7c4e22e958f094b0116 Mon Sep 17 00:00:00 2001 From: R-Lawton Date: Wed, 23 Oct 2024 14:40:00 +0100 Subject: [PATCH 2/4] linter and i18n Signed-off-by: R-Lawton --- locales/en/plugin__kuadrant-console-plugin.json | 4 +++- src/components/KuadrantOverviewPage.tsx | 4 +--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/locales/en/plugin__kuadrant-console-plugin.json b/locales/en/plugin__kuadrant-console-plugin.json index 459ecc9..cf1fe8d 100644 --- a/locales/en/plugin__kuadrant-console-plugin.json +++ b/locales/en/plugin__kuadrant-console-plugin.json @@ -109,5 +109,7 @@ "Visit the blog": "Visit the blog", "Weight": "Weight", "YAML View": "YAML View", - "You can view and create HTTPRoutes": "You can view and create HTTPRoutes" + "You can view and create HTTPRoutes": "You can view and create HTTPRoutes", + "Create Gateway": "Create Gateway", + "Create HTTPRoute":"Create HTTPRoute" } \ No newline at end of file diff --git a/src/components/KuadrantOverviewPage.tsx b/src/components/KuadrantOverviewPage.tsx index 8a3ce57..31fa334 100644 --- a/src/components/KuadrantOverviewPage.tsx +++ b/src/components/KuadrantOverviewPage.tsx @@ -68,11 +68,9 @@ const KuadrantOverviewPage: React.FC = () => { sessionStorage.getItem('hideGettingStarted') === 'true', ); const onToggleClick = () => { - console.log("Hello toggle click",!isCreateOpen) setIsCreateOpen(!isCreateOpen); }; - React.useEffect(() => { if (ns && ns !== activeNamespace) { setActiveNamespace(ns); @@ -391,7 +389,7 @@ const KuadrantOverviewPage: React.FC = () => { - {t('Gateways test')} + {t('Gateways')} Date: Wed, 23 Oct 2024 14:47:05 +0100 Subject: [PATCH 3/4] adding git diff for changes Signed-off-by: R-Lawton Signed-off-by: R-Lawton --- .github/workflows/i18n.yaml | 1 + locales/en/plugin__kuadrant-console-plugin.json | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/.github/workflows/i18n.yaml b/.github/workflows/i18n.yaml index e566c6b..8fb4212 100644 --- 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 index cf1fe8d..e66a35e 100644 --- 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", @@ -109,7 +111,5 @@ "Visit the blog": "Visit the blog", "Weight": "Weight", "YAML View": "YAML View", - "You can view and create HTTPRoutes": "You can view and create HTTPRoutes", - "Create Gateway": "Create Gateway", - "Create HTTPRoute":"Create HTTPRoute" + "You can view and create HTTPRoutes": "You can view and create HTTPRoutes" } \ No newline at end of file From b088bf742b2904826eef8b264c3cbee8826d53fc Mon Sep 17 00:00:00 2001 From: R-Lawton Date: Thu, 24 Oct 2024 15:36:41 +0100 Subject: [PATCH 4/4] aligning buttons with title Signed-off-by: R-Lawton --- src/components/KuadrantOverviewPage.tsx | 86 ++++++++++++------------- src/components/kuadrant.css | 8 ++- 2 files changed, 49 insertions(+), 45 deletions(-) diff --git a/src/components/KuadrantOverviewPage.tsx b/src/components/KuadrantOverviewPage.tsx index 31fa334..2e9c669 100644 --- a/src/components/KuadrantOverviewPage.tsx +++ b/src/components/KuadrantOverviewPage.tsx @@ -335,6 +335,37 @@ const KuadrantOverviewPage: React.FC = () => { {t('Policies')} + ) => ( + + {t('Create Policy')} + + )} + > + + + {t('AuthPolicy')} + + + {t('RateLimitPolicy')} + + + {t('DNSPolicy')} + + + {t('TLSPolicy')} + + + { namespace="#ALL_NS#" paginationLimit={5} /> -
- ) => ( - - {t('Create Policy')} - - )} - > - - - {t('AuthPolicy')} - - - {t('RateLimitPolicy')} - - - {t('DNSPolicy')} - - - {t('TLSPolicy')} - - - -
- {t('Gateways')} + { namespace="#ALL_NS#" emtpyResourceName="Gateways" /> -
- -
@@ -410,6 +409,12 @@ const KuadrantOverviewPage: React.FC = () => { {t('APIs / HTTPRoutes')} + { namespace="#ALL_NS#" emtpyResourceName="HTTPRoutes" /> -
- -
diff --git a/src/components/kuadrant.css b/src/components/kuadrant.css index f6f55df..d8dfd77 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; + }