Sort providers by name

Applicable to wizard source and target pages and when creating a new
endpoint.

src/components/organisms/ChooseProvider/ChooseProvider.jsx

@@ -35,7 +35,7 @@ const Logos = styled.div`
   flex-wrap: wrap;
   padding-bottom: 42px;
 `
-const EndpointLogosStyled = styled(EndpointLogos) `
+const EndpointLogosStyled = styled(EndpointLogos)`
   transform: scale(0.67);
   transition: all ${StyleProps.animations.swift};
   cursor: pointer;
@@ -80,10 +80,12 @@ class ChooseProvider extends React.Component<Props> {
       return null
     }
 
+    let providersArray = Object.keys(this.props.providers).sort((a, b) => a.localeCompare(b))
+
     return (
       <Providers>
         <Logos>
-          {Object.keys(this.props.providers).map(k => {
+          {providersArray.map(k => {
             return (
               <EndpointLogosStyled
                 height={128}

src/components/organisms/WizardPageContent/WizardPageContent.jsx

@@ -195,7 +195,7 @@ class WizardPageContent extends React.Component<Props, State> {
     return providerTypes.TARGET_MIGRATION
   }
 
-  getProviders(type: string) {
+  getProviders(type: string): string[] {
     let providers = []
     let providerType = this.getProvidersType(type)
     let providersObject = this.props.providerStore.providers
@@ -210,6 +210,7 @@ class WizardPageContent extends React.Component<Props, State> {
       }
     })
 
+    providers.sort((a, b) => a.localeCompare(b))
     return providers
   }
 

src/sources/ProviderSource.js

@@ -31,8 +31,7 @@ class ProviderSource {
   }
 
   static loadProviders(): Promise<Providers> {
-    return Api.get(`${servicesUrl.coriolis}/${Api.projectId}/providers`)
-      .then(response => response.data.providers)
+    return Api.get(`${servicesUrl.coriolis}/${Api.projectId}/providers`).then(response => response.data.providers)
   }
 
   static loadDestinationSchema(providerName: string, schemaType: string): Promise<Field[]> {