use autocomplete for qos profiles (#247)

packages/frinx-dashboard/src/api/unistore/unistore.ts

@@ -154,3 +154,11 @@ export async function deleteVpnCarrier(carrierId: string): Promise<void> {
     `/data/network-topology:network-topology/topology=uniconfig/node=bearer/frinx-uniconfig-topology:configuration/gamma-bearer-svc:bearer-svc/carriers/carrier=${carrierId}`,
   );
 }
+
+export async function getBearerValidProviderIdentifiers(): Promise<ValidProviderIdentifiersOutput> {
+  const json = await sendGetRequest(
+    '/data/network-topology:network-topology/topology=uniconfig/node=bearer/frinx-uniconfig-topology:configuration/gamma-bearer-svc:bearer-svc/valid-provider-identifiers',
+  );
+  const data = decodeValidProviderIdentifiersOutput(json);
+  return data;
+}

packages/frinx-gamma/src/callback-utils.ts

@@ -30,6 +30,7 @@ export type Callbacks = {
   editVpnSite: (body: VpnSite) => Promise<void>;
   deleteVpnSite: (id: string) => Promise<void>;
   getValidProviderIdentifiers: () => Promise<ValidProviderIdentifiersOutput>;
+  getBearerValidProviderIdentifiers: () => Promise<ValidProviderIdentifiersOutput>;
   executeWorkflow: (payload: WorkflowPayload) => Promise<WorkflowExecPayload>;
   getWorkflowInstanceDetail: (workflowId: string, options?: RequestInit) => Promise<unknown>;
   getVpnBearers: () => Promise<VpnBearerOutput>;

packages/frinx-gamma/src/components/forms/evc-attachment-form.tsx

@@ -1,21 +1,35 @@
 import { Button, Divider, FormControl, FormLabel, Input, Select, Stack } from '@chakra-ui/react';
 import React, { FormEvent, useState, VoidFunctionComponent } from 'react';
 import { EvcAttachment } from './bearer-types';
+import Autocomplete2, { Item } from '../autocomplete-2/autocomplete-2';
 
 type Props = {
+  qosProfiles: string[];
   evcAttachment: EvcAttachment;
   onSubmit: (attachment: EvcAttachment) => void;
   onCancel: () => void;
 };
 
-const EvcAttachmentForm: VoidFunctionComponent<Props> = ({ evcAttachment, onSubmit, onCancel }) => {
+function getQosProfilesItems(profiles: string[]): Item[] {
+  return profiles.map((p) => ({
+    value: p,
+    label: p,
+  }));
+}
+
+const EvcAttachmentForm: VoidFunctionComponent<Props> = ({ qosProfiles, evcAttachment, onSubmit, onCancel }) => {
   const [evc, setEvc] = useState<EvcAttachment>(evcAttachment);
 
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     onSubmit(evc);
   };
 
+  const profileItems = getQosProfilesItems(qosProfiles);
+  const [selectedProfile] = profileItems.filter((p) => {
+    return p.value === evc.qosInputProfile;
+  });
+
   return (
     <form onSubmit={handleSubmit}>
       <FormControl id="evc-type" my={6}>
@@ -120,16 +134,15 @@ const EvcAttachmentForm: VoidFunctionComponent<Props> = ({ evcAttachment, onSubm
         />
       </FormControl>
 
-      <FormControl id="qos-input-profile" my={6}>
-        <FormLabel>Qos Input Profile</FormLabel>
-        <Input
-          variant="filled"
-          name="customer-name"
-          value={evc.qosInputProfile || ''}
-          onChange={(event) => {
+      <FormControl id="qos-profile" my={6}>
+        <FormLabel>QOS Profile</FormLabel>
+        <Autocomplete2
+          items={profileItems}
+          selectedItem={selectedProfile}
+          onChange={(item) => {
             setEvc({
               ...evc,
-              qosInputProfile: event.target.value || null,
+              qosInputProfile: item ? item.value : null,
             });
           }}
         />

packages/frinx-gamma/src/pages/create-evc-attachment/create-evc-attachment.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, VoidFunctionComponent } from 'react';
 import { Box, Container, Heading } from '@chakra-ui/react';
 import { useParams } from 'react-router';
 import unwrap from '../../helpers/unwrap';
-import { apiBearerToClientBearer } from '../../components/forms/converters';
+import { apiBearerToClientBearer, apiProviderIdentifiersToClientIdentifers } from '../../components/forms/converters';
 import callbackUtils from '../../callback-utils';
 import { EvcAttachment, VpnBearer } from '../../components/forms/bearer-types';
 import EvcAttachmentForm from '../../components/forms/evc-attachment-form';
@@ -32,6 +32,7 @@ function getSelectedBearer(bearers: VpnBearer[], bearerId: string): VpnBearer {
 
 const CreateEvcAttachmentPage: VoidFunctionComponent<Props> = ({ onSuccess, onCancel }) => {
   const [selectedBearer, setSelectedBearer] = useState<VpnBearer | null>(null);
+  const [qosProfiles, setQosProfiles] = useState<string[]>([]);
   const { bearerId } = useParams<{ bearerId: string }>();
 
   useEffect(() => {
@@ -41,6 +42,10 @@ const CreateEvcAttachmentPage: VoidFunctionComponent<Props> = ({ onSuccess, onCa
       const bearers = await callbacks.getVpnBearers();
       const clientVpnBearers = apiBearerToClientBearer(bearers);
       setSelectedBearer(getSelectedBearer(clientVpnBearers, bearerId));
+
+      const profiles = await callbacks.getBearerValidProviderIdentifiers();
+      const clientProfiles = apiProviderIdentifiersToClientIdentifers(profiles);
+      setQosProfiles(clientProfiles.qosIdentifiers);
     };
 
     fetchData();
@@ -78,6 +83,7 @@ const CreateEvcAttachmentPage: VoidFunctionComponent<Props> = ({ onSuccess, onCa
         <Box padding={6} margin={6} background="white">
           <Heading size="md">Add Evc Attachment To Bearer: {bearerId} </Heading>
           <EvcAttachmentForm
+            qosProfiles={qosProfiles}
             evcAttachment={getDefaultEvcAttachment()}
             onSubmit={handleSubmit}
             onCancel={handleCancel}

packages/frinx-gamma/src/pages/edit-evc-attachment/edit-evc-attachment.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, VoidFunctionComponent } from 'react';
 import { Box, Container, Heading } from '@chakra-ui/react';
 import { useParams } from 'react-router';
 import unwrap from '../../helpers/unwrap';
-import { apiBearerToClientBearer } from '../../components/forms/converters';
+import { apiBearerToClientBearer, apiProviderIdentifiersToClientIdentifers } from '../../components/forms/converters';
 import callbackUtils from '../../callback-utils';
 import { EvcAttachment, VpnBearer } from '../../components/forms/bearer-types';
 import EvcAttachmentForm from '../../components/forms/evc-attachment-form';
@@ -26,6 +26,7 @@ function getSelectedEvcAttachment(bearer: VpnBearer, evcType: string, circuitRef
 
 const EditEvcAttachmentPage: VoidFunctionComponent<Props> = ({ onSuccess, onCancel }) => {
   const [selectedBearer, setSelectedBearer] = useState<VpnBearer | null>(null);
+  const [qosProfiles, setQosProfiles] = useState<string[]>([]);
   const { bearerId, evcType, circuitReference } =
     useParams<{ bearerId: string; evcType: string; circuitReference: string }>();
 
@@ -36,6 +37,10 @@ const EditEvcAttachmentPage: VoidFunctionComponent<Props> = ({ onSuccess, onCanc
       const bearers = await callbacks.getVpnBearers();
       const clientVpnBearers = apiBearerToClientBearer(bearers);
       setSelectedBearer(getSelectedBearer(clientVpnBearers, bearerId));
+
+      const profiles = await callbacks.getBearerValidProviderIdentifiers();
+      const clientProfiles = apiProviderIdentifiersToClientIdentifers(profiles);
+      setQosProfiles(clientProfiles.qosIdentifiers);
     };
 
     fetchData();
@@ -85,7 +90,12 @@ const EditEvcAttachmentPage: VoidFunctionComponent<Props> = ({ onSuccess, onCanc
       <Container>
         <Box padding={6} margin={6} background="white">
           <Heading size="md">Add Evc Attachment To Bearer: {bearerId} </Heading>
-          <EvcAttachmentForm evcAttachment={selectedEvcAttachment} onSubmit={handleSubmit} onCancel={handleCancel} />
+          <EvcAttachmentForm
+            qosProfiles={qosProfiles}
+            evcAttachment={selectedEvcAttachment}
+            onSubmit={handleSubmit}
+            onCancel={handleCancel}
+          />
         </Box>
       </Container>
     )