integrate API in environments listing page

Author: iamfaran

client/packages/lowcoder/src/pages/setting/environments/environmentList.tsx

@@ -1,10 +1,12 @@
-// environmentList.tsx - Main listing page for environments
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { ADMIN_ROLE, SUPER_ADMIN_ROLE } from "constants/orgConstants";
 import { AddIcon, CustomModal, DangerIcon, EditPopover } from "lowcoder-design";
 import { useDispatch, useSelector } from "react-redux";
-// Replace these with actual actions when available
-// import { createEnvironmentAction, deleteEnvironmentAction, updateEnvironmentApiKeyAction } from "redux/reduxActions/environmentActions";
+import {
+  fetchEnvironments,
+  deleteEnvironmentAction,
+  updateEnvironmentApiKeyAction,
+} from "redux/reduxActions/enterpriseActions";
 import styled from "styled-components";
 import { trans, transToNode } from "i18n";
 import { buildEnvironmentId } from "constants/routesURL";
@@ -16,7 +18,10 @@ import {
 } from "../permission/styledComponents";
 import { Table } from "components/Table";
 import history from "util/history";
-import { Level1SettingPageContentWithList, Level1SettingPageTitleWithBtn } from "../styled";
+import {
+  Level1SettingPageContentWithList,
+  Level1SettingPageTitleWithBtn,
+} from "../styled";
 import { timestampToHumanReadable } from "util/dateTimeUtils";
 import { isSaasMode } from "util/envUtils";
 import { selectSystemConfig } from "redux/selectors/configSelectors";
@@ -25,8 +30,12 @@ import { default as Input } from "antd/es/input";
 import { default as Modal } from "antd/es/modal";
 import { default as Tooltip } from "antd/es/tooltip";
 import { getUser } from "redux/selectors/usersSelectors";
-// Replace with actual selector when available
-// import { getEnvironmentCreateStatus } from "redux/selectors/environmentSelectors";
+import {
+  selectEnvironments,
+  selectEnvironmentsLoading,
+  selectEnvironmentsError,
+  selectApiKeyUpdating,
+} from "redux/selectors/enterpriseSelectors";
 import { StyledTag } from "./styledComponents";
 
 const EnvironmentName = styled.div`
@@ -42,7 +51,7 @@ const EnvironmentName = styled.div`
 
 const DomainName = styled.div`
   font-size: 13px;
-  color: #8B8FA3;
+  color: #8b8fa3;
 `;
 
 const TableStyled = styled(Table)`
@@ -119,14 +128,22 @@ const ApiKeyStatusIcon = styled.div`
   display: inline-flex;
   align-items: center;
   margin-left: 8px;
