add clear button to forms (#311)

FRINXio · Dec 6, 2021 · e84a797 · e84a797
1 parent 91a7249
commit e84a797
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 10 deletions.
diff --git a/packages/frinx-gamma/src/components/forms/customer-location-form.tsx b/packages/frinx-gamma/src/components/forms/customer-location-form.tsx
@@ -22,7 +22,7 @@ type Props = {
 };
 
 const CustomerLocationForm: VoidFunctionComponent<Props> = ({ location, buttonText, onSubmit, onCancel }) => {
-  const { values, errors, dirty, handleChange, handleSubmit } = useFormik({
+  const { values, errors, dirty, resetForm, handleChange, handleSubmit } = useFormik({
     initialValues: {
       ...location,
     },
@@ -71,6 +71,7 @@ const CustomerLocationForm: VoidFunctionComponent<Props> = ({ location, buttonTe
         <Button type="submit" colorScheme="blue" isDisabled={!dirty}>
           {buttonText}
         </Button>
+        <Button onClick={() => resetForm()}>Clear</Button>
         <Button onClick={onCancel}>Cancel</Button>
       </Stack>
     </form>

diff --git a/packages/frinx-gamma/src/components/forms/evc-attachment-form.tsx b/packages/frinx-gamma/src/components/forms/evc-attachment-form.tsx
@@ -33,7 +33,7 @@ function getQosProfilesItems(profiles: string[]): Item[] {
 }
 
 const EvcAttachmentForm: VoidFunctionComponent<Props> = ({ qosProfiles, evcAttachment, onSubmit, onCancel }) => {
-  const { values, errors, dirty, setFieldValue, handleChange, handleSubmit } = useFormik({
+  const { values, errors, dirty, resetForm, setFieldValue, handleChange, handleSubmit } = useFormik({
     initialValues: {
       ...evcAttachment,
     },
@@ -127,6 +127,7 @@ const EvcAttachmentForm: VoidFunctionComponent<Props> = ({ qosProfiles, evcAttac
         <Button type="submit" colorScheme="blue" isDisabled={!dirty}>
           Save changes
         </Button>
+        <Button onClick={() => resetForm()}>Clear</Button>
         <Button onClick={onCancel}>Cancel</Button>
       </Stack>
     </form>

diff --git a/packages/frinx-gamma/src/components/forms/site-network-access-form.tsx b/packages/frinx-gamma/src/components/forms/site-network-access-form.tsx
@@ -94,7 +94,7 @@ const SiteNetAccessForm: FC<Props> = ({
   onCancel,
 }) => {
   const [siteState, setSiteState] = useState(site);
-  const { values, errors, dirty, setFieldValue, handleSubmit } = useFormik({
+  const { values, errors, dirty, resetForm, setFieldValue, handleSubmit } = useFormik({
     initialValues: {
       ...selectedNetworkAccess,
     },
@@ -465,6 +465,7 @@ const SiteNetAccessForm: FC<Props> = ({
         <Button type="submit" colorScheme="blue" isDisabled={!dirty}>
           Save changes
         </Button>
+        <Button onClick={() => resetForm()}>Clear</Button>
         <Button onClick={onCancel}>Cancel</Button>
       </Stack>
     </form>

diff --git a/packages/frinx-gamma/src/components/forms/vpn-bearer-form.tsx b/packages/frinx-gamma/src/components/forms/vpn-bearer-form.tsx
@@ -42,7 +42,7 @@ type Props = {
 };
 
 const VpnBearerForm: VoidFunctionComponent<Props> = ({ mode, nodes, carriers, bearer, onSubmit, onCancel }) => {
-  const { values, errors, dirty, setFieldValue, handleChange, handleSubmit } = useFormik({
+  const { values, errors, dirty, resetForm, setFieldValue, handleChange, handleSubmit } = useFormik({
     initialValues: {
       ...bearer,
     },
@@ -136,6 +136,7 @@ const VpnBearerForm: VoidFunctionComponent<Props> = ({ mode, nodes, carriers, be
         <Button type="submit" colorScheme="blue" isDisabled={!dirty}>
           Save changes
         </Button>
+        <Button onClick={() => resetForm()}>Clear</Button>
         <Button onClick={onCancel}>Cancel</Button>
       </Stack>
     </form>

diff --git a/packages/frinx-gamma/src/components/forms/vpn-carrier-form.tsx b/packages/frinx-gamma/src/components/forms/vpn-carrier-form.tsx
@@ -40,7 +40,7 @@ const getCarrierItems = (carriers: VpnCarrier[]): Item[] => {
 };
 
 const CarrierForm: FC<Props> = ({ carrier, carriers, onDelete, onSubmit, onCancel }) => {
-  const { values, errors, dirty, setFieldValue, setValues, handleSubmit } = useFormik({
+  const { values, errors, dirty, resetForm, setFieldValue, setValues, handleSubmit } = useFormik({
     initialValues: {
       ...carrier,
     },
@@ -118,6 +118,7 @@ const CarrierForm: FC<Props> = ({ carrier, carriers, onDelete, onSubmit, onCance
         <Button type="submit" colorScheme="blue" isDisabled={!dirty}>
           Save changes
         </Button>
+        <Button onClick={() => resetForm()}>Clear</Button>
         <Button onClick={onCancel}>Cancel</Button>
       </Stack>
     </form>

diff --git a/packages/frinx-gamma/src/components/forms/vpn-node-form.tsx b/packages/frinx-gamma/src/components/forms/vpn-node-form.tsx
@@ -41,7 +41,7 @@ const getNodeItems = (carriers: VpnNode[]): Item[] => {
 };
 
 const NodeForm: FC<Props> = ({ node, nodes, onDelete, onSubmit, onCancel }) => {
-  const { values, errors, dirty, setFieldValue, setValues, handleSubmit } = useFormik({
+  const { values, errors, dirty, resetForm, setFieldValue, setValues, handleSubmit } = useFormik({
     initialValues: {
       ...node,
     },
@@ -132,6 +132,7 @@ const NodeForm: FC<Props> = ({ node, nodes, onDelete, onSubmit, onCancel }) => {
         <Button type="submit" colorScheme="blue" isDisabled={!dirty}>
           Save changes
         </Button>
+        <Button onClick={() => resetForm()}>Clear</Button>
         <Button onClick={onCancel}>Cancel</Button>
       </Stack>
     </form>

diff --git a/packages/frinx-gamma/src/components/forms/vpn-service-form.tsx b/packages/frinx-gamma/src/components/forms/vpn-service-form.tsx
@@ -57,7 +57,7 @@ const ServiceSchema = yup.object().shape({
 });
 
 const VpnServiceForm: FC<Props> = ({ extranetVpns, service, services, onSubmit, onCancel }) => {
-  const { values, errors, dirty, setFieldValue, handleSubmit, setValues } = useFormik({
+  const { values, errors, dirty, resetForm, setFieldValue, handleSubmit, setValues } = useFormik({
     initialValues: {
       ...service,
     },
@@ -266,6 +266,7 @@ const VpnServiceForm: FC<Props> = ({ extranetVpns, service, services, onSubmit,
         <Button type="submit" colorScheme="blue" isDisabled={!dirty}>
           Save changes
         </Button>
+        <Button onClick={() => resetForm()}>Clear</Button>
         <Button onClick={onCancel}>Cancel</Button>
       </Stack>
     </form>

diff --git a/packages/frinx-gamma/src/components/forms/vpn-site-form.tsx b/packages/frinx-gamma/src/components/forms/vpn-site-form.tsx
@@ -34,7 +34,7 @@ type Props = {
 };
 
 const VpnSiteForm: FC<Props> = ({ site, qosProfiles, onSubmit, onCancel }) => {
-  const { values, errors, dirty, setFieldValue, handleSubmit } = useFormik({
+  const { values, errors, dirty, resetForm, setFieldValue, handleSubmit } = useFormik({
     initialValues: {
       ...site,
     },
@@ -121,6 +121,7 @@ const VpnSiteForm: FC<Props> = ({ site, qosProfiles, onSubmit, onCancel }) => {
         <Button type="submit" colorScheme="blue" isDisabled={!dirty}>
           Save changes
         </Button>
+        <Button onClick={() => resetForm()}>Clear</Button>
         <Button onClick={onCancel}>Cancel</Button>
       </Stack>
     </form>

diff --git a/packages/frinx-gamma/src/components/poll-workflow-id/poll-worfklow-id.tsx b/packages/frinx-gamma/src/components/poll-workflow-id/poll-worfklow-id.tsx
@@ -1,4 +1,5 @@
-import { useEffect, VoidFunctionComponent } from 'react';
+import React, { useEffect, VoidFunctionComponent } from 'react';
+import { Flex } from '@chakra-ui/react';
 import { useAsyncGenerator } from '../commit-status-modal/commit-status-modal.helpers';
 
 type Props = {
@@ -30,7 +31,7 @@ const WorkflowId: VoidFunctionComponent<Props> = ({ workflowId, onFinish }) => {
     }
   }, [execPayload, onFinish]);
 
-  return null;
+  return <Flex justifyContent="center">Loading...</Flex>;
 };
 
 export default WorkflowId;