Add error message bubble for task bubble

Bug: b:294077589
Change-Id: Iaa0d7afc26ab7f44de129b4aa0765ea210433ea0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4749604
Reviewed-by: Artsiom Mitrokhin <amitrokhin@chromium.org>
Commit-Queue: Ana Salazar <anasalazar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1179891}

ash/BUILD.gn

@@ -626,6 +626,8 @@ component("ash") {
     "glanceables/classroom/glanceables_classroom_item_view.h",
     "glanceables/classroom/glanceables_classroom_types.cc",
     "glanceables/classroom/glanceables_classroom_types.h",
+    "glanceables/common/glanceables_error_message_view.cc",
+    "glanceables/common/glanceables_error_message_view.h",
     "glanceables/common/glanceables_list_footer_view.cc",
     "glanceables/common/glanceables_list_footer_view.h",
     "glanceables/common/glanceables_progress_bar_view.cc",

ash/ash_strings.grd

@@ -6862,6 +6862,9 @@ New install
       <message name="IDS_GLANCEABLES_TASKS_ADD_NEW_TASK_BUTTON_LABEL" desc="Tasks glanceable displays non-completed tasks fetched from Google Tasks API. This text in displayed on the button, which allows creating new tasks (currently it redirects to Tasks Web UI).">
         Add new task
       </message>
+      <message name="IDS_GLANCEABLES_ERROR_DISMISS" desc="A glanceables bubble (classroom or tasks) displays a notification with an error message when an error occurs during any action within said glaceables bubble. This is the text that is displayed on the button within said notification in order to dismiss it.">
+        Dismiss
+      </message>
 
       <!-- Do Not Disturb notification -->
       <message name="IDS_ASH_DO_NOT_DISTURB_NOTIFICATION_TITLE" desc="Label used for the notification that shows up when the 'Do Not Disturb' feature is enabled.">

ash/ash_strings_grd/IDS_GLANCEABLES_ERROR_DISMISS.png.sha1

@@ -0,0 +1 @@
+124ef69d05a5db046884d6c55cc2e8b912ee2285

ash/glanceables/common/glanceables_error_message_view.cc

@@ -0,0 +1,92 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "ash/glanceables/common/glanceables_error_message_view.h"
+
+#include <algorithm>
+#include <memory>
+#include <string>
+
+#include "ash/glanceables/common/glanceables_view_id.h"
+#include "ash/strings/grit/ash_strings.h"
+#include "ash/style/typography.h"
+#include "base/types/cxx23_to_underlying.h"
+#include "ui/base/l10n/l10n_util.h"
+#include "ui/base/metadata/metadata_impl_macros.h"
+#include "ui/chromeos/styles/cros_tokens_color_mappings.h"
+#include "ui/gfx/text_constants.h"
+#include "ui/views/background.h"
+#include "ui/views/controls/button/button.h"
+#include "ui/views/controls/button/label_button.h"
+#include "ui/views/controls/label.h"
+#include "ui/views/layout/flex_layout_types.h"
+#include "ui/views/layout/layout_types.h"
+#include "ui/views/metadata/view_factory_internal.h"
+#include "ui/views/view.h"
+#include "ui/views/view_class_properties.h"
+
+namespace {
+
+constexpr int kErrorMessageViewSize = 40;
+constexpr gfx::Insets kButtonInsets = gfx::Insets::TLBR(10, 0, 10, 16);
+constexpr gfx::Insets kContainerInsets = gfx::Insets::TLBR(0, 0, 12, 0);
+constexpr gfx::Insets kLabelInsets = gfx::Insets::VH(10, 16);
+
+}  // namespace
+
+namespace ash {
+
+class DismissErrorLabelButton : public views::LabelButton {
+ public:
+  explicit DismissErrorLabelButton(PressedCallback callback)
+      : views::LabelButton(std::move(callback)) {
+    SetText(l10n_util::GetStringUTF16(IDS_GLANCEABLES_ERROR_DISMISS));
+    SetID(
+        base::to_underlying(GlanceablesViewId::kGlanceablesErrorMessageButton));
+    SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_RIGHT);
+    SetProperty(views::kMarginsKey, kButtonInsets);
+    SetTextColorId(views::Button::STATE_NORMAL, cros_tokens::kCrosSysOnError);
+    TypographyProvider::Get()->StyleLabel(TypographyToken::kCrosButton2,
+                                          *label());
+    label()->SetAutoColorReadabilityEnabled(false);
+  }
+  ~DismissErrorLabelButton() override = default;
+};
+
+GlanceablesErrorMessageView::GlanceablesErrorMessageView(
+    views::Button::PressedCallback callback,
+    const std::u16string& error_message) {
+  SetBackground(views::CreateThemedRoundedRectBackground(
+      cros_tokens::kCrosSysError, kErrorMessageViewSize / 2));
+  SetProperty(views::kMarginsKey, kContainerInsets);
+
+  const auto* const typography_provider = TypographyProvider::Get();
+
+  error_message_label_ = AddChildView(
+      views::Builder<views::Label>()
+          .SetID(base::to_underlying(
+              GlanceablesViewId::kGlanceablesErrorMessageLabel))
+          .SetEnabledColorId(cros_tokens::kCrosSysOnError)
+          .SetFontList(typography_provider->ResolveTypographyToken(
+              TypographyToken::kCrosButton2))
+          .SetLineHeight(typography_provider->ResolveLineHeight(
+              TypographyToken::kCrosButton2))
+          .SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT)
+          .SetText(error_message)
+          .SetProperty(views::kMarginsKey, kLabelInsets)
+          .SetProperty(
+              views::kFlexBehaviorKey,
+              views::FlexSpecification(views::MinimumFlexSizeRule::kScaleToZero,
+                                       views::MaximumFlexSizeRule::kUnbounded))
+          .Build());
+  error_message_label_->SetAutoColorReadabilityEnabled(false);
+
+  dismiss_button_ = AddChildView(
+      std::make_unique<DismissErrorLabelButton>(std::move(callback)));
+}
+
+BEGIN_METADATA(GlanceablesErrorMessageView, views::View)
+END_METADATA
+
+}  // namespace ash

