Correct final displays in notification inbox page

estela-api/api/serializers/cronjob.py

@@ -138,21 +138,21 @@ def update(self, instance, validated_data):
         if "schedule" in validated_data:
             instance.schedule = schedule
             update_schedule(name, schedule)
-            message = f"changed the schedule of scheduled-job {instance.cjid}"
+            message = f"changed the schedule of scheduled-job {instance.cjid}."
         if "status" in validated_data:
             instance.status = status
             if status == SpiderCronJob.ACTIVE_STATUS:
                 enable_cronjob(name)
-                message = f"enabled scheduled-job {instance.cjid}"
+                message = f"enabled scheduled-job {instance.cjid}."
             elif status == SpiderCronJob.DISABLED_STATUS:
                 disable_cronjob(name)
-                message = f"disabled scheduled-job {instance.cjid}"
+                message = f"disabled scheduled-job {instance.cjid}."
         if "unique_collection" in validated_data:
             instance.unique_collection = unique_collection
         if "data_status" in validated_data:
             if data_status == SpiderCronJob.PERSISTENT_STATUS:
                 instance.data_status = SpiderCronJob.PERSISTENT_STATUS
-                message = f"changed data persistence of scheduled-job {instance.cjid} to Persistent"
+                message = f"changed data persistence of scheduled-job {instance.cjid} to Persistent."
             elif data_status == SpiderCronJob.PENDING_STATUS:
                 instance.data_status = SpiderCronJob.PENDING_STATUS
                 if data_expiry_days < 1:
@@ -161,7 +161,7 @@ def update(self, instance, validated_data):
                     )
                 else:
                     instance.data_expiry_days = data_expiry_days
