chore: update changelog link and remove obsolete changelog components (#2918)

apps/storybook/src/stories/change-log.stories.tsx

@@ -1,47 +0,0 @@
-import { ChangeLog } from '@affine/component/changeLog';
-import type { StoryFn } from '@storybook/react';
-import { within } from '@storybook/testing-library';
-import { useState } from 'react';
-
-export default {
-  title: 'AFFiNE/ChangeLog',
-  component: ChangeLog,
-};
-
-export const Default: StoryFn = () => (
-  <div
-    style={{
-      width: '256px',
-      height: '100vh',
-    }}
-  >
-    <ChangeLog onCloseWhatsNew={() => {}} />
-  </div>
-);
-
-export const Close: StoryFn = () => {
-  const [closed, setIsClosed] = useState(false);
-  return (
-    <>
-      <div>Closed: {closed ? 'true' : 'false'}</div>
-      <div
-        style={{
-          width: '256px',
-          height: '100vh',
-        }}
-      >
-        <ChangeLog
-          onCloseWhatsNew={() => {
-            setIsClosed(true);
-          }}
-        />
-      </div>
-    </>
-  );
-};
-
-Close.play = async ({ canvasElement }) => {
-  const element = within(canvasElement);
-  await new Promise(resolve => setTimeout(resolve, 2000));
-  element.getByTestId('change-log-close-button').click();
-};

apps/web/preset.config.mjs

@@ -25,7 +25,7 @@ const buildPreset = {
     enableBroadcastChannelProvider: true,
     enableDebugPage: true,
     enableLegacyCloud: false,
-    changelogUrl: 'https://affine.pro/blog/what-is-new-affine-0620',
+    changelogUrl: 'https://affine.pro/blog/whats-new-affine-0630',
     enablePreloading: true,
     enableNewSettingModal: false,
     enableNewSettingUnstableApi: false,
@@ -41,7 +41,7 @@ const buildPreset = {
     enableBroadcastChannelProvider: true,
     enableDebugPage: true,
     enableLegacyCloud: false,
-    changelogUrl: 'https://github.com/toeverything/AFFiNE/releases',
+    changelogUrl: 'https://affine.pro/blog/whats-new-affine-0630',
     enablePreloading: true,
     enableNewSettingModal: true,
     enableNewSettingUnstableApi: false,

apps/web/src/components/affine/setting-modal/general-setting/about/index.tsx

@@ -56,7 +56,7 @@ export const AboutAffine = () => {
             style={{ cursor: 'pointer' }}
             onClick={() => {
               window.open(
-                'https://github.com/toeverything/AFFiNE/releases',
+                'https://affine.pro/blog/whats-new-affine-0630',
                 '_blank'
               );
             }}

apps/web/src/components/pure/workspace-slider-bar/changeLog/index.tsx

@@ -1,18 +0,0 @@
-import ChangeLogComponent from '@affine/component/changeLog';
-import { useAtom } from 'jotai';
-import { useCallback } from 'react';
-
-import { guideChangeLogAtom } from '../../../../atoms/guide';
-
-export const ChangeLog = () => {
-  const [showChangeLogTips, setShowChangeLogTips] = useAtom(guideChangeLogAtom);
-  const onCloseWhatsNew = useCallback(() => {
-    setShowChangeLogTips(false);
-  }, [setShowChangeLogTips]);
-  if (!showChangeLogTips) {
-    return <></>;
-  }
-  return <ChangeLogComponent onCloseWhatsNew={onCloseWhatsNew} />;
-};
-
-export default ChangeLog;

packages/component/src/components/changeLog/index.css.ts

@@ -1,114 +0,0 @@
-import { keyframes, style } from '@vanilla-extract/css';
-
-const slideIn = keyframes({
-  '0%': {
-    height: '0px',
-  },
-  '50%': {
-    height: '36px',
-  },
-  '100%': {
-    height: '32px',
-  },
-});
-const slideIn2 = keyframes({
-  '0%': {
-    transform: 'translateX(100%)',
-  },
-  '50%': {
-    transform: 'translateX(100%)',
-  },
-  '80%': {
-    transform: 'translateX(-10%)',
-  },
-  '100%': {
-    transform: 'translateX(0%)',
-  },
-});
-
-const slideOut = keyframes({
-  '0%': {
-    height: '32px',
-  },
-  '60%': {
-    height: '32px',
-  },
-  '80%': {
-    height: '32px',
-  },
-  '100%': {
-    height: '0px',
-  },
-});
-const slideOut2 = keyframes({
-  '0%': {
-    transform: 'translateX(0%)',
-  },
-  '100%': {
-    transform: 'translateX(100%)',
-  },
-});
-
-export const changeLogWrapperSlideInStyle = style({
-  width: 'calc(100% + 4px)',
-  flexShrink: 0,
-  animation: `${slideIn} 1s ease-in-out forwards`,
-  display: 'flex',
-  justifyContent: 'flex-start',
-  alignItems: 'center',
-  marginBottom: '4px',
-  position: 'relative',
-  userSelect: 'none',
-  transition: 'all 0.3s',
-  overflow: 'hidden',
-});
-export const changeLogWrapperSlideOutStyle = style({
-  animation: `${slideOut} .3s ease-in-out forwards`,
-});
-export const changeLogSlideInStyle = style({
-  // fixme: if width is 100% and marginLeft is 0,
-  //  the UI will overflow on app sidebar
-  width: '99%',
-  height: '32px',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  color: 'var(--affine-primary-color)',
-  backgroundColor: 'var(--affine-tertiary-color)',
-  border: '1px solid var(--affine-primary-color)',
-  borderRight: 'none',
-  paddingLeft: '14px',
-  borderRadius: '16px 0 0 16px',
-  cursor: 'pointer',
-  zIndex: 1001,
-  position: 'absolute',
-  userSelect: 'none',
-  transition: 'all 0.3s',
-  animation: `${slideIn2} 1s ease-in-out forwards`,
-});
-export const changeLogSlideOutStyle = style({
-  animation: `${slideOut2} .3s ease-in-out forwards`,
-});
-export const linkStyle = style({
-  textAlign: 'left',
-  color: 'var(--affine-text-emphasis-color)',
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'flex-start',
-  alignItems: 'center',
-  maxWidth: 'calc(100% - 32px)',
-});
-export const linkTextStyle = style({
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-});
-export const iconStyle = style({
-  fontSize: '20px',
-  marginRight: '12px',
-});
-export const iconButtonStyle = style({
-  fontSize: '20px',
-  marginRight: '0',
-  color: 'var(--affine-icon-color)',
-});

packages/component/src/components/changeLog/index.tsx

@@ -1,67 +0,0 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { CloseIcon, NewIcon } from '@blocksuite/icons';
-import clsx from 'clsx';
-import { useState } from 'react';
-
-import { IconButton } from '../..';
-import {
-  changeLogSlideInStyle,
-  changeLogSlideOutStyle,
-  changeLogWrapperSlideInStyle,
-  changeLogWrapperSlideOutStyle,
-  iconButtonStyle,
-  iconStyle,
-  linkStyle,
-  linkTextStyle,
-} from './index.css';
-
-type ChangeLogProps = {
-  onCloseWhatsNew: () => void;
-};
-export const ChangeLog = (props: ChangeLogProps) => {
-  const { onCloseWhatsNew } = props;
-  const [isClose, setIsClose] = useState(false);
-  const t = useAFFiNEI18N();
-  const handleClose = () => {
-    setIsClose(true);
-    onCloseWhatsNew();
-  };
-  return (
-    <div
-      className={clsx(changeLogWrapperSlideInStyle, {
-        [changeLogWrapperSlideOutStyle]: isClose,
-      })}
-    >
-      <div
-        data-testid="change-log"
-        className={clsx(changeLogSlideInStyle, {
-          [changeLogSlideOutStyle]: isClose,
-        })}
-      >
-        <div
-          className={linkStyle}
-          onClick={() => {
-            window.open(
-              'https://github.com/toeverything/AFFiNE/releases',
-              '_blank'
-            );
-          }}
-        >
-          <NewIcon className={iconStyle} />
-          <div className={linkTextStyle}>{t["Discover what's new!"]()}</div>
-        </div>
-        <IconButton
-          className={iconButtonStyle}
-          onClick={() => {
-            handleClose();
-          }}
-          data-testid="change-log-close-button"
-        >
-          <CloseIcon />
-        </IconButton>
-      </div>
-    </div>
-  );
-};
-
-export default ChangeLog;