Support Tickets Table

FalkWolsky · FalkWolsky · commit 07136fcf9dc7 · 2024-08-31T22:24:43.000+02:00
diff --git a/client/packages/lowcoder/src/api/supportApi.ts b/client/packages/lowcoder/src/api/supportApi.ts
@@ -87,32 +87,32 @@ export const searchCustomerTickets = async (orgID : string, currentUserId : stri
 
   const apiBody = {
     path: "webhook/support/get-issues",
-    data: {host : domain, orgId : orgID, userId : currentUserId, supportsubscriptionId : "1PostVDDlQgecLSfhG52o5rB"},
+    data: {"host" : domain, "orgId" : orgID, "userId" : currentUserId, "supportsubscriptionId" : "1PostVDDlQgecLSfhG52o5rB"},
     method: "post",
     headers: lcHeaders
   };
   try {
     const result = await SupportApi.secureRequest(apiBody);
     return result.data as TicketList;
   } catch (error) {
-    console.error("Error searching customer:", error);
+    console.error("Error searching Support Tickets: ", error);
     throw error;
   }
 };
 
-export const getTicket = async (orgID : string, currentUserId : string, domain : string) => {
+export const getTicket = async (ticketKey : string) => {
 
   const apiBody = {
-    path: "webhook/support/get-issues",
-    data: {host : domain, orgId : orgID, userId : currentUserId, supportsubscriptionId : "1PostVDDlQgecLSfhG52o5rB"},
+    path: "webhook/support/get-issue",
+    data: {"ticketKey" : ticketKey},
     method: "post",
     headers: lcHeaders
   };
   try {
     const result = await SupportApi.secureRequest(apiBody);
-    return result?.data?.data?.length === 1 ? result.data.data as TicketList : null;
+    return result?.data?.data?.length === 1 ? result.data.data as any : null;
   } catch (error) {
-    console.error("Error searching customer:", error);
+    console.error("Error getting individual Support Ticket: ", error);
     throw error;
   }
 };
diff --git a/client/packages/lowcoder/src/constants/routesURL.ts b/client/packages/lowcoder/src/constants/routesURL.ts
@@ -10,7 +10,7 @@ export const NEWS_URL = "/news";
 export const ORG_HOME_URL = "/org/home";
 export const COMPONENT_DOC_URL = "/components";
 export const SETTING_URL = "/setting";
-export const SUPPORT_URL = `/support`;
+export const SUPPORT_URL = "/support";
 export const PERMISSION_SETTING = "/setting/permission";
 export const ORGANIZATION_SETTING = "/setting/organization";
 export const SUBSCRIPTION_SETTING = "/setting/subscription";
@@ -28,6 +28,7 @@ export const SUBSCRIPTION_SUCCESS = `${SUBSCRIPTION_SETTING}/success`;
 export const SUBSCRIPTION_ERROR = `${SUBSCRIPTION_SETTING}/error`;
 export const SUBSCRIPTION_DETAIL = `${SUBSCRIPTION_SETTING}/details/:subscriptionId/:productId`;
 export const SUBSCRIPTION_INFO = `${SUBSCRIPTION_SETTING}/info/:productId`;
+
 export const SUPPORT_DETAIL = `${SUPPORT_URL}/details/:ticketId`;
 
 export const ALL_APPLICATIONS_URL = "/apps";
@@ -109,3 +110,5 @@ export const buildOrgId = (orgId: string) => `${ORGANIZATION_SETTING}/${orgId}`;
 
 export const buildSubscriptionSettingsLink = (subscriptionId: string, productId : string) => `${SUBSCRIPTION_SETTING}/details/${subscriptionId}/${productId}`;
 export const buildSubscriptionInfoLink = (productId: string) => `${SUBSCRIPTION_SETTING}/info/${productId}`;
+
+export const buildSupportTicketLink = (ticketId: string) => `${SUPPORT_URL}/details/${ticketId}`;
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -3135,10 +3135,23 @@ export const en = {
     "createNavigation": "Create Navigation",
     "howToUseAPI": "How to use the Open Rest API",
     "support": "Support",
+  },
+  "support" : {
     "supportTitle": "Lowcoder Support",
     "supportContent": "If you have any questions or need help, please use the ticket system get your issue solved fast.",
     "newSupportTicket": "New Support Ticket",
+    "ticketTitle": "Title",
+    "priority": "Priority",
+    "assignee": "Assignee",
+    "status": "Ticket Status",
+    "updatedTime": "Updated Time",
+    "active": "Active",
+    "inactive": "Inactive",
+    "noEmail": "No Email",
+    "details": "Details",
+    "reloadTickets" : "Reload Tickets",
   },
+
   "carousel": {
     "dotPosition": "Navigation Dots position",
     "autoPlay": "AutoPlay",
diff --git a/client/packages/lowcoder/src/pages/datasource/datasourceList.tsx b/client/packages/lowcoder/src/pages/datasource/datasourceList.tsx
@@ -145,6 +145,7 @@ export const DatasourceList = () => {
         </HeaderWrapper>
         <BodyWrapper>
           <StyledTable
+            loading={!datasource.length}
             rowClassName={(record: any) => (!record.edit ? "datasource-can-not-edit" : "")}
             tableLayout={"auto"}
             scroll={{ x: "100%" }}
diff --git a/client/packages/lowcoder/src/pages/setting/subscriptions/index.tsx b/client/packages/lowcoder/src/pages/setting/subscriptions/index.tsx
@@ -1,5 +1,5 @@
 // index.tsx for routes
-import { Route, Switch, useLocation } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 import { SUBSCRIPTION_SETTING, SUBSCRIPTION_DETAIL, SUBSCRIPTION_INFO, SUBSCRIPTION_SUCCESS, SUBSCRIPTION_ERROR } from 'constants/routesURL';
 import { SubscriptionSetting } from './subscriptionSetting';
 import SubscriptionSuccess from './subscriptionSuccess';
diff --git a/client/packages/lowcoder/src/pages/support/supportDetail.tsx b/client/packages/lowcoder/src/pages/support/supportDetail.tsx
@@ -4,7 +4,6 @@ import { trans } from "i18n";
 import { useParams } from "react-router-dom";
 import history from "util/history";
 import { getTicket }  from '@lowcoder-ee/api/supportApi';
-import { useUserDetails } from "./useUserDetails";
 
 const FieldWrapper = styled.div`
   margin-bottom: 32px;
@@ -17,13 +16,11 @@ const Wrapper = styled.div`
 `;
 
 export function SupportDetail() {
-  const { ticketId } = useParams<{ ticketId: string }>();
-
-  const { orgID, currentUser, domain } = useUserDetails();
 
-  const ticket = getTicket(orgID, currentUser.id, domain);
+  const { ticketId } = useParams<{ ticketId: string }>();
+  const ticket = getTicket(ticketId);
 
-  console.log("product", ticket);
+  console.log("ticket", ticket);
 
   return (
     <Wrapper>
@@ -35,4 +32,4 @@ export function SupportDetail() {
   );
 }
 
-export default SupportDetail;
+export default SupportDetail;
diff --git a/client/packages/lowcoder/src/pages/support/supportOverview.tsx b/client/packages/lowcoder/src/pages/support/supportOverview.tsx
@@ -8,6 +8,9 @@ import StepModal from "components/StepModal";
 import { Search, TacoButton } from "lowcoder-design";
 import { Table } from "../../components/Table";
 import { timestampToHumanReadable } from "../../util/dateTimeUtils";
+import { Avatar, Flex, Tooltip } from "antd";
+import { buildSupportTicketLink } from "constants/routesURL";
+import history from "util/history";
 
 const SupportWrapper = styled.div`
   display: flex;
@@ -45,6 +48,16 @@ const AddBtn = styled(TacoButton)`
   height: 32px;
 `;
 
+const ReloadBtn = styled(TacoButton)`
+  min-width: 96px;
+  width: fit-content;
+  height: 32px;
+`;
+
+const EditBtn = styled(TacoButton)`
+
+`;
+
 const BodyWrapper = styled.div`
   width: 100%;
   flex-grow: 1;
@@ -61,6 +74,15 @@ const SubColumnCell = styled.div`
   color: #8b8fa3;
 `;
 
+const StatusDot = styled.span<{ active: boolean }>`
+  display: inline-block;
+  margin-left: 14px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: ${(props) => (props.active ? "green" : "gray")};
+`;
+
 function formatDateToMinute(dateString: string): string {
   // Create a Date object from the string
   const date = new Date(dateString);
@@ -76,6 +98,11 @@ function formatDateToMinute(dateString: string): string {
   return `${year}-${month}-${day} ${hour}:${minute}`;
 }
 
+// Function to handle edit button click
+const handleEditClick = (ticketId: string) => {
+  history.push(buildSupportTicketLink(ticketId));
+};
+
 export function SupportOverview() {
   const { orgID, currentUser, domain } = useUserDetails();
   const [supportTickets, setSupportTickets] = useState<any>([]);
@@ -84,19 +111,21 @@ export function SupportOverview() {
   const [searchValue, setSearchValue] = useState("");
   const [isCreateFormShow, showCreateForm] = useState(false);
 
-  useEffect(() => {
-    const fetchSupportTickets = async () => {
-      try {
-        const ticketData = await searchCustomerTickets(orgID, currentUser.id, domain);
-        setSupportTickets(ticketData);
-      } catch (err) {
-        setError("Failed to fetch support tickets.");
-        console.error(err);
-      } finally {
-        setLoading(false);
-      }
-    };
+   // Function to fetch support tickets
+   const fetchSupportTickets = async () => {
+    setLoading(true); // Set loading to true while fetching data
+    try {
+      const ticketData = await searchCustomerTickets(orgID, currentUser.id, domain);
+      setSupportTickets(ticketData);
+    } catch (err) {
+      setError("Failed to fetch support tickets.");
+      console.error(err);
+    } finally {
+      setLoading(false); // Set loading to false after fetching data
+    }
+  };
 
+  useEffect(() => {
     fetchSupportTickets();
   }, [orgID, currentUser.id, domain]);
 
@@ -112,7 +141,7 @@ export function SupportOverview() {
 
   return (
     <>
-      <Helmet><title>{trans("home.supportTitle")}</title></Helmet>
+      <Helmet><title>{trans("support.supportTitle")}</title></Helmet>
       <SupportWrapper>
 
       <StepModal
@@ -135,56 +164,70 @@ export function SupportOverview() {
           ]} />
 
         <HeaderWrapper>
-          <Title>{trans("home.supportTickets")}</Title>
-          <Search
-            placeholder={trans("search")}
-            value={searchValue}
-            onChange={(e) => setSearchValue(e.target.value)}
-            style={{ width: "192px", height: "32px", margin: "0 12px 0 0" }} />
-          <AddBtn buttonType={"primary"} onClick={() => showCreateForm(true)}>
-            {trans("home.newSupportTicket")}
-          </AddBtn>
+          <Title>{trans("support.supportTitle")}</Title>
+          <Flex gap="12px">
+            <Search
+              placeholder={trans("search")}
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+              style={{ width: "192px", height: "32px", margin: "0 12px 0 0" }} />
+            <AddBtn buttonType={"primary"} onClick={() => showCreateForm(true)}>
+              {trans("support.newSupportTicket")}
+            </AddBtn>
+            <ReloadBtn buttonType={"normal"} onClick={() => fetchSupportTickets()}>
+              {trans("support.reloadTickets")}
+            </ReloadBtn>
+          </Flex>
         </HeaderWrapper>
         <BodyWrapper>
-          {!loading ? (
             <StyledTable
+              loading={loading}
               rowClassName="datasource-can-not-edit"
               tableLayout={"auto"}
               scroll={{ x: "100%" }}
               pagination={false}
               columns={[
                 {
-                  title: trans("home.ticketTitle"),
+                  title: trans("support.ticketTitle"),
                   dataIndex: "title",
                   ellipsis: true,
                   sorter: (a: any, b: any) => a.title.localeCompare(b.title),
                 },
                 {
-                  title: trans("home.priority"),
+                  title: trans("support.priority"),
                   dataIndex: "priority",
                   ellipsis: true,
                   width: "192px",
                   sorter: (a: any, b: any) => a.priority.name.localeCompare(b.priority.name),
                   render: (priority: any) => <SubColumnCell>{priority.name}</SubColumnCell>,
                 },
                 {
-                  title: trans("home.assignee"),
+                  title: trans("support.assignee"),
                   dataIndex: "assignee",
                   ellipsis: true,
                   width: "192px",
-                  sorter: (a: any, b: any) => a.assignee.email.localeCompare(b.assignee.email),
-                  render: (assignee: any) => <SubColumnCell>{assignee.email}</SubColumnCell>,
+                  render: (assignee: any) => (
+                    <SubColumnCell>
+                      <Tooltip title={"Support Member is active in: " + 
+                          assignee.timeZone + ", " + 
+                          (assignee.email || trans("support.noEmail"))
+                        }>
+                        <Avatar src={assignee.avatar} alt={assignee.email} />
+                      </Tooltip>
+                      <StatusDot active={assignee.active} />
+                    </SubColumnCell>
+                  ),
                 },
                 {
-                  title: trans("home.status"),
+                  title: trans("support.status"),
                   dataIndex: "status",
                   ellipsis: true,
-                  width: "192px",
+                  width: "220px",
                   sorter: (a: any, b: any) => a.status.name.localeCompare(b.status.name),
                   render: (status: any) => <SubColumnCell>{status.name}</SubColumnCell>,
                 },
                 {
-                  title: trans("home.updatedTime"),
+                  title: trans("support.updatedTime"),
                   dataIndex: "updated",
                   ellipsis: true,
                   width: "192px",
@@ -195,6 +238,19 @@ export function SupportOverview() {
                     </SubColumnCell>
                   ),
                 },
+                {
+                  title: trans("support.details"),
+                  dataIndex: "actions",
+                  width: "120px",
+                  render: (key: string) => (
+                    <EditBtn
+                      buttonType={"normal"}
+                      onClick={() => handleEditClick(key)}
+                    >
+                      {trans("support.details")}
+                    </EditBtn>
+                  ),
+                },
               ]}
               dataSource={filteredTickets.map((ticket: any, index: number) => ({
                 key: index,
@@ -203,11 +259,9 @@ export function SupportOverview() {
                 assignee: ticket.assignee,
                 status: ticket.status,
                 updated: ticket.updated,
+                actions: ticket.key,
               }))}
             />
-          ) : (
-            <div>Loading...</div>
-          )}
           {error && <div>Error: {error}</div>}
         </BodyWrapper>
       </SupportWrapper>
diff --git a/client/packages/lowcoder/src/util/envUtils.ts b/client/packages/lowcoder/src/util/envUtils.ts
@@ -1,7 +1,6 @@
 import { SystemConfig } from "constants/configConstants";
 import { useSelector } from "react-redux";
 import { selectSystemConfig } from "redux/selectors/configSelectors";
-// import { useCheckSubscriptions, SubscriptionProducts, SubscriptionsData } from "@lowcoder-ee/api/subscriptionApi";
 
 export function localEnv(): boolean {
   return REACT_APP_ENV === "local";
@@ -39,11 +38,3 @@ export function useCloudHosting() {
   const systemConfig = useSelector(selectSystemConfig);
   return systemConfig?.cloudHosting ?? true;
 }
-
-/* export function useSubscription(type: SubscriptionProducts): boolean {
-  const { subscriptions, subscriptionDataLoaded, subscriptionDataError } = useCheckSubscriptions();
-  if (!subscriptionDataLoaded || subscriptionDataError) {
-    return false;
-  }
-  return subscriptions.some(subscription => subscription.product === type);
-} */
