Switch edit and view actions (#14915)

* Switch edit and view actions

* Fix test

ui/cypress/e2e/notificationEndpoints.test.ts

@@ -107,7 +107,7 @@ describe('Notification Endpoints', () => {
         'A minute, an hour, a month. Notification Endpoint is certain. The time is not.'
       const newURL = 'many-faced-god.gov'
 
-      cy.getByTestID('endpoint-card-edit').click({force: true})
+      cy.getByTestID(`endpoint-card--name ${name}`).click()
 
       cy.getByTestID('endpoint-name--input')
         .should('have.value', name)

ui/src/alerting/components/CheckCard.tsx

@@ -101,11 +101,11 @@ const CheckCard: FunctionComponent<Props> = ({
     }
   }
 
-  const onEdit = () => {
+  const onCheckClick = () => {
     router.push(`/orgs/${orgID}/alerting/checks/${check.id}/edit`)
   }
 
-  const onCheckClick = () => {
+  const onView = () => {
     const historyType: AlertHistoryType = 'statuses'
 
     const queryParams = new URLSearchParams({
@@ -170,7 +170,7 @@ const CheckCard: FunctionComponent<Props> = ({
       disabled={check.status === 'inactive'}
       contextMenu={
         <CheckCardContext
-          onEdit={onEdit}
+          onView={onView}
           onDelete={onDelete}
           onClone={onClone}
         />

ui/src/alerting/components/CheckCardContext.tsx

@@ -6,7 +6,7 @@ import {Context, IconFont} from 'src/clockface'
 import {ComponentColor} from '@influxdata/clockface'
 
 interface Props {
-  onEdit: () => void
+  onView: () => void
   onDelete: () => void
   onClone: () => void
 }
@@ -14,12 +14,12 @@ interface Props {
 const CheckCardContext: FunctionComponent<Props> = ({
   onDelete,
   onClone,
-  onEdit,
+  onView,
 }) => {
   return (
     <Context>
-      <Context.Menu icon={IconFont.CogThick}>
-        <Context.Item label="Edit" action={onEdit} />
+      <Context.Menu icon={IconFont.EyeOpen}>
+        <Context.Item label="View History" action={onView} />
       </Context.Menu>
       <Context.Menu icon={IconFont.Duplicate} color={ComponentColor.Secondary}>
         <Context.Item label="Clone" action={onClone} />

ui/src/alerting/components/endpoints/EndpointCard.tsx

@@ -84,15 +84,9 @@ const EndpointCard: FC<Props> = ({
     onUpdateEndpointProperties(id, {name})
   }
   const handleClick = () => {
-    const historyType: AlertHistoryType = 'notifications'
-
-    const queryParams = new URLSearchParams({
-      [HISTORY_TYPE_QUERY_PARAM]: historyType,
-      [SEARCH_QUERY_PARAM]: `"notificationEndpointID" == "${endpoint.id}"`,
-    })
-
-    router.push(`/orgs/${orgID}/alert-history?${queryParams}`)
+    router.push(`orgs/${orgID}/alerting/endpoints/${endpoint.id}/edit`)
   }
+
   const nameComponent = (
     <ResourceCard.EditableName
       key={id}
@@ -119,8 +113,15 @@ const EndpointCard: FC<Props> = ({
     />
   )
 
-  const handleEdit = () => {
-    router.push(`orgs/${orgID}/alerting/endpoints/${endpoint.id}/edit`)
+  const handleView = () => {
+    const historyType: AlertHistoryType = 'notifications'
+
+    const queryParams = new URLSearchParams({
+      [HISTORY_TYPE_QUERY_PARAM]: historyType,
+      [SEARCH_QUERY_PARAM]: `"notificationEndpointID" == "${endpoint.id}"`,
+    })
+
+    router.push(`/orgs/${orgID}/alert-history?${queryParams}`)
   }
   const handleDelete = () => {
     onDeleteEndpoint(id)
@@ -131,7 +132,7 @@ const EndpointCard: FC<Props> = ({
   const contextMenu = (
     <EndpointCardMenu
       onDelete={handleDelete}
-      onEdit={handleEdit}
+      onView={handleView}
       onClone={handleClone}
     />
   )

ui/src/alerting/components/endpoints/EndpointCardMenu.tsx

@@ -8,16 +8,16 @@ import {ComponentColor} from '@influxdata/clockface'
 interface Props {
   onDelete: () => void
   onClone: () => void
-  onEdit: () => void
+  onView: () => void
 }
 
-const EndpointCardContext: FC<Props> = ({onDelete, onClone, onEdit}) => {
+const EndpointCardContext: FC<Props> = ({onDelete, onClone, onView}) => {
   return (
     <Context>
-      <Context.Menu icon={IconFont.CogThick}>
+      <Context.Menu icon={IconFont.EyeOpen}>
         <Context.Item
-          label="Edit"
-          action={onEdit}
+          label="View History"
+          action={onView}
           testID="endpoint-card-edit"
         />
       </Context.Menu>

ui/src/alerting/components/notifications/RuleCard.tsx

@@ -90,11 +90,11 @@ const RuleCard: FC<Props> = ({
     onUpdateRuleProperties(rule.id, {status})
   }
 
-  const onEdit = () => {
+  const onRuleClick = () => {
     router.push(`/orgs/${orgID}/alerting/rules/${rule.id}/edit`)
   }
 
-  const onRuleClick = () => {
+  const onView = () => {
     const historyType: AlertHistoryType = 'notifications'
 
     const queryParams = new URLSearchParams({
@@ -159,7 +159,7 @@ const RuleCard: FC<Props> = ({
       disabled={rule.status === 'inactive'}
       contextMenu={
         <NotificationRuleCardContext
-          onEdit={onEdit}
+          onView={onView}
           onClone={onClone}
           onDelete={onDelete}
         />

ui/src/alerting/components/notifications/RuleCardContext.tsx

@@ -8,18 +8,18 @@ import {ComponentColor} from '@influxdata/clockface'
 interface Props {
   onDelete: () => void
   onClone: () => void
-  onEdit: () => void
+  onView: () => void
 }
 
 const RuleCardContext: FunctionComponent<Props> = ({
   onDelete,
   onClone,
-  onEdit,
+  onView,
 }) => {
   return (
     <Context>
-      <Context.Menu icon={IconFont.CogThick}>
-        <Context.Item label="Edit" action={onEdit} />
+      <Context.Menu icon={IconFont.EyeOpen}>
+        <Context.Item label="View History" action={onView} />
       </Context.Menu>
       <Context.Menu icon={IconFont.Duplicate} color={ComponentColor.Secondary}>
         <Context.Item label="Clone" action={onClone} />