added icon selector for sourceIcon

Author: raheeliftikhar5

client/packages/lowcoder-design/src/components/iconSelect/index.tsx

@@ -398,7 +398,7 @@ export const IconSelect = (props: {
       visible={visible}
       setVisible={setVisible}
       trigger="click"
-      leftOffset={-96}
+      leftOffset={-30}
       searchKeywords={props.searchKeywords}
     />
   );

client/packages/lowcoder/src/comps/controls/iconControl.tsx

@@ -70,7 +70,7 @@ const Wrapper = styled.div`
   }
 `;
 
-const IconPicker = (props: {
+export const IconPicker = (props: {
   value: string;
   onChange: (value: string) => void;
   label?: ReactNode;

client/packages/lowcoder/src/pages/setting/idSource/OAuthForms/GenericOAuthForm.tsx

@@ -1,12 +1,12 @@
 import { useState } from "react";
 import { messageInstance, CloseEyeIcon } from "lowcoder-design";
-import { trans } from "i18n";
+import { i18nObjs, trans } from "i18n";
 import {
   FormStyled,
   PasswordLabel,
   StyledSteps
 } from "../styledComponents";
-import { default as Form } from "antd/es/form";
+import { default as Form, FormInstance } from "antd/es/form";
 import { default as Input } from "antd/es/input";
 import { default as Tooltip } from "antd/es/tooltip";
 import IdSourceApi, { ConfigItem } from "api/idSourceApi";
@@ -16,6 +16,7 @@ import _ from "lodash";
 import Flex from "antd/es/flex";
 import Button from "antd/es/button";
 import axios from "axios";
+import { IconPicker } from "@lowcoder-ee/comps/controls/iconControl";
 
 const sourceMappingKeys = [
   'uid',
@@ -80,7 +81,7 @@ function GenericOAuthForm(props: GenericOAuthFormProp) {
 
   const [saveLoading, setSaveLoading] = useState(false);
   const [currentStep, setCurrentStep] = useState(0);
-  const [issuerDetails, setIssuerDetails] = useState<ConfigProvider>();
+  const [issuerDetails, setIssuerDetails] = useState<ConfigProvider | {}>({});
 
   function saveAuthProvider(values: ConfigItem) {
     setSaveLoading(true);
@@ -105,31 +106,32 @@ function GenericOAuthForm(props: GenericOAuthFormProp) {
     form1.validateFields().then(async (values) => {
       setSaveLoading(true);
       const { issuer } = values;
-      const res = await axios.get<OpenIdProvider>(`${issuer}/.well-known/openid-configuration`);
-      setSaveLoading(false);
-
-      if (res.status >= 400) {
-        return null;
+      try {
+        const res = await axios.get<OpenIdProvider>(`${issuer}/.well-known/openid-configuration`);
+        setIssuerDetails(() => {
+          const issuer = {
+            authType: AuthType.Generic,
+            source: '',
+            sourceName: '',
+            issuer: res.data.issuer,
+            authorizationEndpoint: res.data.authorization_endpoint,
+            tokenEndpoint: res.data.token_endpoint,
+            userInfoEndpoint: res.data.userinfo_endpoint,
+            jwksUri: res.data.jwks_uri,
+            scope: res.data.scopes_supported.join(','),
+            sourceMappings: sourceMappingKeys.map(sourceKey => ({
+              [sourceKey]: sourceKey,
+            }))
+          };
+          form1.setFieldsValue(issuer);
+          return issuer;
+        })
+      } catch (e) {
+        setIssuerDetails({});
+      } finally {
+        setSaveLoading(false);
+        setCurrentStep(currentStep => currentStep + 1);
       }
-      setIssuerDetails(() => {
-        const issuer = {
-          authType: AuthType.Generic,
-          source: '',
-          sourceName: '',
-          issuer: res.data.issuer,
-          authorizationEndpoint: res.data.authorization_endpoint,
-          tokenEndpoint: res.data.token_endpoint,
-          userInfoEndpoint: res.data.userinfo_endpoint,
-          jwksUri: res.data.jwks_uri,
-          scope: res.data.scopes_supported.join(','),
-          sourceMappings: sourceMappingKeys.map(sourceKey => ({
-            [sourceKey]: sourceKey,
-          }))
-        };
-        form1.setFieldsValue(issuer);
-        return issuer;
-      })
-      setCurrentStep(currentStep => currentStep + 1);
     })
   }
 
@@ -215,6 +217,7 @@ function GenericOAuthForm(props: GenericOAuthFormProp) {
           const label = valueObject ? valueObject.label : value as string;
           const tip = valueObject && valueObject.tip;
           const isPassword = valueObject && valueObject.isPassword;
+          const isIcon = valueObject && valueObject.isIcon;
           return (
             <div key={key}>
               <Form.Item
@@ -247,6 +250,12 @@ function GenericOAuthForm(props: GenericOAuthFormProp) {
                     placeholder={trans("idSource.encryptedServer")}
                     autoComplete={"one-time-code"}
                   />
+                ) : isIcon ? (
+                  <IconPicker
+                    onChange={(value) => form1.setFieldValue("sourceIcon", value)}
+                    label={'Source Icon'}
+                    value={form1.getFieldValue('sourceIcon')}
+                  />
                 ) : (
                   <Input
                     placeholder={trans("idSource.formPlaceholder", {

client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx

@@ -37,6 +37,7 @@ import { validateResponse } from "api/apiUtils";
 import { ItemType } from "pages/setting/idSource/idSourceConstants";
 import _ from "lodash";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
+import { IconPicker } from "@lowcoder-ee/comps/controls/iconControl";
 
 type IdSourceDetailProps = {
   location: Location & { state: ConfigItem };
@@ -163,6 +164,7 @@ export const IdSourceDetail = (props: IdSourceDetailProps) => {
             const label = valueObject ? valueObject.label : value as string;
             const isList = valueObject && valueObject.isList;
             const isPassword = valueObject && valueObject.isPassword;
+            const isIcon = valueObject && valueObject.isIcon;
             return (
               <div key={key}>
                 <Form.Item
@@ -206,7 +208,7 @@ export const IdSourceDetail = (props: IdSourceDetailProps) => {
                       }
                       autoComplete={"one-time-code"}
                     />
-                  ) : !isPassword && !isList ? (
+                  ) : !isPassword && !isList && !isIcon ? (
                     <Input
                       placeholder={trans("idSource.formPlaceholder", {
                         label,
@@ -217,6 +219,12 @@ export const IdSourceDetail = (props: IdSourceDetailProps) => {
                         (lock ? <LockIcon onClick={() => handleLockClick()} /> : <UnLockIcon />)
                       }
                     />
+                  ) : !isPassword && !isList && isIcon ? (
+                    <IconPicker
+                      onChange={(value) => form.setFieldValue("sourceIcon", value)}
+                      label={'Source Icon'}
+                      value={form.getFieldValue('sourceIcon')}
+                    />
                   ) : (
                     <CustomSelect
                       options={(value as ItemType).options}

client/packages/lowcoder/src/pages/setting/idSource/idSourceConstants.ts

@@ -71,7 +71,7 @@ export const authConfig = {
       source: { label: "Source", isRequire: true },
       sourceName: { label: "Source Name", isRequire: true },
       sourceDescription: { label: "Source Description" },
-      sourceIcon: { label: "Source Icon" },
+      sourceIcon: { label: "Source Icon", isIcon: true },
       sourceCategory: { label: "Source Category" },
       ...clientIdandSecretConfig,
       issuer: { label: 'Issuer URI', isRequired: true },
@@ -105,6 +105,7 @@ export type ItemType = {
   isList?: boolean;
   isRequire?: boolean;
   isPassword?: boolean;
+  isIcon?: boolean;
   hasLock?: boolean;
   tip?: string;
 }

client/packages/lowcoder/src/pages/setting/styled.tsx

@@ -69,9 +69,9 @@ export const ModalNameDiv = styled.div`
 `;
 
 export const CustomModalStyled = styled(CustomModal)`
-  button {
-    margin-top: 20px;
-  }
+  // button {
+  //   margin-top: 20px;
+  // }
 `;
 
 export const TacoInputStyled = styled(TacoInput)`