From 118165bf72c7753aa719a72d020a8dbee18e574d Mon Sep 17 00:00:00 2001
From: "Sarvesh Kumar.A" <122361969+Sarvesh521@users.noreply.github.com>
Date: Sun, 27 Aug 2023 01:56:48 +0530
Subject: [PATCH] fix(electron): set client border style to false by default on
 windows (#3960)

Co-authored-by: Alex Yang <himself65@outlook.com>
---
 .github/CLA.md                                     |  1 +
 apps/core/src/atoms/settings.ts                    |  3 +--
 .../delete-leave-workspace/index.tsx               |  2 +-
 .../general-setting/appearance/index.tsx           |  2 ++
 apps/electron/e2e/basic.spec.ts                    | 14 ++++++++++++++
 .../components/setting-components/setting-row.tsx  | 10 +++++-----
 packages/component/src/ui/switch/switch.tsx        |  1 +
 7 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/.github/CLA.md b/.github/CLA.md
index 487cd6d684..b24d80a8e6 100644
--- a/.github/CLA.md
+++ b/.github/CLA.md
@@ -60,3 +60,4 @@ Example:
 - Moeyua, @moeyua, 2023/04/22
 - Shishu, @shishudesu, 2023/05/19
 - Kushagra Singh, @kush002, 2023/06/28
+- Sarvesh Kumar, @sarvesh521 2023/08/25
diff --git a/apps/core/src/atoms/settings.ts b/apps/core/src/atoms/settings.ts
index 84b4ffacef..7f0ed6f5cc 100644
--- a/apps/core/src/atoms/settings.ts
+++ b/apps/core/src/atoms/settings.ts
@@ -1,4 +1,3 @@
-import { isDesktop } from '@affine/env/constant';
 import { atom, useAtom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
 
@@ -50,7 +49,7 @@ export const fontStyleOptions = [
 }[];
 
 const appSettingBaseAtom = atomWithStorage<AppSetting>('affine-settings', {
-  clientBorder: isDesktop,
+  clientBorder: globalThis.platform !== 'win32',
   fullWidthLayout: false,
   windowFrameStyle: 'frameless',
   fontStyle: 'Sans',
diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/index.tsx b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/index.tsx
index 2bf0a5cbee..f94beb8f01 100644
--- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/index.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/index.tsx
@@ -39,7 +39,7 @@ export const DeleteLeaveWorkspace = ({
         onClick={() => {
           setShowDelete(true);
         }}
-        testId="delete-workspace-button"
+        data-testid="delete-workspace-button"
       >
         <ArrowRightSmallIcon />
       </SettingRow>
diff --git a/apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx b/apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
index 6349b9d1a5..81d8727aca 100644
--- a/apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
@@ -81,6 +81,7 @@ export const AppearanceSettings = () => {
   const t = useAFFiNEI18N();
 
   const [appSettings, setAppSettings] = useAppSetting();
+
   const changeSwitch = useCallback(
     (key: keyof AppSetting, checked: boolean) => {
       setAppSettings({ [key]: checked });
@@ -131,6 +132,7 @@ export const AppearanceSettings = () => {
             desc={t[
               'com.affine.settings.appearance.border-style-description'
             ]()}
+            data-testid="client-border-style-trigger"
           >
             <Switch
               checked={appSettings.clientBorder}
diff --git a/apps/electron/e2e/basic.spec.ts b/apps/electron/e2e/basic.spec.ts
index b6cb233e17..a0ef8d9869 100644
--- a/apps/electron/e2e/basic.spec.ts
+++ b/apps/electron/e2e/basic.spec.ts
@@ -1,5 +1,6 @@
 import { platform } from 'node:os';
 
+import { clickSideBarSettingButton } from '@affine-test/kit/utils/sidebar';
 import { expect } from '@playwright/test';
 
 import { test } from './fixture';
@@ -80,6 +81,19 @@ if (platform() === 'darwin') {
   });
 }
 
+test('clientBorder value should disable by default on window', async ({
+  page,
+}) => {
+  await clickSideBarSettingButton(page);
+  await page.waitForTimeout(1000);
+  const settingItem = page.locator(
+    '[data-testid="client-border-style-trigger"]'
+  );
+  expect(await settingItem.locator('input').inputValue()).toEqual(
+    process.platform === 'win32' ? 'off' : 'on'
+  );
+});
+
 test('app theme', async ({ page, electronApp }) => {
   const root = page.locator('html');
   {
diff --git a/packages/component/src/components/setting-components/setting-row.tsx b/packages/component/src/components/setting-components/setting-row.tsx
index 881681bd97..33297d962a 100644
--- a/packages/component/src/components/setting-components/setting-row.tsx
+++ b/packages/component/src/components/setting-components/setting-row.tsx
@@ -3,14 +3,14 @@ import type { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 
 import { settingRow } from './share.css';
 
-interface SettingRowProps {
+type SettingRowProps = {
   name: ReactNode;
   desc: ReactNode;
   style?: CSSProperties;
   onClick?: () => void;
   spreadCol?: boolean;
-  testId?: string;
-}
+  'data-testid'?: string;
+};
 
 export const SettingRow = ({
   name,
@@ -19,7 +19,7 @@ export const SettingRow = ({
   onClick,
   style,
   spreadCol = true,
-  testId = '',
+  ...props
 }: PropsWithChildren<SettingRowProps>) => {
   return (
     <div
@@ -28,7 +28,7 @@ export const SettingRow = ({
       })}
       style={style}
       onClick={onClick}
-      data-testid={testId}
+      data-testid={props['data-testid']}
     >
       <div className="left-col">
         <div className="name">{name}</div>
diff --git a/packages/component/src/ui/switch/switch.tsx b/packages/component/src/ui/switch/switch.tsx
index a6be83833e..344de98b78 100644
--- a/packages/component/src/ui/switch/switch.tsx
+++ b/packages/component/src/ui/switch/switch.tsx
@@ -26,6 +26,7 @@ export const Switch = (props: SwitchProps) => {
       <input
         className={clsx(styles.inputStyle)}
         type="checkbox"
+        value={isChecked ? 'on' : 'off'}
         checked={isChecked}
         onChange={handleChange}
       />