Subject: [pgAdmin][RM-7132]: Port Properties collection, Dashboard and SQL panel in React

From: Pradip Parkale <[email-masked]>
Date: Mon, 14 Mar 2022 19:17:27 +0530

Hi Hackers,

Please find the attached patch for #7132
<https://redmine.postgresql.org/issues/7132> Port Properties collection,
Dashboard and SQL panel in React.

-- 
Thanks & Regards,
Pradip Parkale
Software Engineer | EnterpriseDB Corporation

---

From: Akshay Joshi <[email-masked]>
Date: Tue, 15 Mar 2022 16:01:17 +0530

Hi Aditya

Can you please review/test it?

-- 
*Thanks & Regards*
*Akshay Joshi*
*pgAdmin Hacker | Principal Software Architect*
*EDB Postgres <http://edbpostgres.com>*

*Mobile: +91 976-788-8246*

---

From: Aditya Toshniwal <[email-masked]>
Date: Tue, 15 Mar 2022 17:39:31 +0530

Hi Pradip,

I did some basic usage and review and found below issues:
1. The code fails if you refresh the page and go to properties, when no
node is selected.
2. I found below UI issues on selecting a database node. Also, checkbox
column is too wide.
3. Why is this in the node.js file. It should be in node_view.jsx.

+

+              ReactDOM.render(

+                <Theme>

+                  <CollectionNodeView

+                    node={node}

+                    treeNodeInfo={treeNodeInfo}

+                    item={item}

+                    itemNodeData={d}

+                    pgBrowser={pgBrowser}

+                  ></CollectionNodeView>

+                </Theme>,

+                b.panels['properties'].panel.$container[0]

+              );

4. I have seen a lot of commented codes. Few samples:

+              // if (that.canHide) {

