views: Structure UI in MarkdownHelpView class.

This commit adds the class responsible to show markdown help. It
fetches markdown data from created `markdown.py`.

Tests added (MarkdownHelpView).

Author: Ezio-Sarthak

tests/ui_tools/test_popups.py

@@ -12,6 +12,7 @@
     EditModeView,
     FullRenderedMsgView,
     HelpView,
+    MarkdownHelpView,
     MsgInfoView,
     PopUpConfirmationView,
     PopUpView,
@@ -672,6 +673,49 @@ def test_select_edit_mode(
         mode_button.set_selected_mode.assert_called_once_with(mode)
 
 
+class TestMarkdownHelpView:
+    @pytest.fixture(autouse=True)
+    def mock_external_classes(self, mocker, monkeypatch):
+        self.controller = mocker.Mock()
+        mocker.patch.object(
+            self.controller, "maximum_popup_dimensions", return_value=(64, 64)
+        )
+        mocker.patch(MODULE + ".format_string", return_value=["Wrapped text"])
+
+        self.markdown_help_view = MarkdownHelpView(
+            self.controller, "Markdown Help Menu", "http://chat.zulip.org"
+        )
+
+    def test_keypress_any_key(self, widget_size):
+        key = "a"
+        size = widget_size(self.markdown_help_view)
+
+        self.markdown_help_view.keypress(size, key)
+
+        assert not self.controller.exit_popup.called
+
+    @pytest.mark.parametrize(
+        "key", {*keys_for_command("GO_BACK"), *keys_for_command("MARKDOWN_HELP")}
+    )
+    def test_keypress_exit_popup(self, key, widget_size):
+        size = widget_size(self.markdown_help_view)
+
+        self.markdown_help_view.keypress(size, key)
+
+        assert self.controller.exit_popup.called
+
+    def test_keypress_body_navigation(
+        self, mocker, widget_size, navigation_key_expected_key_pair
+    ):
+        key, expected_key = navigation_key_expected_key_pair
+        size = widget_size(self.markdown_help_view)
+        super_keypress = mocker.patch(MODULE + ".urwid.Frame.keypress")
+
+        self.markdown_help_view.keypress(size, key)
+
+        super_keypress.assert_called_once_with(size, expected_key)
+
+
 class TestHelpView:
     @pytest.fixture(autouse=True)
     def mock_external_classes(self, mocker, monkeypatch):

zulipterminal/ui_tools/views.py

@@ -15,6 +15,7 @@
     keys_for_command,
     primary_key_for_command,
 )
+from zulipterminal.config.markdown import MARKDOWN_ELEMENTS
 from zulipterminal.config.symbols import (
     CHECK_MARK,
     COLUMN_TITLE_BAR_LINE,
@@ -32,6 +33,7 @@
     Message,
     TidiedUserInfo,
     asynch,
+    format_string,
     match_stream,
     match_user,
 )
@@ -1211,6 +1213,59 @@ def __init__(self, controller: Any, title: str) -> None:
         super().__init__(controller, widgets, "HELP", popup_width, title)
 
 
+class MarkdownHelpView(PopUpView):
+    def __init__(self, controller: Any, title: str, server_url: str) -> None:
+        raw_menu_content = []  # to calculate table dimensions
+        rendered_menu_content = []  # to display rendered content in table
+
+        for element in MARKDOWN_ELEMENTS:
+            content = element["content"]
+
+            # Currently we only re-render user names
+            if element["re_render_required"]:
+                content = controller.model.user_full_name
+
+            wrapped_html_element = format_string([content], element["html_format"])[0]
+            wrapped_raw_content = format_string([content], element["raw_format"])[0]
+
+            rendered_content, message_links, _ = MessageBox.transform_content(
+                wrapped_html_element, server_url
+            )
+
+            raw_menu_content.append((wrapped_raw_content, wrapped_raw_content))
+            rendered_menu_content.append((wrapped_raw_content, rendered_content))
+
+        popup_width, column_widths = self.calculate_table_widths(
+            [("", raw_menu_content)], len(title)
+        )
+
+        border_lines = dict(
+            tlcorner="",
+            tline="",
+            trcorner="",
+            lline="",
+            rline="",
+            blcorner=COLUMN_TITLE_BAR_LINE,
+            bline=COLUMN_TITLE_BAR_LINE,
+            brcorner=COLUMN_TITLE_BAR_LINE,
+        )
+
+        header_widgets = [
+            urwid.Text([("popup_category", "You type")], align="center"),
+            urwid.Text([("popup_category", "You get")], align="center"),
+        ]
+        header_columns = urwid.Columns(header_widgets)
+        wrapped_header = urwid.LineBox(header_columns, **border_lines)
+
+        body = self.make_table_with_categories(
+            [("", rendered_menu_content)], column_widths
+        )
+
+        super().__init__(
+            controller, body, "MARKDOWN_HELP", popup_width, title, wrapped_header
+        )
+
+
 class PopUpConfirmationView(urwid.Overlay):
     def __init__(
         self, controller: Any, question: Any, success_callback: Callable[[], None]