-  
+
   svg {
     width: 16px;
     height: 16px;
-    color: ${props => props.color || "#8B8FA3"};
+    color: ${(props) => props.color || "#8B8FA3"};
   }
 `;
 
+
+const LoadingWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+`;
+
 type DataItemInfo = {
   id: string;
   name: string;
@@ -139,57 +156,36 @@ type DataItemInfo = {
 };
 
 function EnvironmentSetting() {
-  // For now, use mock data until we have Redux actions and selectors for environments
-  const mockEnvironments = [
-    {
-      id: "env1",
-      name: "Development",
-      domain: "lowcoder-dev.company.com",
-      stage: "development",
-      isMaster: true,
-      hasApiKey: true,
-      createTime: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
-    },
-    {
-      id: "env2",
-      name: "Testing",
-      domain: "lowcoder-test.company.com",
-      stage: "testing",
-      isMaster: false,
-      hasApiKey: true,
-      createTime: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
-    },
-    {
-      id: "env3",
-      name: "Production",
-      domain: "lowcoder-prod.company.com", 
-      stage: "production",
-      isMaster: false,
-      hasApiKey: false,
-      createTime: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
-    },
-  ];
-
   const user = useSelector(getUser);
-  const environments = mockEnvironments; // Replace with actual environments from Redux when available
   const dispatch = useDispatch();
   const sysConfig = useSelector(selectSystemConfig);
+
+  // Get environment data from Redux
+  const environments = useSelector(selectEnvironments);
+  const loading = useSelector(selectEnvironmentsLoading);
+  const error = useSelector(selectEnvironmentsError);
+  const apiKeyUpdating = useSelector(selectApiKeyUpdating);
+
   const [form] = Form.useForm();
   const [apiKeyForm] = Form.useForm();
   const [isApiKeyModalVisible, setIsApiKeyModalVisible] = useState(false);
-  const [currentEnvironment, setCurrentEnvironment] = useState<DataItemInfo | null>(null);
+  const [currentEnvironment, setCurrentEnvironment] =
+    useState<DataItemInfo | null>(null);
 
-  // Mock state for environment creation (replace with actual selector when available)
-  const environmentCreateStatus = "idle"; // useSelector(getEnvironmentCreateStatus);
+  // Fetch environments when component mounts
+  useEffect(() => {
+    dispatch(fetchEnvironments());
+  }, [dispatch]);
 
+  // Transform API data to match the UI expected format
   const dataSource = environments.map((env) => ({
-    id: env.id,
-    name: env.name,
-    domain: env.domain,
-    stage: env.stage,
+    id: env.environmentId,
+    name: env.environmentType, // Using environmentType as name (adjust based on your actual data model)
+    domain: env.environmentType + ".domain.com", // Placeholder domain (adjust based on your actual data)
+    stage: env.environmentType.toLowerCase(),
     isMaster: env.isMaster,
-    hasApiKey: env.hasApiKey,
-    createTime: env.createTime,
+    hasApiKey: !!env.environmentApikey,
+    createTime: env.createdAt,
     del: environments.length > 1 && !env.isMaster, // Only allow deletion if there's more than one environment and not master
   }));
 
@@ -210,6 +206,7 @@ function EnvironmentSetting() {
   const handleApiKeyModalOpen = (environment: DataItemInfo) => {
     setCurrentEnvironment(environment);
     setIsApiKeyModalVisible(true);
+    apiKeyForm.resetFields();
   };
 
   const handleApiKeyModalClose = () => {
@@ -220,21 +217,37 @@ function EnvironmentSetting() {
   const handleApiKeySubmit = () => {
     apiKeyForm.submit();
     apiKeyForm.validateFields().then((values) => {
-      // Replace with actual action when available
-      // dispatch(updateEnvironmentApiKeyAction({
-      //   environmentId: currentEnvironment.id,
-      //   apiKey: values.apiKey
-      // }));
-      console.log("Update API Key for environment", currentEnvironment?.id, values.apiKey);
-      handleApiKeyModalClose();
+      if (currentEnvironment) {
+        dispatch(updateEnvironmentApiKeyAction({
+          environmentId: currentEnvironment.id,
+          apiKey: values.apiKey
+        }));
+        handleApiKeyModalClose();
+      }
     });
   };
 
+  if (loading) {
+    return (
+      <LoadingWrapper>
+        {/* You can add a Spinner component here */}
+        Loading environments...
+      </LoadingWrapper>
+    );
+  }
+
+  if (error) {
+    return (
+      <div>
+        Error loading environments. Please try again.
+      </div>
+    );
+  }
+
   return (
     <Level1SettingPageContentWithList>
       <Level1SettingPageTitleWithBtn>
         {trans("settings.environments")}
-        {/* Adding API Keys is handled via existing environments */}
       </Level1SettingPageTitleWithBtn>
       <div>
         <TableStyled
@@ -334,12 +347,15 @@ function EnvironmentSetting() {
                     e.stopPropagation();
                     handleApiKeyModalOpen(item);
                   }}
+                  loading={apiKeyUpdating && currentEnvironment?.id === item.id}
+                  style={{opacity: 1}}
                 >
                   {item.hasApiKey ? trans("environmentSettings.updateApiKey") : trans("environmentSettings.addApiKey")}
                 </EditBtn>
                 <EditBtn
                   className={"environment-edit-button"}
                   buttonType={"primary"}
+                  style={{opacity: 1}}
                   onClick={(e) => {
                     e.stopPropagation();
                     history.push(buildEnvironmentId(item.id));
@@ -394,9 +410,7 @@ function EnvironmentSetting() {
                           return form.validateFields().then(() => {
                             const name = form.getFieldValue("name");
                             if (name === item.name) {
-                              // Replace with actual action when available
-                              // dispatch(deleteEnvironmentAction(item.id));
-                              console.log("Delete environment", item.id);
+                              dispatch(deleteEnvironmentAction(item.id));
                               form.resetFields();
                             } else {
                               form.setFields([
@@ -425,18 +439,19 @@ function EnvironmentSetting() {
           }))}
         />
       </div>
-
+  
       {/* API Key Modal */}
       <Modal
         title={currentEnvironment?.hasApiKey 
           ? trans("environmentSettings.updateApiKeyTitle") 
           : trans("environmentSettings.addApiKeyTitle")}
-        visible={isApiKeyModalVisible}
+        open={isApiKeyModalVisible}
         onCancel={handleApiKeyModalClose}
         onOk={handleApiKeySubmit}
         okText={currentEnvironment?.hasApiKey 
           ? trans("environmentSettings.updateApiKeyButton") 
           : trans("environmentSettings.addApiKeyButton")}
+        confirmLoading={apiKeyUpdating}
       >
         <Content>
           <p>{transToNode("environmentSettings.apiKeyModalDescription", {
@@ -464,4 +479,4 @@ function EnvironmentSetting() {
   );
 }
 
-export const EnvironmentList = EnvironmentSetting;
+export const EnvironmentList = EnvironmentSetting;