+              // pgBrowser.Events.off('pgadmin-browser:tree:selected', ()
=> {

+

+              //     removePanelView($container[0]);

+              // });

5. In WelcomeDashboard.jsx, the complete SVG code is put. Please move it to
a file and import it.
6. Cleanup web/pgadmin/dashboard/static/js/dashboardDummy.js
7. Cleanup web/pgadmin/dashboard/static/js/dashboard_ponents.jsx
8. Rename Sql.jsx to SQL.jsx
9. The search is not working. It filters all.
10. If there is huge data then it should show some spinner.
11. Delete buttons should be disabled if no object is selected.
12. Delete buttons and search box should be on the same line.

-- 
Thanks,
Aditya Toshniwal
pgAdmin Hacker | Software Architect | *edbpostgres.com*
<http://edbpostgres.com>
"Don't Complain about Heat, Plant a TREE"

---

From: Pradip Parkale <[email-masked]>
Date: Mon, 28 Mar 2022 10:07:50 +0530

Hi,
Here is the updated patch. This patch includes the fix for #7215
<https://redmine.postgresql.org/issues/7215>.

On Mon, Mar 28, 2022 at 9:11 AM Pradip Parkale <
[email-masked]> wrote:

> Hi Aditya,
> Please ignore the previous email, find the updated patch attached.
>
> On Sun, Mar 27, 2022 at 11:07 PM Pradip Parkale <
>> Hi Aditya,
>> Please find the updated patch.
>>
>> On Tue, Mar 15, 2022 at 5:40 PM Aditya Toshniwal <
>> [email-masked]> wrote:
>>
>>> Hi Pradip,
>>>
>>> +              // pgBrowser.Events.off('pgadmin-browser:tree:selected',
>>> () => {
>>>
>>> +
>>>
>>> 5. In WelcomeDashboard.jsx, the complete SVG code is put. Please move it
>>> to a file and import it.
>>> On Tue, Mar 15, 2022 at 4:01 PM Akshay Joshi <
>>> [email-masked]> wrote:
>>>
>>>> Hi Aditya
>>>>
>>>>> <https://redmine.postgresql.org/issues/7132> Port Properties
>>>>> collection, Dashboard and SQL panel in React.
>>>>>
>>>>>
>>>>> --
>>>>> Thanks & Regards,
>>>>> Pradip Parkale

---

From: Akshay Joshi <[email-masked]>
Date: Mon, 28 Mar 2022 11:58:40 +0530

Hi Pradip

Following are the review comments (GUI):

   - Catalog objects should not be drop or drop cascade. Remove checkboxes
   from the properties panel.
   -  Database column should be there for the 'Server Activity' table all
   tabs when the server is selected. When the database is selected it should
   be hidden.
   - Rename 'Lock' tab to 'Locks'.
   - Remove extra column 'Waiting' which was not there originally.
   - 'Server Activity' -> Sessions-> Details for the last record is not
   readable. Fix the scroll bar issue. Same with the Configuration tab last
   4-5 records are not readable.
   -  Select and expand the first and second records, the rest of the
   records are not visible, again seems to be a scroll bar issue.
   - 'Server Activity' -> Locks, "Granted?" column is empty, not showing
   any value.
   - Set the width of the column appropriately for all the tabs, for
   example, unit columns (in Configuration tab) width should be less, so that
   data on the other columns are more readable. Check all the tabs and set
   them appropriately
   - Faced "Request failed with status code 404" error. Select database
   server from browser tree and then select 'Server Activity'
   -> Configuration. Now select any database, you will get the error.
   - Properties panel size of the column having checkboxes should be less,
   compare with existing behavior.
   - Properties panel should show the message '*No Properties are available
   for the selected object*' if the respective collection node does not
   have children.

On Mon, Mar 28, 2022 at 10:08 AM Pradip Parkale <
[email-masked]> wrote:

>>>> +              //
>>>> pgBrowser.Events.off('pgadmin-browser:tree:selected', () => {
>>>>
>>>> +
>>>>
>>>> 5. In WelcomeDashboard.jsx, the complete SVG code is put. Please move
>>>> it to a file and import it.

---

From: Pradip Parkale <[email-masked]>
Date: Wed, 30 Mar 2022 11:30:57 +0530

Hi Akhay,

Please find the updated patch.I have fixed all the issues.

On Mon, Mar 28, 2022 at 11:58 AM Akshay Joshi <[email-masked]>
wrote:

>    - Catalog objects should not be drop or drop cascade. Remove
>    checkboxes from the properties panel.
>    - Properties panel size of the column having checkboxes should be
>    less, compare with existing behavior.
>    - Properties panel should show the message '*No Properties are
>    available for the selected object*' if the respective collection node
>    does not have children.
>
>
>
>>>>> 1. The code fails if you refresh the page and go to properties, when
>>>>> no node is selected.
>>>>> 2. I found below UI issues on selecting a database node. Also,
>>>>> checkbox column is too wide.

---

From: Akshay Joshi <[email-masked]>
Date: Wed, 30 Mar 2022 12:08:00 +0530

Thanks, the patch applied.

On Wed, Mar 30, 2022 at 11:31 AM Pradip Parkale <
[email-masked]> wrote:

> On Mon, Mar 28, 2022 at 11:58 AM Akshay Joshi <
>>    -  Database column should be there for the 'Server Activity' table
>>    all tabs when the server is selected. When the database is selected it
>>    should be hidden.

---

From: Pradip Parkale <[email-masked]>
Date: Mon, 4 Apr 2022 17:35:28 +0530

Hi Akshay,
Please find an updated patch. I have fixed the issue found in the testing.

On Wed, Mar 30, 2022 at 12:08 PM Akshay Joshi <[email-masked]>
wrote:

>>>    - 'Server Activity' -> Locks, "Granted?" column is empty, not
>>>    showing any value.
>>>    available for the selected object*' if the respective collection
>>>    node does not have children.
>>>
>>>
>>>
>>>>>>> 5. In WelcomeDashboard.jsx, the complete SVG code is put. Please
>>>>>>> move it to a file and import it.

---

From: Akshay Joshi <[email-masked]>
Date: Mon, 4 Apr 2022 17:44:02 +0530

On Mon, Apr 4, 2022 at 5:35 PM Pradip Parkale <
[email-masked]> wrote:

> On Wed, Mar 30, 2022 at 12:08 PM Akshay Joshi <
>>>>    - 'Server Activity' -> Sessions-> Details for the last record is
>>>>    not readable. Fix the scroll bar issue. Same with the Configuration tab
>>>>    last 4-5 records are not readable.
>>>>    - Faced "Request failed with status code 404" error. Select
>>>>    database server from browser tree and then select 'Server Activity'
>>>>>>>> 1. The code fails if you refresh the page and go to properties,
>>>>>>>> when no node is selected.

---

From: Pradip Parkale <[email-masked]>
Date: Tue, 5 Apr 2022 13:02:55 +0530

Hi Akshay,