From b33be109db7e547e1afd19f084f0f748bb98720c Mon Sep 17 00:00:00 2001
From: Naumov Alexey <Iamemptyhuh@gmail.com>
Date: Fri, 9 Oct 2020 16:48:09 +0300
Subject: [PATCH] fix(core-blocks): CB-390 driver properties order

CB-390
---
 .../core-blocks/src/PropertiesTable/PropertiesTable.tsx   | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx b/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx
index 33a7adc255..5fc99c699e 100644
--- a/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx
+++ b/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx
@@ -6,8 +6,9 @@
  * you may not use this file except in compliance with the License.
  */
 
+import { computed } from 'mobx';
 import { observer, useLocalStore } from 'mobx-react';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import styled from 'reshadow';
 
 import { useTranslate } from '@cloudbeaver/core-localization';
@@ -97,6 +98,9 @@ export const PropertiesTable = observer(function PropertiesTable({
     []
   );
 
+  const alphabetOrderProperties = useMemo(() => computed(() => properties.slice().sort(
+    (a, b) => (a?.displayName ?? '').localeCompare(b?.displayName ?? ''))), [properties]);
+
   return styled(useStyles(PROPERTIES_TABLE_STYLES))(
     <properties as="div" className={className}>
       <properties-header as="div">
@@ -111,7 +115,7 @@ export const PropertiesTable = observer(function PropertiesTable({
         </properties-header-right>
       </properties-header>
       <properties-list as="div">
-        {properties.map(property => (
+        {alphabetOrderProperties.get().map(property => (
           <PropertyItem
             key={property.id}
             property={property}