fix(dashboard): editable link

awslabs · Jun 6, 2023 · 1675de6 · 1675de6
1 parent 64e33fa
commit 1675de6
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 260 deletions.
diff --git a/packages/dashboard/src/components/sidePanel/sections/textSettingSection/link.tsx b/packages/dashboard/src/components/sidePanel/sections/textSettingSection/link.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExpandableSection, Input, Toggle } from '@cloudscape-design/components';
+import { ExpandableSection, Input, SpaceBetween, Toggle } from '@cloudscape-design/components';
 import { useWidgetLense } from '../../utils/useWidgetLense';
 import './index.css';
 import type { FC } from 'react';
@@ -42,18 +42,20 @@ const LinkSettings: FC<TextWidget> = (widget) => {
 
   const header = (
     <div className='expandable-section-header'>
-      <span>{defaultMessages.title}</span>
-      <div onClick={(e) => e.stopPropagation()}>
-        <Toggle
-          checked={isLink}
-          onChange={({ detail }) => {
-            toggleIsLink(detail.checked);
-          }}
-          data-test-id='text-widget-create-link-toggle'
-        >
-          {defaultMessages.toggle}
-        </Toggle>
-      </div>
+      <SpaceBetween size='m' direction='horizontal'>
+        <span>{defaultMessages.title}</span>
+        <div onClick={(e) => e.stopPropagation()}>
+          <Toggle
+            checked={isLink}
+            onChange={({ detail }) => {
+              toggleIsLink(detail.checked);
+            }}
+            data-test-id='text-widget-create-link-toggle'
+          >
+            {defaultMessages.toggle}
+          </Toggle>
+        </div>
+      </SpaceBetween>
     </div>
   );
 
@@ -62,7 +64,7 @@ const LinkSettings: FC<TextWidget> = (widget) => {
   };
 
   return (
-    <ExpandableSection headerText={header} defaultExpanded={isLink} data-test-id='text-widget-link-section'>
+    <ExpandableSection headerText={header} defaultExpanded data-test-id='text-widget-link-section'>
       <div className='link-configuration' style={{ gap: awsui.spaceScaledS }}>
         <label className='section-item-label'>{defaultMessages.url}</label>
         <div className='link-input'>

diff --git a/packages/dashboard/src/components/sidePanel/shared/expandableSectionHeader.tsx b/packages/dashboard/src/components/sidePanel/shared/expandableSectionHeader.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { Icon, IconProps, SpaceBetween } from '@cloudscape-design/components';
+import { Icon, SpaceBetween } from '@cloudscape-design/components';
 import './styles.css';
 import type { FC, MouseEventHandler, PropsWithChildren } from 'react';
+import type { IconProps } from '@cloudscape-design/components';
 
 type ExpandableSectionHeaderProps = {
   variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5';

diff --git a/packages/dashboard/src/customization/widgets/text/__snapshots__/component.test.tsx.snap b/packages/dashboard/src/customization/widgets/text/__snapshots__/component.test.tsx.snap
@@ -13,9 +13,9 @@ exports[`Text Widget should render {"readOnly":false,"isSelected":false,"isUrl":
 exports[`Text Widget should render {"readOnly":false,"isSelected":false,"isUrl":true} correctly 1`] = `
 <div>
   <div
-    data-mocked="EditableTextLink"
+    data-mocked="StyledTextArea"
   >
-    {"readOnly":false,"isSelected":false,"id":"some-id","x":1,"y":2,"z":3,"height":100,"width":100,"type":"text-widget","properties":{"isUrl":true,"value":"abc"}}
+    {"isUrl":true,"readOnly":false,"isSelected":false,"id":"some-id","x":1,"y":2,"z":3,"height":100,"width":100,"type":"text-widget","properties":{"isUrl":true,"value":"abc"}}
   </div>
 </div>
 `;
@@ -33,9 +33,9 @@ exports[`Text Widget should render {"readOnly":false,"isSelected":true,"isUrl":f
 exports[`Text Widget should render {"readOnly":false,"isSelected":true,"isUrl":true} correctly 1`] = `
 <div>
   <div
-    data-mocked="EditableTextLink"
+    data-mocked="StyledTextArea"
   >
-    {"readOnly":false,"isSelected":true,"id":"some-id","x":1,"y":2,"z":3,"height":100,"width":100,"type":"text-widget","properties":{"isUrl":true,"value":"abc"}}
+    {"isUrl":true,"readOnly":false,"isSelected":true,"id":"some-id","x":1,"y":2,"z":3,"height":100,"width":100,"type":"text-widget","properties":{"isUrl":true,"value":"abc"}}
   </div>
 </div>
 `;

diff --git a/packages/dashboard/src/customization/widgets/text/component.test.tsx b/packages/dashboard/src/customization/widgets/text/component.test.tsx
@@ -22,9 +22,6 @@ jest.mock('~/customization/hooks/useIsSelected', () => ({
 }));
 
 jest.mock('./link', () => (props: unknown) => <div data-mocked='TextLink'>{JSON.stringify(props)}</div>);
-jest.mock('./link/editableLink', () => (props: unknown) => (
-  <div data-mocked='EditableTextLink'>{JSON.stringify(props)}</div>
-));
 jest.mock('./styledText/textArea', () => (props: unknown) => (
   <div data-mocked='StyledTextArea'>{JSON.stringify(props)}</div>
 ));

diff --git a/packages/dashboard/src/customization/widgets/text/component.tsx b/packages/dashboard/src/customization/widgets/text/component.tsx
@@ -7,7 +7,6 @@ import EditableStyledText from './styledText/editableText';
 import StyledTextArea from './styledText/textArea';
 
 import TextLink from './link';
-import EditableTextLink from './link/editableLink';
 import { useIsSelected } from '~/customization/hooks/useIsSelected';
 
 import './component.css';
@@ -52,7 +51,7 @@ const TextWidgetComponent: React.FC<TextWidget> = (widget) => {
     }
   } else {
     if (isUrl) {
-      return <EditableTextLink {...props} />;
+      return <StyledTextArea isUrl {...props} />;
     } else if (isEditing) {
       return <StyledTextArea {...props} />;
     } else {

diff --git a/packages/dashboard/src/customization/widgets/text/link/editableLink.css b/packages/dashboard/src/customization/widgets/text/link/editableLink.css
diff --git a/packages/dashboard/src/customization/widgets/text/link/editableLink.tsx b/packages/dashboard/src/customization/widgets/text/link/editableLink.tsx
diff --git a/packages/dashboard/src/customization/widgets/text/styledText/textArea.tsx b/packages/dashboard/src/customization/widgets/text/styledText/textArea.tsx
@@ -7,12 +7,14 @@ import { defaultFontSettings } from './defaultFontSettings';
 
 import './textArea.css';
 import type { TextWidget } from '../../types';
+import { colorTextLinkDefault } from '@cloudscape-design/design-tokens';
 
 type StyledTextAreaProps = TextWidget & {
   handleSetEdit: (isEditing: boolean) => void;
+  isUrl?: boolean;
 };
 
-const StyledTextArea: React.FC<StyledTextAreaProps> = ({ handleSetEdit, ...widget }) => {
+const StyledTextArea: React.FC<StyledTextAreaProps> = ({ handleSetEdit, isUrl, ...widget }) => {
   const { update } = useWidgetActions();
 
   const { value } = widget.properties;
@@ -27,7 +29,7 @@ const StyledTextArea: React.FC<StyledTextAreaProps> = ({ handleSetEdit, ...widge
 
   const style: CSSProperties = {
     fontSize,
-    color: fontColor,
+    color: isUrl ? colorTextLinkDefault : fontColor,
   };
 
   const handleSetText = (text: string) => {