Merge pull request #79 from Kuadrant/gh-59

Gh 59- Update flow

console-extensions.json

@@ -62,6 +62,14 @@
  "component": { "$codeRef": "KuadrantTLSCreatePage" }
  }
  },
+ {
+ "type": "console.page/route",
+ "properties": {
+ "exact": true,
+ "path": "/k8s/ns/:ns/tlspolicy/name/:name/edit",
+ "component": { "$codeRef": "KuadrantTLSCreatePage" }
+ }
+ },
  {
  "type": "console.navigation/section",
  "properties": {

locales/en/plugin__console-plugin-template.json

@@ -94,10 +94,18 @@
  "Configure via": "Configure via",
  "Unique name of the TLSPolicy.": "Unique name of the TLSPolicy.",
  "Reference to a Kubernetes resource that the policy attaches to. To create an additional gateway go to": "Reference to a Kubernetes resource that the policy attaches to. To create an additional gateway go to",
- "CertIssuer Issuer Reference":"CertIssuer Issuer Reference",
+ "CertIssuer Issuer Reference": "CertIssuer Issuer Reference",
  "Reference to the issuer for the created certificate. To create an additional Issuer go to": "Reference to the issuer for the created certificate. To create an additional Issuer go to",
  "Issuer API Target Reference": "Issuer API Target Reference",
  "You can view and create Issuers": "You can view and create Issuers",
  "ClusterIssuer API Target Reference": "ClusterIssuer API Target Reference",
- "You can view and create ClusterIssuers": "You can view and create ClusterIssuers"
-}
+ "You can view and create ClusterIssuers": "You can view and create ClusterIssuers",
+ "Error parsing YAM:L": "Error parsing YAML:",
+ "Edit TLS Policy": "Edit TLS Policy",
+ "Form View": "Form View",
+ "YAML View": "YAML View",
+ "Cert manager issuer type": "Cert manager issuer type",
+ "Cluster issuer": "Cluster issuer",
+ "Issuer": "Issuer",
+ "Loading..": "Loading.."
+}

src/components/DropdownWithKebab.tsx

