Merge pull request #1785 from kamalqureshi/update_app_card_ui

Fixed description and title ellipses

Author: raheeliftikhar5

client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx

@@ -22,12 +22,12 @@ import history from "util/history";
 import { APPLICATION_VIEW_URL } from "constants/routesURL";
 import { TypographyText } from "../../components/TypographyText";
 import { useParams } from "react-router-dom";
-import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import {FolderIcon} from "icons";
 import { BrandedIcon } from "@lowcoder-ee/components/BrandedIcon";
 import { Typography } from "antd";
 import { default as Form } from "antd/es/form";
 import { default as Input } from "antd/es/input";
+import { default as AntdTypographyText } from "antd/es/typography/Text";
 import { MultiIconDisplay } from "@lowcoder-ee/comps/comps/multiIconDisplay";
 import { FormStyled } from "../setting/idSource/styledComponents";
 
@@ -107,12 +107,6 @@ const CardInfo = styled.div`
   cursor: pointer;
   padding-right: 12px;
 
-  &:hover {
-    .ant-typography {
-      color: #315efb;
-    }
-  }
-
   .ant-typography {
     padding: 2px 2px 8px 2px;
   }
@@ -138,6 +132,20 @@ const OperationWrapper = styled.div`
   }
 `;
 
+export const StyledTypographyText = styled(AntdTypographyText)`
+  font-size: 14px;
+  color: #333333;
+  line-height: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+
+  &:hover {
+  color: #315efb;
+  }
+  }
+`;
+
 const MONTH_MILLIS = 30 * 24 * 60 * 60 * 1000;
 
 interface UpdateAppModalProps {
@@ -207,7 +215,6 @@ export function UpdateAppModal({ visible, onCancel, onOk, res, folderId }: Updat
 
 export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => void; setModify:any; modify: boolean }) {
   const { res, onMove, setModify, modify } = props;
-  const [appNameEditing, setAppNameEditing] = useState(false);
   const [dialogVisible, setDialogVisible] = useState(false)
   const dispatch = useDispatch();
 
@@ -237,6 +244,8 @@ export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => voi
   const Icon = resInfo.icon;
 
   const handleModalOk = (values: any) => {
+    res.type === HomeResTypeEnum.Folder &&
+      dispatch(updateFolder({ id: res.id, name: values.appName || res.name }))
     dispatch(
       updateAppMetaAction({ applicationId: res.id, name: values.appName || res.name, folderId: folderId })
     );
@@ -284,9 +293,6 @@ export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => voi
           }
           <CardInfo
             onClick={(e) => {
-              if (appNameEditing) {
-                return;
-              }
               if (res.type === HomeResTypeEnum.Folder) {
                 handleFolderViewClick(res.id);
               } else {
@@ -302,30 +308,9 @@ export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => voi
               }
             }}
           >
-            <TypographyText
-              value={res.title || res.name}
-              editing={false}
-              onChange={(value) => {
-                if (!value.trim()) {
-                  messageInstance.warning(trans("home.nameCheckMessage"));
-                  return;
-                }
-                if (res.type === HomeResTypeEnum.Folder) {
-                  dispatch(updateFolder({ id: res.id, name: value }));
-                  setTimeout(() => {
-                    setModify(!modify);
-                  }, 200);
-                } else {
-                  dispatch(
-                    updateAppMetaAction({ applicationId: res.id, name: value, folderId: folderId })
-                  );
-                  setTimeout(() => {
-                    setModify(!modify);
-                  }, 200);
-                }
-                setAppNameEditing(false);
-              }}
-            />
+            <StyledTypographyText> 
+              {res.title || res.name}
+            </StyledTypographyText>
 
             {res?.description 
               && <Typography.Text 

client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx

@@ -24,7 +24,7 @@ import { useParams } from "react-router-dom";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { BrandedIcon } from "@lowcoder-ee/components/BrandedIcon";
 import { MultiIconDisplay } from "@lowcoder-ee/comps/comps/multiIconDisplay";
-import { UpdateAppModal } from "./HomeResCard";
+import { StyledTypographyText, UpdateAppModal } from "./HomeResCard";
 
 const OperationWrapper = styled.div`
   display: flex;
@@ -49,12 +49,6 @@ const EditBtn = styled(TacoButton)`
   height: 24px;
 `;
 
-const TypographyText = styled(AntdTypographyText)`
-  margin: 0 !important;
-  left: 0 !important;
-  width: 100%;
-`;
-
 export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, modify?: boolean, mode?: string }) => {
   const {setModify, modify, resources, mode} = props
   const dispatch = useDispatch();
@@ -82,6 +76,8 @@ export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, mo
 
   const handleModalOk = (values: any) => {
     if (currentRes) {
+      currentRes.type === HomeResTypeEnum.Folder &&
+        dispatch(updateFolder({ id: currentRes.id, name: values.appName || currentRes.name }))
       dispatch(
         updateAppMetaAction({ applicationId: currentRes.id, name: values.appName || currentRes.name, folderId: folderId })
       );
@@ -168,43 +164,9 @@ export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, mo
                       />
                     </BrandedIcon>
                   )}
-                  <TypographyText
-                    ellipsis={true}
-                    title={item.name}
-                    editable={{
-                      enterIcon: null,
-                      tooltip: false,
-                      editing: item.id === needRenameRes?.id,
-                      icon: null,
-                      triggerType: ["text"],
-                      onChange: (value) => {
-                        if (!value.trim()) {
-                          messageInstance.warning(trans("home.nameCheckMessage"));
-                          return;
-                        }
-                        if (item.type === HomeResTypeEnum.Folder) {
-                          dispatch(updateFolder({ id: item.id, name: value }));
-                          setTimeout(() => {
-                            setModify(!modify);
-                          }, 200);
-                        } else {
-                          dispatch(
-                            updateAppMetaAction({
-                              applicationId: item.id,
-                              name: value,
-                              folderId: folderId,
-                            })
-                          );
-                          setTimeout(() => {
-                            setModify(!modify);
-                          }, 200);
-                        }
-                        setNeedRenameRes(undefined);
-                      },
-                    }}
-                  >
+                  <StyledTypographyText> 
                     {item.title || item.name}
-                  </TypographyText>
+                  </StyledTypographyText>
                 </NameWrapper>
               );
             },