added delete auth provider functionality

Author: raheeliftikhar5

client/packages/lowcoder/src/api/idSourceApi.ts

@@ -44,8 +44,8 @@ class IdSourceApi extends Api {
     return Api.post(IdSourceApi.saveConfigURL, request);
   }
 
-  static deleteConfig(id: string): AxiosPromise<ApiResponse> {
-    return Api.delete(IdSourceApi.deleteConfigURL(id));
+  static deleteConfig(id: string, deleteConfig?: boolean): AxiosPromise<ApiResponse> {
+    return Api.delete(IdSourceApi.deleteConfigURL(id), {delete: deleteConfig});
   }
 
   static syncManual(authType: string): AxiosPromise<ApiResponse> {

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -3545,12 +3545,12 @@ export const en = {
     "formSelectPlaceholder": "Please Select the {label}",
     "saveSuccess": "Saved Successfully",
     "dangerLabel": "Danger Zone",
-    "dangerTip": "Disabling This ID Provider May Result in Some Users Being Unable to Log In. Proceed With Caution.",
+    "dangerTip": "Disabling or Deleting This ID Provider May Result in Some Users Being Unable to Log In. Proceed With Caution.",
     "disable": "Disable",
     "disableSuccess": "Disabled Successfully",
     "encryptedServer": "-------- Encrypted on the Server Side --------",
     "disableTip": "Tips",
-    "disableContent": "Disabling This ID Provider May Result in Some Users Being Unable to Log In. Are You Sure to Proceed?",
+    "disableContent": "{action} This ID Provider May Result in Some Users Being Unable to Log In. Are You Sure to Proceed?",
     "manualTip": "",
     "lockTip": "The Content is Locked. To Make Changes, Please Click the {icon} to Unlock.",
     "lockModalContent": "Changing the 'ID Attribute' Field Can Have Significant Impacts on User Identification. Please Confirm That You Understand the Implications of This Change Before Proceeding.",

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

@@ -4,42 +4,62 @@ import { trans } from "i18n";
 import { useState } from "react";
 import { validateResponse } from "api/apiUtils";
 import IdSourceApi from "api/idSourceApi";
-import { DangerIcon, CustomModal } from "lowcoder-design";
+import { CustomModal } from "lowcoder-design";
 import history from "util/history";
 import { OAUTH_PROVIDER_SETTING } from "constants/routesURL";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
+import Flex from "antd/es/flex";
+import Alert from "antd/es/alert";
 
-export const DeleteConfig = (props: { id: string }) => {
+export const DeleteConfig = (props: {
+  id: string,
+  allowDelete?: boolean,
+  allowDisable?: boolean,
+}) => {
+  const [disableLoading, setDisableLoading] = useState(false);
   const [deleteLoading, setDeleteLoading] = useState(false);
-  const handleDelete = () => {
+
+  const handleDelete = (deleteConfig?: boolean) => {
+    const setLoading = deleteConfig ? setDeleteLoading : setDisableLoading;
+    const action = deleteConfig ? trans("delete") : trans("idSource.disable");
     CustomModal.confirm({
       title: trans("idSource.disableTip"),
-      content: trans("idSource.disableContent"),
+      content: trans("idSource.disableContent", {action}),
       onConfirm: () => {
-        setDeleteLoading(true);
-        IdSourceApi.deleteConfig(props.id)
-          .then((resp) => {
-            if (validateResponse(resp)) {
-              messageInstance.success(trans("idSource.disableSuccess"), 0.8, () =>
+        setLoading(true);
+        IdSourceApi.deleteConfig(props.id, deleteConfig)
+        .then((resp) => {
+          if (validateResponse(resp)) {
+              const successMsg = deleteConfig ? trans("home.deleteSuccessMsg") : trans("idSource.disableSuccess");
+              messageInstance.success(successMsg, 0.8, () =>
                 history.push(OAUTH_PROVIDER_SETTING)
               );
             }
           })
           .catch((e) => messageInstance.error(e.message))
-          .finally(() => setDeleteLoading(false));
+          .finally(() => setLoading(false));
       },
     });
   };
   return (
     <DeleteWrapper>
-      <div>{trans("idSource.dangerLabel")}</div>
-      <div className="danger-tip">
-        <DangerIcon />
-        {trans("idSource.dangerTip")}
-      </div>
-      <Button loading={deleteLoading} onClick={() => handleDelete()}>
-        {trans("idSource.disable")}
-      </Button>
+      <h4>{trans("idSource.dangerLabel")}</h4>
+      <Alert
+        className="danger-tip"
+        description={trans("idSource.dangerTip")}
+        type="warning"
+        showIcon
+      />
+      <Flex gap={8}>
+        <Button danger disabled={props.allowDisable} loading={disableLoading}  onClick={() => handleDelete()}>
+          {trans("idSource.disable")}
+        </Button>
+        {props.allowDelete && (
+          <Button type="primary" danger disabled={props.allowDisable} loading={deleteLoading} onClick={() => handleDelete(true)}>
+            {trans("delete")}
+          </Button>
+        )}
+      </Flex>
     </DeleteWrapper>
   );
 };

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

@@ -44,19 +44,22 @@ import { sourceMappingKeys } from "../OAuthForms/GenericOAuthForm";
 import Flex from "antd/es/flex";
 
 type IdSourceDetailProps = {
-  location: Location & { state: ConfigItem };
+  location: Location & { state: { config: ConfigItem, totalEnabledConfigs: number }};
 };
 
 export const IdSourceDetail = (props: IdSourceDetailProps) => {
-  const configDetail = props.location.state;
+  const {
+    config: configDetail,
+    totalEnabledConfigs,
+  } = props.location.state;
   const [form] = useForm();
   const [lock, setLock] = useState(() => {
-    const config = props.location.state;
+    const { config } = props.location.state;
     return !config.ifLocal;
   });
   const [saveLoading, setSaveLoading] = useState(false);
   const [saveDisable, setSaveDisable] = useState(() => {
-    const config = props.location.state;
+    const { config } = props.location.state;
     if (
       (config.authType === AuthType.Form && !config.enable) ||
       (!config.ifLocal && !config.enable)
@@ -324,7 +327,11 @@ export const IdSourceDetail = (props: IdSourceDetailProps) => {
         {configDetail.enable && (
           <>
             <Divider />
-            <DeleteConfig id={configDetail.id} />
+            <DeleteConfig
+              id={configDetail.id}
+              allowDelete={configDetail.authType !== AuthType.Form}
+              allowDisable={!Boolean(totalEnabledConfigs)}
+            />
           </>
         )}
       </Content>

client/packages/lowcoder/src/pages/setting/idSource/list.tsx

@@ -33,7 +33,6 @@ import { FreeTypes } from "pages/setting/idSource/idSourceConstants";
 import { messageInstance, AddIcon } from "lowcoder-design";
 import { currentOrgAdmin } from "../../../util/permissionUtils";
 import CreateModal from "./createModal";
-import _ from "lodash";
 import { HelpText } from "components/HelpText";
 import { IconControlView } from "@lowcoder-ee/comps/controls/iconControl";
 
@@ -42,6 +41,7 @@ export const IdSourceList = (props: any) => {
   const config = useSelector(selectSystemConfig);
   const { currentOrgId}  = user;
   const [configs, setConfigs] = useState<ConfigItem[]>([]);
+  const [enabledConfigs, setEnabledConfigs] = useState<ConfigItem[]>([]);
   const [fetching, setFetching] = useState(false);
   const [modalVisible, setModalVisible] = useState(false);
   const enableEnterpriseLogin = useSelector(selectSystemConfig)?.featureFlag?.enableEnterpriseLogin;
@@ -76,8 +76,8 @@ export const IdSourceList = (props: any) => {
           let res: ConfigItem[] = resp.data.data.filter((item: ConfigItem) =>
             IdSource.includes(item.authType)
           );
-          // res = _.uniqBy(res, 'authType');
           setConfigs(res);
+          setEnabledConfigs(res.filter(item => item.enable));
         }
       })
       .catch((e) => {
@@ -126,7 +126,7 @@ export const IdSourceList = (props: any) => {
               }
               history.push({
                 pathname: OAUTH_PROVIDER_DETAIL,
-                state: record,
+                state: { config: record, totalEnabledConfigs: enabledConfigs.length },
               });
             },
           })}

client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx

@@ -258,10 +258,9 @@ export const DeleteWrapper = styled.div`
   line-height: 19px;
 
   .danger-tip {
-    height: 32px;
-    padding: 0 16px 0 8px;
-    margin: 5px 0 8px 0;
-    background: #fff3f1;
+    max-width: 440px;
+    padding: 8px 16px;
+    margin: 5px 0 12px 0;
     border-radius: 4px;
     display: inline-flex;
     align-items: center;
@@ -270,23 +269,6 @@ export const DeleteWrapper = styled.div`
       margin-right: 8px;
     }
   }
-
-  .ant-btn {
-    min-width: 84px;
-    display: block;
-    padding: 4px 8px;
-    background: #fef4f4;
-    border: 1px solid #fccdcd;
-    font-size: 13px;
-    color: #f73131;
-
-    &:hover,
-    &.ant-btn-loading {
-      background: #feecec;
-    }
-
-    ${btnLoadingCss}
-  }
 `;
 
 export const StatusSpan = styled.span`