-                    message = "changed data persistence of scheduled-job {} to {} days".format(
+                    message = "changed data persistence of scheduled-job {} to {} days.".format(
                         instance.cjid, data_expiry_days
                     )
             else:

estela-api/api/serializers/project.py

@@ -27,9 +27,7 @@ class ProjectDetailSerializer(serializers.ModelSerializer):
     pid = serializers.UUIDField(
         read_only=True, help_text="A UUID identifying this project."
     )
-    name = serializers.CharField(
-        read_only=True, help_text="Project name."
-    )
+    name = serializers.CharField(read_only=True, help_text="Project name.")
 
     class Meta:
         model = Project
@@ -117,9 +115,7 @@ class ProjectUpdateSerializer(serializers.ModelSerializer):
     pid = serializers.UUIDField(
         read_only=True, help_text="A UUID identifying this project."
     )
-    name = serializers.CharField(
-        required=False, help_text="Project name."
-    )
+    name = serializers.CharField(required=False, help_text="Project name.")
     users = UserDetailSerializer(many=True, required=False, help_text="Afected users.")
     user = serializers.EmailField(
         write_only=True, required=False, help_text="User email address."

estela-api/api/views/cronjob.py

@@ -99,7 +99,7 @@ def create(self, request, *args, **kwargs):
         project = get_object_or_404(Project, pid=self.kwargs["pid"])
         self.save_notification(
             user=request.user,
-            message=f"scheduled a new scheduled-job in {spider.name} spider",
+            message=f"scheduled a new scheduled-job in {spider.name} spider.",
             project=project,
         )
 

estela-api/api/views/deploy.py

@@ -70,7 +70,7 @@ def create(self, request, *args, **kwargs):
         # Send action notification
         self.save_notification(
             user=user,
-            message=f"deployed a new spider in Deploy {serializer.data['did']}",
+            message=f"deployed a new spider in Deploy {serializer.data['did']}.",
             project=project,
         )
 
@@ -103,7 +103,7 @@ def update(self, request, *args, **kwargs):
         project = get_object_or_404(Project, pid=self.kwargs["pid"])
         self.save_notification(
             user=instance.user,
-            message=f"updated a spider in Deploy {instance.did}",
+            message=f"updated a spider in Deploy {instance.did}.",
             project=project,
         )
 

estela-api/api/views/notification.py

@@ -3,7 +3,9 @@
 from api.mixins import BaseViewSet
 from core.models import Notification, Project
 
-from api.serializers.notification import NotificationSerializer
+from api.serializers.notification import (
+    NotificationSerializer,
+)
 
 
 class NotificationViewSet(BaseViewSet, viewsets.ReadOnlyModelViewSet):
@@ -15,7 +17,9 @@ class NotificationViewSet(BaseViewSet, viewsets.ReadOnlyModelViewSet):
     def get_queryset(self):
         if self.request is None:
             return Notification.objects.none()
-        projects = Project.objects.filter(users__in=[self.request.user.id], deleted=False)
+        projects = Project.objects.filter(
+            users__in=[self.request.user.id], deleted=False
+        )
         return (
             super(NotificationViewSet, self).get_queryset().filter(project__in=projects)
         )

estela-web/src/components/NotificationsInboxPage/index.tsx

@@ -45,9 +45,6 @@ export class NotificationsInboxPage extends Component<unknown, NotificationInbox
     };
 
     changeNotificationStatus(nid: number | undefined): void {
-        // this.apiService.apiNotificationsUpdate(nid, { seen: true }).then((response) => {
-        //     console.log(response);
-        // });
         const notifications = this.state.notifications;
         const index = notifications.findIndex((notification) => notification.nid == nid);
         notifications[index].seen = true;
@@ -82,7 +79,11 @@ export class NotificationsInboxPage extends Component<unknown, NotificationInbox
                                                 : notification.user.username}
                                         </span>
                                         {AuthService.getUserEmail() == notification.user.email ? " have " : " has "}
-                                        {notification.message}
+                                        {notification.message}&nbsp;In&nbsp;
+                                        <span className="font-semibold text-estela-black-full">
+                                            {notification.project.name}&apos;
+                                        </span>
+                                        s project.
                                         <p className="text-xs text-estela-black-low">
                                             {notification.createdAt?.toDateString()}
                                         </p>

estela-web/src/shared/header/index.tsx

@@ -31,7 +31,7 @@ export class CustomHeader extends Component<unknown, HeaderState> {
         notifications: [],
         loaded: false,
         path: "",
-        news: true,
+        news: false,
     };
 
     async componentDidMount() {
@@ -63,9 +63,14 @@ export class CustomHeader extends Component<unknown, HeaderState> {
             pageSize: 3,
         };
         this.apiService.apiNotificationsList(requestParams).then((response) => {
-            if (response.results[0].seen && response.results[1].seen && response.results[2].seen) {
-                this.setState({ news: false });
+            if (response.count === 0) {
+                this.setState({ news: false, loaded: true });
+                return;
             }
+            response.results.find((notification) => {
+                notification.seen === false;
+                this.setState({ news: true });
+            });
             this.setState({ notifications: response.results, loaded: true });
         });
     };
@@ -209,11 +214,25 @@ export class CustomHeader extends Component<unknown, HeaderState> {
         },
     ];
 
+    noNotifications = (): MenuProps["items"] => [
+        {
+            key: "1",
+            label: (
+                <Content className="w-[320px] rounded-md p-2 hover:bg-estela-blue-low m-0">
+                    <p className="text-sm text-estela-blue-full font-medium">
+                        You don&apos;t have any notifications yet.
+                    </p>
+                </Content>
+            ),
+            style: { backgroundColor: "white" },
+        },
+    ];
+
     render(): JSX.Element {
-        const { loaded, path } = this.state;
+        const { path, loaded, notifications } = this.state;
         return (
             <>
-                {loaded && (
+                {loaded ? (
                     <Header className="bg-white h-[72px]">
                         <Row justify="center" align="middle" className="flex justify-center">
                             <Col flex={1} className="my-1">
@@ -222,7 +241,12 @@ export class CustomHeader extends Component<unknown, HeaderState> {
                                 </Link>
                             </Col>
                             <Col flex={0.06}>
-                                <Dropdown menu={{ items: this.notificationItems() }} trigger={["click"]}>
+                                <Dropdown
+                                    menu={{
+                                        items: notifications.length ? this.notificationItems() : this.noNotifications(),
+                                    }}
+                                    trigger={["click"]}
+                                >
                                     {this.renderNotificationIcon(path === "/notifications/inbox")}
                                 </Dropdown>
                             </Col>
@@ -246,6 +270,8 @@ export class CustomHeader extends Component<unknown, HeaderState> {
                             </Col>
                         </Row>
                     </Header>
+                ) : (
+                    <></>
                 )}
             </>
         );