fix(electron): set client border style to false by default on windows (#3960)

Co-authored-by: Alex Yang <himself65@outlook.com>

.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

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',

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>

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}

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');
   {

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>

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}
       />