feat: update notebook slack alert with dropdown color selector (#3823)

* chore: update clockface version

* feat: replace ColorPicker with CreatableTypeAheadDropdown for slack message color

* chore: fix clockface classname in cypress test

Author: appletreeisyellow

cypress/e2e/shared/labels.test.ts

@@ -90,7 +90,7 @@ describe('labels', () => {
     cy.getByTestID('color-picker--input')
       .parent()
       .parent()
-      .children('div.cf-color-picker--selected')
+      .children('div.cf-color-preview')
       .invoke('attr', 'style')
       .should('equal', 'background-color: rgb(255, 210, 85);')
 
@@ -116,7 +116,7 @@ describe('labels', () => {
         cy.getByTestID('color-picker--input')
           .parent()
           .parent()
-          .children('div.cf-color-picker--selected')
+          .children('div.cf-color-preview')
           .invoke('attr', 'style')
           .should('equal', hex2BgColor(hex))
       })
@@ -127,7 +127,7 @@ describe('labels', () => {
     cy.getByTestID('color-picker--input')
       .parent()
       .parent()
-      .children('div.cf-color-picker--selected')
+      .children('div.cf-color-preview')
       .invoke('attr', 'style')
       .should('equal', hex2BgColor(newLabelColor))
 

package.json

@@ -156,7 +156,7 @@
   },
   "dependencies": {
     "@docsearch/react": "^3.0.0-alpha.37",
-    "@influxdata/clockface": "^3.1.14",
+    "@influxdata/clockface": "^3.2.1",
     "@influxdata/flux-lsp-browser": "^0.8.0",
     "@influxdata/giraffe": "^2.24.1",
     "@influxdata/influxdb-templates": "0.9.0",

src/flows/pipes/Notification/endpoints/Slack/view.tsx

@@ -1,6 +1,8 @@
 import React, {FC, useContext} from 'react'
 import {
-  ColorPicker,
+  ColorPreview,
+  CreatableTypeAheadDropdown,
+  FlexBox,
   Form,
   Input,
   InputType,
@@ -10,6 +12,11 @@ import {
 import {PipeContext} from 'src/flows/context/pipe'
 import {EndpointProps} from 'src/types'
 
+/** The hex colors are suggested from here
+ *  https://github.com/influxdata/ui/issues/2572
+ */
+const suggestedColors = ['#DC4E58', '#FFB94A', '#2FA74D', '#0098F0', '#8E1FC3']
+
 const View: FC<EndpointProps> = () => {
   const {data, update} = useContext(PipeContext)
 
@@ -64,7 +71,21 @@ const View: FC<EndpointProps> = () => {
         />
       </Form.Element>
       <Form.Element label="Message Color">
-        <ColorPicker color={data.endpointData.color} onChange={updateColor} />
+        <CreatableTypeAheadDropdown
+          selectedOption={data.endpointData.color}
+          onSelect={updateColor}
+          options={suggestedColors}
+          placeholder="#000000"
+          inputColorPreviewOn={true}
+          customizedDropdownItem={displayText => (
+            <FlexBox>
+              <ColorPreview color={displayText} />
+              <div className="slack-message-color--dropdown-item">
+                {displayText}
+              </div>
+            </FlexBox>
+          )}
+        />
       </Form.Element>
     </div>
   )

src/flows/pipes/Notification/styles.scss

@@ -21,10 +21,6 @@
     margin-right: 0px;
   }
 
-  .cf-color-picker--selected {
-    top: 19px;
-  }
-
   .cf-color-picker--form .cf-input-field {
     height: 38px;
     font-size: 14px;
@@ -55,3 +51,7 @@
   flex: 1;
   max-width: 14%;
 }
+
+.slack-message-color--dropdown-item {
+  padding-left: 26px;
+}

yarn.lock

@@ -1187,10 +1187,10 @@
     gud "^1.0.0"
     warning "^4.0.3"
 
-"@influxdata/clockface@^3.1.14":
-  version "3.1.14"
-  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-3.1.14.tgz#835ed0f66a97c10c7b1977abc3adc292c26a502e"
-  integrity sha512-ESpTIZh87r3zVy5kb4aST0CQHjiZBZX1JlrsDjbOk6FGJwGyZz+n74KqnPQmMt+EKKDO70vOH3OJf1I8qE9X5Q==
+"@influxdata/clockface@^3.2.1":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-3.2.1.tgz#e31ef829a910564e1108ef6e92a1255ab3b41513"
+  integrity sha512-RGqwnfTa2QDu9dEDJcKLsH8RaYtJtzFqy+FaAziQ5IcYZk+j8+BjKowrLfwxfwsp3DjhMnn8fCQgWaiCoK/RrQ==
 
 "@influxdata/flux-lsp-browser@^0.8.0":
   version "0.8.0"