ash/glanceables/common/glanceables_error_message_view.h

@@ -0,0 +1,43 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef ASH_GLANCEABLES_COMMON_GLANCEABLES_ERROR_MESSAGE_VIEW_H_
+#define ASH_GLANCEABLES_COMMON_GLANCEABLES_ERROR_MESSAGE_VIEW_H_
+
+#include <string>
+
+#include "ash/ash_export.h"
+#include "base/memory/raw_ptr.h"
+#include "ui/base/metadata/metadata_header_macros.h"
+#include "ui/views/controls/button/button.h"
+#include "ui/views/layout/flex_layout_view.h"
+
+namespace views {
+class Label;
+class LabelButton;
+}  // namespace views
+
+namespace ash {
+
+// Displays error message at the bottom of the glanceables bubble. Used in
+// tasks bubbles.
+class ASH_EXPORT GlanceablesErrorMessageView : public views::FlexLayoutView {
+ public:
+  METADATA_HEADER(GlanceablesErrorMessageView);
+
+  GlanceablesErrorMessageView(views::Button::PressedCallback callback,
+                              const std::u16string& error_message);
+  GlanceablesErrorMessageView(const GlanceablesErrorMessageView&) = delete;
+  GlanceablesErrorMessageView& operator=(const GlanceablesErrorMessageView&) =
+      delete;
+  ~GlanceablesErrorMessageView() override = default;
+
+ private:
+  raw_ptr<views::Label> error_message_label_ = nullptr;
+  raw_ptr<views::LabelButton> dismiss_button_ = nullptr;
+};
+
+}  // namespace ash
+
+#endif  // ASH_GLANCEABLES_COMMON_GLANCEABLES_ERROR_MESSAGE_VIEW_H_

ash/glanceables/common/glanceables_view_id.h

@@ -37,6 +37,10 @@ enum class GlanceablesViewId {
   kTasksBubbleListContainer,
   kTasksBubbleAddNewButton,
   kTasksBubbleListFooter,
+
+  // `GlanceablesErrorMessageView`
+  kGlanceablesErrorMessageLabel,
+  kGlanceablesErrorMessageButton,
 };
 
 }  // namespace ash