Merge pull request #389 from smiclea/providers-sort

Use custom sorting for provider names

config.js

@@ -61,8 +61,27 @@ const conf: Config = {
     },
   ],
 
+  /*
+  Lower number means that the provider will appear sooner in the list.
+  Equal number means alphabetical order within the same group number.
+  If the provider is not in the list, it will appear later and alphabetically sorted
+  with all the other providers not in the list.
+  */
+  providerSortPriority: {
+    aws: 1,
+    openstack: 1,
+    vmware_vsphere: 1,
+    azure: 2,
+    'hyper-v': 2,
+    scvmm: 2,
+    oci: 3,
+    opc: 3,
+    oracle_vm: 3,
+  },
+
   // The list of the users to hide in the UI
   hiddenUsers: ['barbican', 'coriolis'],
+
 }
 
 export const config = conf

src/components/organisms/ChooseProvider/ChooseProvider.jsx

@@ -21,7 +21,6 @@ import styled from 'styled-components'
 import EndpointLogos from '../../atoms/EndpointLogos'
 import Button from '../../atoms/Button'
 import StatusImage from '../../atoms/StatusImage'
-import type { Providers as ProvidersType } from '../../../types/Providers'
 
 import StyleProps from '../../styleUtils/StyleProps'
 
@@ -55,7 +54,7 @@ const LoadingText = styled.div`
 `
 
 type Props = {
-  providers: ?ProvidersType,
+  providers: string[],
   onCancelClick: () => void,
   onProviderClick: (provider: string) => void,
   loading: boolean,
@@ -76,16 +75,14 @@ class ChooseProvider extends React.Component<Props> {
   }
 
   renderProviders() {
-    if (!this.props.providers || this.props.loading) {
+    if (this.props.loading) {
       return null
     }
 
-    let providersArray = Object.keys(this.props.providers).sort((a, b) => a.localeCompare(b))
-
     return (
       <Providers>
         <Logos>
-          {providersArray.map(k => {
+          {this.props.providers.map(k => {
             return (
               <EndpointLogosStyled
                 height={128}

src/components/organisms/PageHeader/PageHeader.jsx

@@ -265,7 +265,7 @@ class PageHeader extends React.Component<Props, State> {
         >
           <ChooseProvider
             onCancelClick={() => { this.handleCloseChooseProviderModal() }}
-            providers={providerStore.providers}
+            providers={providerStore.providerNames}
             loading={providerStore.providersLoading}
             onProviderClick={providerName => { this.handleProviderClick(providerName) }}
           />

src/components/organisms/WizardPageContent/WizardPageContent.jsx

@@ -197,7 +197,7 @@ class WizardPageContent extends React.Component<Props, State> {
   }
 
   getProviders(type: string): string[] {
-    let providers = []
+    let validProviders = {}
     let providerType = this.getProvidersType(type)
     let providersObject = this.props.providerStore.providers
 
@@ -207,12 +207,11 @@ class WizardPageContent extends React.Component<Props, State> {
 
     Object.keys(providersObject).forEach(provider => {
       if (providersObject[provider].types.findIndex(t => t === providerType) > -1) {
-        providers.push(provider)
+        validProviders[provider] = true
       }
     })
 
-    providers.sort((a, b) => a.localeCompare(b))
-    return providers
+    return this.props.providerStore.providerNames.filter(p => validProviders[p])
   }
 
   isNetworksPageValid() {

src/components/pages/EndpointsPage/EndpointsPage.jsx

@@ -287,7 +287,7 @@ class EndpointsPage extends React.Component<{ history: any }, State> {
         >
           <ChooseProvider
             onCancelClick={() => { this.handleCloseChooseProviderModal() }}
-            providers={providerStore.providers}
+            providers={providerStore.providerNames}
             loading={providerStore.providersLoading}
             onProviderClick={providerName => { this.handleProviderClick(providerName) }}
           />

src/stores/ProviderStore.js

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 // @flow
 
-import { observable, action } from 'mobx'
+import { observable, action, computed } from 'mobx'
 
 import ProviderSource from '../sources/ProviderSource'
 import configLoader from '../utils/Config'
@@ -88,6 +88,25 @@ class ProviderStore {
   lastDestinationSchemaType: string = ''
   lastSourceSchemaType: string = ''
 
+  @computed
+  get providerNames(): string[] {
+    let sortPriority = configLoader.config.providerSortPriority
+
+    let array = Object.keys(this.providers || {}).sort((a, b) => {
+      if (sortPriority[a] && sortPriority[b]) {
+        return (sortPriority[a] - sortPriority[b]) || a.localeCompare(b)
+      }
+      if (sortPriority[a]) {
+        return -1
+      }
+      if (sortPriority[b]) {
+        return 1
+      }
+      return a.localeCompare(b)
+    })
+    return array
+  }
+
   @action getConnectionInfoSchema(providerName: string): Promise<void> {
     this.connectionSchemaLoading = true
 

src/types/Config.js

@@ -11,5 +11,6 @@ export type Config = {
   instancesListBackgroundLoading: { default: number, [string]: number },
   sourceProvidersWithExtraOptions: Array<string | { name: string, envRequiredFields: string[] }>,
   destinationProvidersWithExtraOptions: Array<string | { name: string, envRequiredFields: string[] }>,
+  providerSortPriority: { [providerName: string]: number }
   hiddenUsers: string[],
 }