From 57403776f23903471dc78d227b80f9a011ad851c Mon Sep 17 00:00:00 2001
From: KaWaite <34051327+KaWaite@users.noreply.github.com>
Date: Thu, 7 Dec 2023 11:52:25 +0900
Subject: [PATCH] chore(web): multiple bug fixes (#854)

---
 .../beta/components/CheckboxField/index.tsx   | 12 ++++++--
 web/src/beta/components/ListItem/index.tsx    |  1 -
 .../components/fields/CameraField/index.tsx   | 12 ++++++--
 .../tabs/map/LeftPanel/Layers/LayerItem.tsx   | 29 +++++++------------
 web/src/services/api/pluginsApi.ts            |  8 ++---
 5 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/web/src/beta/components/CheckboxField/index.tsx b/web/src/beta/components/CheckboxField/index.tsx
index db58162e65..a87f0a9aae 100644
--- a/web/src/beta/components/CheckboxField/index.tsx
+++ b/web/src/beta/components/CheckboxField/index.tsx
@@ -14,9 +14,9 @@ const CheckBoxField: React.FC<Props> = ({ onClick, checked, label }) => {
     <Field onClick={() => onClick?.(!checked)}>
       <BoxField>{checked && <CheckMark icon="checkmark" />}</BoxField>
       {label && (
-        <Text size="footnote" color={theme.content.main}>
+        <StyledText size="footnote" color={theme.content.main}>
           {label}
-        </Text>
+        </StyledText>
       )}
     </Field>
   );
@@ -27,7 +27,13 @@ const Field = styled.button`
   align-items: center;
   gap: 12px;
   width: 100%;
-  height: 20px;
+  min-height: 20px;
+`;
+
+const StyledText = styled(Text)`
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 const BoxField = styled.div`
diff --git a/web/src/beta/components/ListItem/index.tsx b/web/src/beta/components/ListItem/index.tsx
index 457523017a..bee85c524e 100644
--- a/web/src/beta/components/ListItem/index.tsx
+++ b/web/src/beta/components/ListItem/index.tsx
@@ -88,7 +88,6 @@ const Wrapper = styled.div<{
 const Inner = styled.div`
   display: flex;
   align-items: center;
-  height: 100%;
   width: 100%;
   padding: 8px 4px 8px 4px;
   border-radius: 4px;
diff --git a/web/src/beta/components/fields/CameraField/index.tsx b/web/src/beta/components/fields/CameraField/index.tsx
index 950fb2fa5d..ec23567cbe 100644
--- a/web/src/beta/components/fields/CameraField/index.tsx
+++ b/web/src/beta/components/fields/CameraField/index.tsx
@@ -83,9 +83,9 @@ const CameraField: React.FC<Props> = ({
           <InputWrapper disabled={disabled}>
             <Input positionSet={!!value}>
               {value && <ZoomToIcon icon="zoomToLayer" size={10} onClick={handleFlyto} />}
-              <Text size="footnote" customColor>
+              <StyledText size="footnote" customColor>
                 {value ? t("Position Set") : t("Not set")}
-              </Text>
+              </StyledText>
               <DeleteIcon icon="bin" size={10} disabled={!value} onClick={handleRemoveSetting} />
             </Input>
             <TriggerButton
@@ -128,7 +128,7 @@ const CameraField: React.FC<Props> = ({
 const InputWrapper = styled.div<{ disabled?: boolean }>`
   display: flex;
   gap: 10px;
-  height: 28px;
+
   flex-wrap: wrap;
   opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
 `;
@@ -140,6 +140,7 @@ const Input = styled.div<{ positionSet?: boolean }>`
   gap: 4px;
   flex: 1;
   padding: 0 8px;
+  height: 28px;
   border-radius: 4px;
   border: 1px solid ${({ theme }) => theme.outline.weak};
   color: ${({ theme }) => theme.content.main};
@@ -149,7 +150,12 @@ const Input = styled.div<{ positionSet?: boolean }>`
   color: ${({ theme, positionSet }) => (positionSet ? theme.content.main : theme.content.weak)};
 `;
 
+const StyledText = styled(Text)`
+  white-space: nowrap;
+`;
+
 const TriggerButton = styled(Button)`
+  height: 28px;
   margin: 0;
 `;
 
diff --git a/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/LayerItem.tsx b/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/LayerItem.tsx
index a3f304bd33..8708921386 100644
--- a/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/LayerItem.tsx
+++ b/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/LayerItem.tsx
@@ -103,7 +103,7 @@ const LayerItem = ({
           ]}
         />
       }>
-      <ContentWrapper>
+      <>
         {isEditing ? (
           <StyledTextInput
             value={newValue}
@@ -113,34 +113,25 @@ const LayerItem = ({
             onBlur={handleEditExit}
           />
         ) : (
-          <LayerTitle onDoubleClick={handleDoubleClick}>{layerTitle}</LayerTitle>
+          <TitleText size="footnote" onDoubleClick={handleDoubleClick}>
+            {layerTitle}
+          </TitleText>
         )}
         <HideLayer onClick={handleUpdateVisibility}>
           <Text size="footnote">{value}</Text>
         </HideLayer>
-      </ContentWrapper>
+      </>
     </ListItem>
   );
 };
 
 export default LayerItem;
 
-const LayerTitle = styled.div`
-  overflow: hidden;
-  color: ${({ theme }) => theme.content.main};
-  text-overflow: ellipsis;
-  font-family: Noto Sans;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-`;
-
-const ContentWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
+const TitleText = styled(Text)`
+  flex: 1;
+  word-break: break-all;
+  text-align: left;
+  padding-right: 10px;
 `;
 
 const HideLayer = styled.div`
diff --git a/web/src/services/api/pluginsApi.ts b/web/src/services/api/pluginsApi.ts
index 6ee1374ced..9ea64aa928 100644
--- a/web/src/services/api/pluginsApi.ts
+++ b/web/src/services/api/pluginsApi.ts
@@ -94,10 +94,10 @@ export default () => {
   );
 
   const [installPluginMutation] = useMutation(INSTALL_PLUGIN, {
-    refetchQueries: ["GET_SCENE"],
+    refetchQueries: ["GetScene"],
   });
   const [upgradePluginMutation] = useMutation(UPGRADE_PLUGIN, {
-    refetchQueries: ["GET_SCENE"],
+    refetchQueries: ["GetScene"],
   });
 
   const useInstallPlugin = useCallback(
@@ -151,7 +151,7 @@ export default () => {
   );
 
   const [uploadPluginMutation] = useMutation(UPLOAD_PLUGIN, {
-    refetchQueries: ["GET_SCENE"],
+    refetchQueries: ["GetScene"],
   });
 
   const useUploadPlugin = useCallback(
@@ -188,7 +188,7 @@ export default () => {
   );
 
   const [uninstallPluginMutation] = useMutation(UNINSTALL_PLUGIN, {
-    refetchQueries: ["GET_SCENE"],
+    refetchQueries: ["GetScene"],
   });
 
   const useUninstallPlugin = useCallback(