From f791acb6bfbe71733c167be6b3e8093a3f56e380 Mon Sep 17 00:00:00 2001
From: Naumov Alexey <Iamemptyhuh@gmail.com>
Date: Wed, 1 Sep 2021 17:46:51 +0300
Subject: [PATCH] fix(plugin-authentication): CB-1063 add support categories

---
 .../Options/AuthConfigurationOptions.tsx      | 44 ++++++++++++++-----
 1 file changed, 34 insertions(+), 10 deletions(-)

diff --git a/webapp/packages/plugin-authentication/src/Administration/IdentityProviders/Options/AuthConfigurationOptions.tsx b/webapp/packages/plugin-authentication/src/Administration/IdentityProviders/Options/AuthConfigurationOptions.tsx
index 147a77e643..8f298285fa 100644
--- a/webapp/packages/plugin-authentication/src/Administration/IdentityProviders/Options/AuthConfigurationOptions.tsx
+++ b/webapp/packages/plugin-authentication/src/Administration/IdentityProviders/Options/AuthConfigurationOptions.tsx
@@ -13,7 +13,8 @@ import styled, { css } from 'reshadow';
 import { AuthConfigurationParametersResource, AuthProvidersResource } from '@cloudbeaver/core-authentication';
 import {
   BASE_CONTAINERS_STYLES, ColoredContainer, ComboboxNew, FieldCheckboxNew, Group, GroupTitle,
-  InputFieldNew, ObjectPropertyInfoFormNew, SubmittingForm, TabContainerPanelComponent, TextareaNew, useMapResource
+  InputFieldNew, ObjectPropertyInfoFormNew, SubmittingForm, TabContainerPanelComponent,
+  TextareaNew, useMapResource, useObjectPropertyCategories
 } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import type { AuthProviderConfigurationParametersFragment } from '@cloudbeaver/core-sdk';
@@ -28,6 +29,8 @@ const styles = css`
   }
 `;
 
+const emptyArray: AuthProviderConfigurationParametersFragment[] = [];
+
 export const AuthConfigurationOptions: TabContainerPanelComponent<IAuthConfigurationFormProps> = observer(function AuthConfigurationOptions({
   state,
 }) {
@@ -39,6 +42,10 @@ export const AuthConfigurationOptions: TabContainerPanelComponent<IAuthConfigura
   const providers = useMapResource(AuthProvidersResource, AuthProvidersResource.keyAll);
   const parameters = useMapResource(AuthConfigurationParametersResource, state.config.providerId || null);
 
+  const { categories, isUncategorizedExists } = useObjectPropertyCategories(
+    (parameters.data as AuthProviderConfigurationParametersFragment[] | undefined) ?? emptyArray
+  );
+
   const identityProviders = providers.resource.values.filter(provider => provider.configurable);
   const edit = state.mode === 'edit';
 
@@ -111,15 +118,32 @@ export const AuthConfigurationOptions: TabContainerPanelComponent<IAuthConfigura
           </FieldCheckboxNew>
         </Group>
         {parameters.isLoaded() && parameters.data && (
-          <Group small gap vertical>
-            <GroupTitle>{translate('administration_identity_providers_provider_configuration_parameters')}</GroupTitle>
-            <ObjectPropertyInfoFormNew
-              state={state.config.parameters}
-              properties={parameters.data as AuthProviderConfigurationParametersFragment[]}
-              disabled={state.disabled}
-              readOnly={state.readonly}
-            />
-          </Group>
+          <>
+            {isUncategorizedExists && (
+              <Group small gap vertical>
+                <GroupTitle>{translate('administration_identity_providers_provider_configuration_parameters')}</GroupTitle>
+                <ObjectPropertyInfoFormNew
+                  state={state.config.parameters}
+                  properties={parameters.data as AuthProviderConfigurationParametersFragment[]}
+                  category={null}
+                  disabled={state.disabled}
+                  readOnly={state.readonly}
+                />
+              </Group>
+            )}
+            {categories.map(category => (
+              <Group key={category} small gap vertical>
+                <GroupTitle>{category}</GroupTitle>
+                <ObjectPropertyInfoFormNew
+                  state={state.config.parameters}
+                  properties={parameters.data as AuthProviderConfigurationParametersFragment[]}
+                  category={category}
+                  disabled={state.disabled}
+                  readOnly={state.readonly}
+                />
+              </Group>
+            ))}
+          </>
         )}
       </ColoredContainer>
     </SubmittingForm>