@@ -4,22 +4,23 @@ import { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement, Bu
 import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
 import { k8sDelete, K8sResourceCommon } from '@openshift-console/dynamic-plugin-sdk';
 import getModelFromResource from '../utils/getModelFromResource'; // Assume you have a utility for getting the model from the resource
-
 type DropdownWithKebabProps = {
  obj: K8sResourceCommon;
 };
+import { useHistory } from 'react-router-dom';
 
 const DropdownWithKebab: React.FC<DropdownWithKebabProps> = ({ obj }) => {
  const [isOpen, setIsOpen] = React.useState(false);
  const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false);
+ const history = useHistory();
+ const model = getModelFromResource(obj);
 
  const onToggleClick = () => {
  setIsOpen(!isOpen);
  };
 
  const onDeleteConfirm = async () => {
  try {
- const model = getModelFromResource(obj);
  await k8sDelete({ model, resource: obj });
  console.log('Successfully deleted', obj.metadata.name);
  } catch (error) {
@@ -29,6 +30,12 @@ const DropdownWithKebab: React.FC<DropdownWithKebabProps> = ({ obj }) => {
  }
  };
 
+
+ const onEditClick = () => {
+ history.push({
+ pathname: `/k8s/ns/${obj.metadata.namespace}/tlspolicy/name/${obj.metadata.name}/edit`,
+ })
+ }
  const onDeleteClick = () => {
  setIsDeleteModalOpen(true);
  };
@@ -60,15 +67,14 @@ const DropdownWithKebab: React.FC<DropdownWithKebabProps> = ({ obj }) => {
  shouldFocusToggleOnSelect
  >
  <DropdownList>
- <DropdownItem value="edit" key="edit">
+ <DropdownItem value="edit" key="edit" onClick={onEditClick}>
  Edit
  </DropdownItem>
  <DropdownItem value="delete" key="delete">
  Delete
  </DropdownItem>
  </DropdownList>
  </Dropdown>
-
  <Modal
  isOpen={isDeleteModalOpen}
  onClose={() => setIsDeleteModalOpen(false)}

src/components/KuadrantCreateUpdate.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+
+import {
+ k8sCreate,
+ K8sModel,
+ K8sResourceCommon,
+ k8sUpdate,
+} from '@openshift-console/dynamic-plugin-sdk';
+import { useTranslation } from 'react-i18next';
+import {
+ Button,
+ AlertVariant,
+ Alert,
+ AlertGroup,
+} from '@patternfly/react-core';
+import { History } from 'history';
+
+
+interface GenericPolicyForm {
+ model: K8sModel
+ resource: K8sResourceCommon
+ policyType: string,
+ history: History
+}
+
+const KuadrantCreateUpdate: React.FC<GenericPolicyForm> = ({ model, resource, policyType, history }) => {
+ const { t } = useTranslation('plugin__console-plugin-template');
+ const [errorAlertMsg, setErrorAlertMsg] = React.useState('')
+ const update = !!resource.metadata.creationTimestamp
+
+ const handleCreateUpdate = async () => {
+ try {
+
+ if (update == true) {
+ const response = await k8sUpdate({
+ model: model,
+ data: resource,
+ })
+ console.log(`${policyType} updated successfully:`, response)
+ history.push(`/kuadrant/all-namespaces/policies/${policyType}`)
+ } else {
+ const response = await k8sCreate({
+ model: model,
+ data: resource,
+ })
+ console.log(`${policyType} created successfully:`, response)
+ history.push(`/kuadrant/all-namespaces/policies/${policyType}`)
+ }
+ } catch (error) {
+ if (update == true) {
+ console.error(t(`Cannot update ${policyType}`, error))
+ setErrorAlertMsg(error.message)
+ } {
+ console.error(t(`Cannot create ${policyType}`, error))
+ setErrorAlertMsg(error.message)
+ }
+ }
+ }
+ return (
+ <>
+ {errorAlertMsg != '' && (
+ <AlertGroup className="kuadrant-alert-group">
+ <Alert title={t(`Error creating ${policyType}`)} variant={AlertVariant.danger} isInline>
+ {errorAlertMsg}
+ </Alert>
+ </AlertGroup>
+ )}
+ <Button onClick={handleCreateUpdate}>
+ {update ? t(`Save`) : t(`Create`)}
+ </Button>
+ </>
+ )
+}
+export default KuadrantCreateUpdate

src/components/KuadrantDNSPolicyCreatePage.tsx

@@ -248,7 +248,7 @@ const KuadrantDNSPolicyCreatePage: React.FC = () => {
  </HelperText>
  </FormHelperText>
  </FormGroup>
- <NamespaceSelect selectedNamespace={selectedNamespace} onChange={setSelectedNamespace} />
+ <NamespaceSelect selectedNamespace={selectedNamespace} onChange={setSelectedNamespace}formDisabled={false} />
  <GatewaySelect selectedGateway={selectedGateway} onChange={setSelectedGateway} />
  <ExpandableSection toggleText={t('Routing Strategy')}>
  <FormGroup role="radiogroup" isInline fieldId='routing-strategy' label={t('Routing Strategy to use')} isRequired aria-labelledby="routing-strategy-label">

src/components/KuadrantRateLimitPolicyCreatePage.tsx

@@ -203,7 +203,7 @@ const KuadrantRateLimitPolicyCreatePage: React.FC = () => {
  </HelperText>
  </FormHelperText>
  </FormGroup>
- <NamespaceSelect selectedNamespace={selectedNamespace} onChange={setSelectedNamespace} />
+ <NamespaceSelect selectedNamespace={selectedNamespace} onChange={setSelectedNamespace} formDisabled={false} />
  <FormGroup role="radiogroup" isInline fieldId='target-type' label={t('Target reference type')} isRequired aria-labelledby="target-type-label">
  <Radio name='target-type' label='Gateway' id='target-type-gateway' isChecked={targetType === 'gateway'} onChange={() => setTargetType('gateway')} />
  <Radio name='target-type' label='HTTPRoute' id='target-type-httproute' isChecked={targetType === 'httproute'} onChange={() => setTargetType('httproute')} />