completed add instance page and vendors and applications page

src/components/common/Instance/AddInstanceForm.tsx

@@ -2,22 +2,21 @@ import {
   Button, Flex, FormControl
 } from '@chakra-ui/react'
 import {
-  CustomFormHeader, CustomFormLabel, CustomInput, CustomSelect
+  CustomFormHeader, CustomFormLabel, CustomInput
 } from '@edfi/admin-console-shared-sdk'
 import { ChangeEvent } from 'react'
 import { usePluginContext } from '../../../plugins/BasePlugin'
 
 interface AddInstanceFormProps {
   name: string
   connectionString: string
-  type
+  type: string
   onInputChange: (e: ChangeEvent<HTMLInputElement>) => void
-  onSelectChange: (e: ChangeEvent<HTMLInputElement>) => void
   onSaveChanges: () => void
 }
 
 
-const AddInstanceForm = ({ instanceName, instanceDescription, schoolYear, schoolYearOptions, onInputChange, onSelectChange, onSaveChanges }: AddInstanceFormProps) => {
+const AddInstanceForm = ({ name, type, connectionString, onInputChange, onSaveChanges }: AddInstanceFormProps) => {
   const { getString } = usePluginContext()
 
   return (
@@ -35,14 +34,27 @@ const AddInstanceForm = ({ instanceName, instanceDescription, schoolYear, school
       >
         <FormControl>
           <CustomFormLabel
-            htmlFor="instanceName"
+            htmlFor="name"
             text="Instance Name"
           />
 
           <CustomInput
-            id='instanceName'
-            value={instanceName}
-            onChange={onSelectChange}
+            id='name'
+            value={name}
+            onChange={onInputChange}
+          />
+        </FormControl>
+
+        <FormControl mt='16px'>
+          <CustomFormLabel
+            htmlFor="type"
+            text="Instance Type"
+          />
+
+          <CustomInput
+            id="type"
+            value={type}
+            onChange={onInputChange}
           />
         </FormControl>
 
@@ -60,37 +72,6 @@ const AddInstanceForm = ({ instanceName, instanceDescription, schoolYear, school
         </FormControl>
       </Flex>
 
-      <Flex
-        flexDir='column'
-        mt='48px'
-      >
-        <CustomFormHeader text={getString('app.ODS_INSTANCES')} />
-
-        <Flex
-          flexDir='column'
-          ml='10px'
-          mt='16px'
-          w='full'
-        >
-          <FormControl>
-            <CustomFormLabel
-              htmlFor='schoolYear'
-              text='School Year'
-            />
-
-            <CustomSelect
-              options={schoolYearOptions.map(year => ({
-                value: year,
-                text: year 
-              }))}
-              id='schoolYear'
-              value={schoolYear}
-              onChange={onSelectChange}
-            />
-          </FormControl>
-        </Flex>
-      </Flex>
-
       <Button
         mt='32px'
         size='lg'

src/components/common/Instance/ApplicationDetailsControl.tsx

@@ -1,6 +1,6 @@
 import { ChevronDownIcon } from '@chakra-ui/icons'
 import {
-  Button, Flex, Popover, PopoverBody, PopoverContent, PopoverTrigger 
+    Button, Flex, Popover, PopoverBody, PopoverContent, PopoverTrigger
 } from '@chakra-ui/react'
 import { useContext } from 'react'
 import { adminConsoleContext } from '../../../context/adminConsoleContext'
@@ -58,7 +58,7 @@ const ApplicationDetailsControl = ({ data, isDeleting, onDelete }: ApplicationDe
               justifyContent='center'
               size='xs'
               w='100px'
-              onClick={() => onDelete(data.applicationId.toString())}
+              onClick={() => onDelete(data.id.toString())}
             >
               Delete
             </Button> }

src/components/common/Instance/ApplicationDetailsFormSection.tsx

@@ -1,14 +1,18 @@
 import {
-  Flex, Text, FormControl 
+  Flex,
+  FormControl,
+  Text
 } from '@chakra-ui/react'
+import {
+  CustomFormLabel,
+  CustomInput,
+  CustomSelect
+} from '@edfi/admin-console-shared-sdk'
 import { ChangeEvent } from 'react'
 import { EdfiClaimSet } from '../../../core/Edfi/EdfiClaimsets'
 import { EdfiVendor } from '../../../core/Edfi/EdfiVendors'
 import { FormDataErrors } from '../../../core/validation/FormValidations.types'
 import { CreateEdfiApplicationRequest } from '../../../services/AdminActions/Edfi/Applications/EdfiApplicationService.requests'
-import {
-  CustomFormLabel, CustomSelect, CustomInput 
-} from '@edfi/admin-console-shared-sdk'
 
 interface ApplicationDetailsFormSectionProps {
     applicationData: CreateEdfiApplicationRequest
@@ -66,7 +70,7 @@ const ApplicationDetailsFormSection = ({ applicationData, mode, errors, operatio
           <CustomSelect 
             options={vendorOptions.map(option => ({
               text: option.company ?? '',
-              value: option.vendorId ?? 0 
+              value: option.id ?? 0 
             }))}
             disabled={mode == 'edit'? true : false}
             error={errors && errors['vendor'] && errors['vendor'].message}

src/components/common/Instance/ApplicationDetailsTable.tsx

@@ -1,14 +1,14 @@
 import {
-  Button,
-  Flex,
-  Link,
-  Table,
-  TableContainer,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
+    Button,
+    Flex,
+    Link,
+    Table,
+    TableContainer,
+    Tbody,
+    Td,
+    Th,
+    Thead,
+    Tr,
 } from '@chakra-ui/react'
 import { DeletingState } from '../../../core/deletingState.types'
 import { EdfiApplication } from '../../../core/Edfi/EdfiApplications'
@@ -115,7 +115,7 @@ const ApplicationDetailsTable = ({ applicationsList, isDeleting, onEditApplicati
 
                   <ApplicationDetailsControl 
                     data={application}
-                    isDeleting={isDeleting.deleting && isDeleting.id === application.applicationId.toString()}
+                    isDeleting={isDeleting.deleting && isDeleting.id === application.id.toString()}
                     onDelete={onDeleteApplication}
                   />
                 </Flex>

src/components/common/Instance/ApplicationForm.tsx

@@ -1,26 +1,25 @@
 import { Flex } from '@chakra-ui/react'
-import { EdfiApplication } from '../../../core/Edfi/EdfiApplications'
-import useApplicationForm from '../../../hooks/adminActions/edfi/useApplicationForm'
 import {
-  CompleteFormErrorMessage, UserProfile, UserProfileContext 
+  CompleteFormErrorMessage, UserProfile, UserProfileContext
 } from '@edfi/admin-console-shared-sdk'
-import ApplicationAPIFormSection from './ApplicationAPIFormSection'
-import ApplicationDetailsFormSection from './ApplicationDetailsFormSection'
-import LocalEducationAgenciesFormSection from './LocalEducationAgenciesFormSection'
 import { useContext } from 'react'
+import { EdfiApplication } from '../../../core/Edfi/EdfiApplications'
+import { ODSInstance } from '../../../core/ODSInstance.types'
+import useApplicationForm from '../../../hooks/adminActions/edfi/useApplicationForm'
 import useTenantInfo from '../../../hooks/useTenantInfo'
+import ApplicationAPIFormSection from './ApplicationAPIFormSection'
+import ApplicationDetailsFormSection from './ApplicationDetailsFormSection'
 import EdFiModalForm from './EdFiModalForm'
-import { ODSInstance } from '../../../core/ODSInstance.types'
+import LocalEducationAgenciesFormSection from './LocalEducationAgenciesFormSection'
 
 interface ApplicationFormProps {
     instance: ODSInstance | null
-    schoolYear: number 
     mode: 'add' | 'edit'
     editApplicationData?: EdfiApplication
     onFinishSave: () => void
 }
 
-const ApplicationForm = ({ instance, schoolYear, mode, editApplicationData, onFinishSave }: ApplicationFormProps) => {
+const ApplicationForm = ({ instance, mode, editApplicationData, onFinishSave }: ApplicationFormProps) => {
   const {
     applicationData,
     vendorOptionsList,
@@ -38,7 +37,7 @@ const ApplicationForm = ({ instance, schoolYear, mode, editApplicationData, onFi
     onSelectVendor,
     onSave
   } = useApplicationForm({ 
-    schoolYear,
+    instanceId: instance?.id ?? 0,
     mode, 
     editApplicationData, 
     onFinishSave 
@@ -52,7 +51,7 @@ const ApplicationForm = ({ instance, schoolYear, mode, editApplicationData, onFi
       const tenant = getCurrentTenant()
 
       if (tenant) {
-        return tenant.organizationName
+        return tenant.document.name
       }
 
       return 'Loading...'
@@ -67,7 +66,7 @@ const ApplicationForm = ({ instance, schoolYear, mode, editApplicationData, onFi
     const currentTenant = getCurrentTenant()
 
     if (currentTenant) {
-      return currentTenant.organizationIdentifier
+      return `Id: ${currentTenant.tenantId}`
     }
 
     return '...'
@@ -116,7 +115,7 @@ const ApplicationForm = ({ instance, schoolYear, mode, editApplicationData, onFi
               instance={instance}
               isRegeneratingCredentials={isRegeneratingCredentials}
               mode={mode}
-              onRegenerateCredentials={() => onRegenerateCredentials(editApplicationData? editApplicationData.applicationId : 0)}
+              onRegenerateCredentials={() => onRegenerateCredentials(editApplicationData? editApplicationData.id : 0)}
             />
           </Flex>
         </Flex>

src/components/common/Instance/InstanceDescription.tsx

@@ -18,34 +18,38 @@ const InstanceDescription = ({ instance }: InstanceDescriptionProps) => {
 
   return (
     <Flex>
-      {metaDataLoading ? <Spinner /> : <Flex flexDir='column'>
+      <Flex flexDir='column'>
         <InstanceDescriptionField
           content={instance.name}
           title='Instance Name'
         />
 
         <InstanceDescriptionField
-          content={instance.id}
-          title='Instance ID'
+          content={instance.instanceType}
+          title='Instance Type'
         />
 
 
-        <InstanceDescriptionField
-          content={<ODSInstanceEdFiVersion version={edfiMetadata?.version} />}
-          title='Ed-Fi Version'
-        />
+        {metaDataLoading ? <Spinner /> : <Flex
+          flexDir="column"
+          mt={5}
+        >
+          <InstanceDescriptionField
+            content={<ODSInstanceEdFiVersion version={edfiMetadata?.version} />}
+            title='Ed-Fi Version'
+          />
 
-        <InstanceDescriptionField
-          content={<ODSInstanceDataModelsLabel dataModels={edfiMetadata?.dataModels} />}
-          title="Extension"
-        />
+          <InstanceDescriptionField
+            content={<ODSInstanceDataModelsLabel dataModels={edfiMetadata?.dataModels} />}
+            title="Extension"
+          />
 
-        <InstanceDescriptionField 
-          content={<ODSInstanceEdFiStatus status={edFiStatus} />}
-          title="Ed-Fi Status"
-        />
+          <InstanceDescriptionField 
+            content={<ODSInstanceEdFiStatus status={edFiStatus} />}
+            title="Ed-Fi Status"
+          />
+        </Flex>}
       </Flex>
-      }
     </Flex>
   )
 }

src/components/common/Instance/InstanceDetailsForm.tsx

@@ -50,7 +50,7 @@ const InstanceDetailsForm = ({ mode, instance }: InstanceDetailsFormProps) => {
           <CustomInput
             disabled={true}
             id='instanceName'
-            value={userProfile? `${getInstanceName(userProfile.tenants, userProfile.tenantId)} ${instance?.name}` : `Instance ${instance?.name}`}
+            value={instance?.name ?? ''}
             onChange={() => null}
           />
         </FormControl>

src/components/common/Instance/PartnersAndApplicationAccordion.tsx

@@ -23,17 +23,17 @@ import PartnersAndApplicationAccordionHeader from './PartnersAndApplicationAccor
 
 interface PartnersAndApplicationAccordionProps {
     vendorsWithApplicationsList: EdfiVendorWithApplications[]
-    isDeletingPartner: DeletingState 
+    isDeletingVendor: DeletingState 
     isDeletingApplication: DeletingState
-    onSelectPartner: (partnerId: number) => void
-    onEditPartner: () => void
+    onSelectVendor: (partnerId: number) => void
+    onEditVendor: () => void
     onEditApplication: (application: EdfiApplication) => void
-    onDeletePartner: (partnerId: string) => void
+    onDeleteVendor: (partnerId: string) => void
     onDeleteApplication: (applicationId: string) => void
     onAddApplication: () => void
 }
 
-const PartnersAndApplicationAccordion = ({ vendorsWithApplicationsList, isDeletingApplication, isDeletingPartner, onSelectPartner, onEditPartner, onDeletePartner, onDeleteApplication, onEditApplication, onAddApplication }: PartnersAndApplicationAccordionProps) => {
+const PartnersAndApplicationAccordion = ({ vendorsWithApplicationsList, isDeletingApplication, isDeletingVendor: isDeletingPartner, onSelectVendor: onSelectPartner, onEditVendor, onDeleteVendor, onDeleteApplication, onEditApplication, onAddApplication }: PartnersAndApplicationAccordionProps) => {
   const adminConfig = useContext(adminConsoleContext)
 
   const {
@@ -144,7 +144,7 @@ const PartnersAndApplicationAccordion = ({ vendorsWithApplicationsList, isDeleti
                   maxW='20px'
                   minW='20px'
                   w='20px'
-                  onClick={() => onDeletePartner(partner.vendorId? partner.vendorId.toString() : 'x')}
+                  onClick={() => onDeleteVendor(partner.vendorId? partner.vendorId.toString() : 'x')}
                 >
                   <span
                     hidden