feat(dashboard): initial scaffolding for input widget (#566)

awslabs · Feb 13, 2023 · e6bbb46 · e6bbb46
1 parent d8bfb2a
commit e6bbb46
Show file tree

Hide file tree

Showing 11 changed files with 76 additions and 3 deletions.
diff --git a/packages/dashboard/src/components/palette/icons/index.tsx b/packages/dashboard/src/components/palette/icons/index.tsx
@@ -12,6 +12,7 @@ import { TimelineComponent } from './timeline-component';
 
 import './index.css';
 import TextComponent from './text-component';
+import InputComponent from './input-component';
 
 const IconMap: { [key in ComponentTag]: React.FC } = {
   'iot-bar-chart': BarComponent,
@@ -22,6 +23,7 @@ const IconMap: { [key in ComponentTag]: React.FC } = {
   'iot-table': TableComponent,
   'iot-status-timeline': TimelineComponent,
   text: TextComponent,
+  input: InputComponent,
 };
 
 type PaletteComponentIconProps = {

diff --git a/packages/dashboard/src/components/palette/icons/input-component.tsx b/packages/dashboard/src/components/palette/icons/input-component.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const InputComponent: React.FC = () => <div>input</div>;
+
+export default InputComponent;
diff --git a/packages/dashboard/src/components/palette/index.tsx b/packages/dashboard/src/components/palette/index.tsx
@@ -21,6 +21,7 @@ export const ComponentPaletteOrdering: [
   ['status', 'iot-status-grid'],
   ['table', 'iot-table'],
   ['text', 'text'],
+  ['input', 'input'],
 ];
 
 const Palette: React.FC<ComponentPaletteProps> = ({ messageOverrides }) => {

diff --git a/packages/dashboard/src/components/widgets/componentMap.ts b/packages/dashboard/src/components/widgets/componentMap.ts
@@ -8,12 +8,14 @@ import {
   Table,
 } from '@iot-app-kit/react-components';
 import TextWidget from './primitives/text';
+import InputWidget from './primitives/input';
 
 import { ComponentTag } from '../../types';
 
 // eslint-disable-next-line
 export const ComponentMap: { [key in ComponentTag]: any } = {
   text: TextWidget,
+  input: InputWidget,
   'iot-bar-chart': BarChart,
   'iot-kpi': Kpi,
   'iot-line-chart': LineChart,

diff --git a/packages/dashboard/src/components/widgets/dynamicWidget.tsx b/packages/dashboard/src/components/widgets/dynamicWidget.tsx
@@ -53,7 +53,7 @@ const DynamicWidgetComponent: React.FC<DynamicWidgetProps> = ({
   isSelected,
   widgetsMessages,
 }) => {
-  const { invalidTagHeader, invalidTagSubheader, text } = widgetsMessages;
+  const { invalidTagHeader, invalidTagSubheader, text, input } = widgetsMessages;
 
   const componentTag = widget.componentTag;
   const Component = ComponentMap[componentTag];
@@ -70,6 +70,10 @@ const DynamicWidgetComponent: React.FC<DynamicWidgetProps> = ({
     componentSpecificProps = {
       messageOverrides: text,
     };
+  } else if (componentTag === 'input') {
+    componentSpecificProps = {
+      messageOverrides: input,
+    };
   }
 
   const props = {

diff --git a/packages/dashboard/src/components/widgets/primitives/input/index.tsx b/packages/dashboard/src/components/widgets/primitives/input/index.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { Button, Select, SelectProps } from '@cloudscape-design/components';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+import { InputWidget as InputWidgetType } from '../../../../types';
+
+export type InputWidgetProps = InputWidgetType & { readOnly: boolean };
+
+const Input: React.FC<InputWidgetProps> = ({ readOnly, ...widget }) => {
+  const [selectedOption, setSelectedOption] = useState<SelectProps.Option>(widget.options[0]);
+
+  return (
+    <SpaceBetween size={'xs'} direction={'horizontal'}>
+      <Select
+        disabled={!readOnly}
+        selectedOption={selectedOption}
+        onChange={({ detail }) => setSelectedOption(detail.selectedOption)}
+        options={widget.options}
+      />
+      <Button disabled={!readOnly}>{widget.messageOverrides?.submitLabel}</Button>
+    </SpaceBetween>
+  );
+};
+
+export default Input;
diff --git a/packages/dashboard/src/messages.ts b/packages/dashboard/src/messages.ts
@@ -31,10 +31,15 @@ export type TextWidgetMessages = {
   editLinkLabel: string;
 };
 
+export type InputWidgetMessages = {
+  submitLabel: string;
+};
+
 export type WidgetsMessages = {
   invalidTagHeader: string;
   invalidTagSubheader: string;
   text: TextWidgetMessages;
+  input: InputWidgetMessages;
 };
 
 export type ToolbarMessages = {
@@ -49,6 +54,7 @@ export type ToolbarMessages = {
       status: string;
       table: string;
       text: string;
+      input: string;
     };
   };
   actions: {
@@ -154,6 +160,7 @@ export const DefaultDashboardMessages: DashboardMessages = {
         status: 'Status',
         table: 'Table',
         text: 'Text',
+        input: 'Input',
       },
     },
     actions: {
@@ -171,6 +178,9 @@ export const DefaultDashboardMessages: DashboardMessages = {
       editTextLabel: 'Text',
       editLinkLabel: 'Link',
     },
+    input: {
+      submitLabel: 'Send',
+    },
   },
   contextMenu: {
     copyText: 'Copy',

diff --git a/packages/dashboard/src/store/actions/createWidget/presets/index.ts b/packages/dashboard/src/store/actions/createWidget/presets/index.ts
@@ -4,6 +4,7 @@ import { DashboardState } from '../../../state';
 import { appKitWidgetCreator } from './appKit';
 import { WidgetSizePresets } from './sizing';
 import { textWidgetCreator } from './text';
+import { inputWidgetCreator } from './input';
 
 const BASE_POSITION = {
   x: 0,
@@ -30,6 +31,8 @@ export const widgetCreator =
       return appKitWidgetCreator(componentTag as AppKitComponentTag, preset);
     } else if (componentTag === 'text') {
       return textWidgetCreator(componentTag, preset);
+    } else if (componentTag === 'input') {
+      return inputWidgetCreator(componentTag, preset);
     }
 
     return preset;

diff --git a/packages/dashboard/src/store/actions/createWidget/presets/input.tsx b/packages/dashboard/src/store/actions/createWidget/presets/input.tsx
@@ -0,0 +1,7 @@
+import { InputWidget, Widget } from '../../../../types';
+
+export const inputWidgetCreator = (componentTag: 'input', preset: Widget): InputWidget => ({
+  ...preset,
+  componentTag,
+  options: [],
+});
diff --git a/packages/dashboard/src/store/actions/createWidget/presets/sizing.ts b/packages/dashboard/src/store/actions/createWidget/presets/sizing.ts
@@ -37,4 +37,8 @@ export const WidgetSizePresets: { [key in ComponentTag]: Pick<Widget, 'width' |
     height: 170,
     width: 270,
   },
+  input: {
+    height: 50,
+    width: 270,
+  },
 };
diff --git a/packages/dashboard/src/types.ts b/packages/dashboard/src/types.ts
@@ -14,7 +14,7 @@ import {
   Trend,
 } from '@synchro-charts/core';
 
-import { TextWidgetMessages } from './messages';
+import { TextWidgetMessages, InputWidgetMessages } from './messages';
 import { AssetQuery, StyleSettingsMap } from '@iot-app-kit/core';
 
 export const AppKitComponentTags = [
@@ -28,7 +28,7 @@ export const AppKitComponentTags = [
 ] as const;
 export type AppKitComponentTag = typeof AppKitComponentTags[number];
 
-export const PrimitiveComponentTags = <const>['text'];
+export const PrimitiveComponentTags = <const>['text', 'input'];
 export type PrimitiveComponentTag = typeof PrimitiveComponentTags[number];
 
 export type ComponentTag = AppKitComponentTag | PrimitiveComponentTag;
@@ -80,6 +80,17 @@ export type TextWidget = Widget & {
   link?: string;
 };
 
+export type InputWidgetOption = {
+  label: string;
+  id: string;
+};
+
+export type InputWidget = Widget & {
+  componentTag: 'input';
+  options: InputWidgetOption[];
+  messageOverrides?: InputWidgetMessages;
+};
+
 export type PrimitiveWidget = TextWidget;
 
 export type DashboardConfiguration = {