Fix to handle review events in the deployment page (#213)

* Add the event handler for review in the page

* Fix the style of status steps

Author: Noah Hanjun Lee

internal/server/router.go

@@ -93,8 +93,8 @@ func NewRouter(c *RouterConfig) *gin.Engine {
 	r := gin.New()
 
 	r.Use(cors.New(cors.Config{
-		AllowOrigins: []string{"http://localhost:3000"},
-		// AllowAllOrigins:  true,
+		// AllowOrigins: []string{"http://localhost:3000"},
+		AllowAllOrigins:  true,
 		AllowCredentials: true,
 		AllowMethods:     []string{"GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"},
 		AllowHeaders:     []string{"Origin", "Authorization", "Accept", "Content-Length", "Content-Type"},

ui/src/components/DeployConfirm.tsx

@@ -50,7 +50,7 @@ export default function DeployConfirm(props: DeployConfirmProps): JSX.Element {
             <Form.Item
                 {...layout}
                 label="Status"
-                style={(props.deployment.statuses && props.deployment.statuses.length > 0)? {marginBottom: 0} : {}}
+                style={(props.deployment.statuses && props.deployment.statuses.length > 0)? {marginBottom: 0} : {marginBottom: 12}}
             >
                 {(props.deployment.statuses && props.deployment.statuses.length > 0)? 
                     <Collapse ghost>

ui/src/components/DeploymentStatusSteps.tsx

@@ -11,13 +11,7 @@ interface DeploymentStatusStepsProps {
 
 export default function DeploymentStatusSteps(props: DeploymentStatusStepsProps): JSX.Element {
     return  (
-        <Timeline
-            style={{
-                position: "relative",
-                top: 15,
-                paddingBottom: 0
-            }}
-        >
+        <Timeline>
             {props.statuses.map((status, idx) => {
                 return (
                     <Timeline.Item 

ui/src/redux/deployment.tsx

@@ -187,6 +187,11 @@ export const deploymentSlice = createSlice({
             }
 
             state.deployment = event.deployment
+        },
+        handleReviewEvent: (state, action: PayloadAction<Event>) => {
+            state.reviews = state.reviews.map((review) => {
+                return (review.id === action.payload.review?.id)? action.payload.review : review
+            })
         }
     },
     extraReducers: builder => {

ui/src/views/Deployment.tsx

@@ -59,6 +59,7 @@ export default function DeploymentView(): JSX.Element {
 
         const sub = subscribeEvents((event) => {
             dispatch(slice.actions.handleDeploymentEvent(event))
+            dispatch(slice.actions.handleReviewEvent(event))
         })
 
         return () => {