Fix alignment issue on Admin - Subscription Creation Workflow Approval

[RakinduM]

Problem

• Table Columns were not evenly distributed, causing inconsistent spacing
• Approve/Reject buttons were stacked oddly in the action column

Before Fix

Changes Made

✅ Make Column widths responsive
✅ Make action buttons responsive

After fix

Fixes wso2/api-manager#3479

[CLAassistant]

All committers have signed the CLA.

[RakinduM]

Hi @tharikaGitHub, Could I ignore this code duplication error on the code or should I fix it. I’d appreciate any guidance on this.

[tharikaGitHub]

Hi @RakinduM, yes you can ignore them as they are not related to your changes.

[RakinduM]

Hi @RakinduM, yes you can ignore them as they are not related to your changes.

Thanks for confirming, I'll ignore those errors.

[RakinduM]

Hi @tharikaGitHub, is it possible to re run the workflow ? The cypress failure looks like unrelated to my UI changes and seems like the socket ended up null during request cloning.

[RakinduM]

@tharikaGitHub , Could we run the workflow again ? I updated my branch with the main as it was not updated when the last time workflow ran. However It showed that 1 test failing because

• cypress couldn't able to find #itest-api-details-portal-config-acc within the timeout window.

Since this selector part is from Publisher portal and my changes are only done in Admin portal, it is seems like a timeout error as I guess, but I'm not sure though.

[tharikaGitHub]

Hi @RakinduM,

I applied your fix locally. It is working fine. Following are my observations.

With smaller screen sizes like mobile, the Reject button get's cut off like below.

But this was not the case previously.

Do you think there would be a possibility to fix that behaviour?

Also shall we check if this behaviour is the same for other types of approval workflows and fix them if possible? Not only for subscription creation.

[RakinduM]

Hi @tharikaGitHub,

Thanks for the feedback. I'm checking the feasibility to get that behaviour. I'll give an update soon.

[RakinduM]

Hi @tharikaGitHub,

I fixed that issue on buttons get cut off when the screen gets smaller and now it is working as expected.

Additionally I have checked and fixed other necessary approval screens Subscription Update, Subscription Delete, Application Create, Application Delete, API State Change, API Revision Deployment, Registration Creation and User Creation.

• Subscription Creation Workflow Screen After fix

[tharikaGitHub]

Great! Thanks @RakinduM. I will review this PR and get back.

[tharikaGitHub]

Hi @RakinduM, I applied your changes locally and observed the behaviour of different approval workflows. My observations are the following.

For workflows where the following change is not there, the action buttons seem to have some extra padding from the right side. For others it looked okay.

const setDefaultCellProps = () => ({ style: { width: '25%' } });

I think we will have to add setDefaultCellProps to the files that are missing it.

Also shall we add the same changes to APIRevisionDeployment.jsx as well?

[RakinduM]

Hi @tharikaGitHub,

Ohh, I thought that in the Application Registration Workflow that extra bit space in the action buttons is okay. That's why I didn't apply DefaultCellProps and fixed only the button alignment when they stack up in smaller screen like below image

Also in APIRevisionDeployment, it looked fine and so I didn't make any changes there. But yeah I'll add those changes as needed and share an update soon.

[sonarqubecloud]

Quality Gate failed

Failed conditions
87.4% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

[RakinduM]

Hi @tharikaGitHub,

I have fixed it on the Application Registration, API State Change and API Revision Deployment screens. I have attached some images for your reference.