fix prototype

dashboard/src/main/home/app-dashboard/expanded-app/ExpandedApp.tsx

@@ -926,7 +926,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
               <TabSelector
                 noBuffer
                 options={[
-                  { label: "Notifications", value: "notifications" },
+                  { label: "Notifications (8)", value: "notifications" },
                   { label: "Activity", value: "activity" },
                   { label: "Overview", value: "overview" },
                   hasBuiltImage && { label: "Logs", value: "logs" },

dashboard/src/main/home/app-dashboard/expanded-app/notifications/NotificationExpandedView.tsx

@@ -1,30 +1,52 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
+import { PorterAppEvent } from "../activity-feed/events/types";
+import Text from "components/porter/Text";
+import Spacer from "components/porter/Spacer";
+import document from "assets/document.svg";
+import Button from "components/porter/Button";
 
 type Props = {
-    eventId: string;
+  event: PorterAppEvent;
 }
 
 const NotificationExpandedView: React.FC<Props> = ({
-    eventId,
+  event,
 }) => {
-    const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
-    useEffect(() => {
-        // Do something
-    }, []);
+  useEffect(() => {
+    // Do something
+  }, []);
 
-    return (
-        <StyledTemplateComponent>
-        </StyledTemplateComponent>
-    );
+  return (
+    <StyledNotificationExpandedView>
+      <ExpandedViewContent>
+        <Text color="helper">Event ID: {event.id}</Text>
+        <Spacer y={0.5} />
+        <Text size={16}>{event.metadata.summary}</Text>
+        <Spacer y={0.5} />
+        <Message>
+          <img src={document} />
+          {event.metadata.detail}
+        </Message>
+        <Spacer y={0.5} />
+      </ExpandedViewContent>
+      <ExpandedViewFooter>
+        <Button>Take recommended action</Button>
+      </ExpandedViewFooter>
+    </StyledNotificationExpandedView>
+  );
 };
 
 export default NotificationExpandedView;
 
-const StyledTemplateComponent = styled.div`
+const StyledNotificationExpandedView = styled.div`
 width: 100%;
+display: flex;
+flex-direction: column;
 animation: fadeIn 0.3s 0s;
+padding: 15px 20px;
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -33,4 +55,32 @@ animation: fadeIn 0.3s 0s;
     opacity: 1;
   }
 }
+border-bottom: 1px solid #494b4f;
+border-right: 1px solid #494b4f;
+justify-content: space-between;
+`;
+
+const ExpandedViewContent = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Message = styled.div`
+  padding: 20px;
+  background: #26292e;
+  border-radius: 5px;
+  line-height: 1.5em;
+  border: 1px solid #aaaabb33;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  > img {
+    width: 13px;
+    margin-right: 20px;
+  }
+`;
+
+const ExpandedViewFooter = styled.div`
+  display: flex;
+  justify-content: flex-end;
 `;

dashboard/src/main/home/app-dashboard/expanded-app/notifications/NotificationFeed.tsx

@@ -15,11 +15,11 @@ type Props = {
 const NotificationFeed: React.FC<Props> = ({
     appName,
 }) => {
-    const [selectedEventId, setSelectedEventId] = useState<string>("");
+    const [selectedEvent, setSelectedEvent] = useState<PorterAppEvent | null>(null);
     const { currentCluster, currentProject } = useContext(Context);
 
-    const handleTileClick = (tileId: string) => {
-        setSelectedEventId(tileId);
+    const handleTileClick = (event: PorterAppEvent) => {
+        setSelectedEvent(event);
     };
 
     const { data: events = [], isLoading } = useQuery<PorterAppEvent[]>(
@@ -53,7 +53,7 @@ const NotificationFeed: React.FC<Props> = ({
 
     useEffect(() => {
         if (events.length > 0) {
-            setSelectedEventId(events[0].id);
+            setSelectedEvent(events[0]);
         }
     }, [events])
 
@@ -63,8 +63,8 @@ const NotificationFeed: React.FC<Props> = ({
 
     return (
         <StyledNotificationFeed>
-            <NotificationList onTileClick={handleTileClick} events={events} selectedEventId={selectedEventId} appName={appName} />
-            {selectedEventId !== "" && <NotificationExpandedView eventId={selectedEventId} />}
+            {selectedEvent && <NotificationList onTileClick={handleTileClick} events={events} selectedEvent={selectedEvent} appName={appName} />}
+            {selectedEvent && <NotificationExpandedView event={selectedEvent} />}
         </StyledNotificationFeed>
     );
 };

dashboard/src/main/home/app-dashboard/expanded-app/notifications/NotificationList.tsx

@@ -4,22 +4,22 @@ import { PorterAppEvent } from "../activity-feed/events/types";
 import NotificationTile from "./NotificationTile";
 
 type Props = {
-    onTileClick: (tileId: string) => void;
+    onTileClick: (event: PorterAppEvent) => void;
     events: PorterAppEvent[];
-    selectedEventId: string;
+    selectedEvent: PorterAppEvent;
     appName: string;
 };
 
 const NotificationList: React.FC<Props> = ({
     onTileClick,
     events,
-    selectedEventId,
+    selectedEvent,
     appName,
 }) => {
     return (
         <StyledNotificationList>
             {events.map((evt) => (
-                <NotificationTile key={evt.id} event={evt} selected={evt.id === selectedEventId} onClick={() => onTileClick(evt.id)} appName={appName} />
+                <NotificationTile key={evt.id} event={evt} selected={evt.id === selectedEvent.id} onClick={() => onTileClick(evt)} appName={appName} />
             ))}
         </StyledNotificationList>
     );
@@ -33,6 +33,7 @@ const StyledNotificationList = styled.div`
     flex-direction: column;
     height: 600px;
     overflow: auto;
+    border-bottom: 1px solid #494b4f;
 
     ::-webkit-scrollbar {
         width: 3px;

dashboard/src/main/home/app-dashboard/expanded-app/notifications/NotificationTile.tsx

@@ -4,6 +4,7 @@ import { PorterAppEvent } from "../activity-feed/events/types";
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
 import { getServiceNameFromPodNameAndAppName } from "../logs/utils";
+import { feedDate } from "shared/string_utils";
 
 type Props = {
   event: PorterAppEvent;
@@ -21,7 +22,9 @@ const NotificationTile: React.FC<Props> = ({
   return (
     <StyledNotificationTile onClick={onClick} selected={selected}>
       <NotificationContent>
-        <NotificationSummary>{event.metadata.summary}</NotificationSummary>
+        <Text color="helper">{feedDate(event.created_at)}</Text>
+        <Spacer y={0.5} />
+        <NotificationSummary>{event.metadata.short_summary}</NotificationSummary>
         <Spacer y={0.5} />
         <Text color="helper">Service: <ServiceName>{getServiceNameFromPodNameAndAppName(event.metadata.pod_name, appName)}</ServiceName></Text>
       </NotificationContent>