Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transforms haml forms to react for Add and Edit feature of Automate Class #9301

Open
wants to merge 8 commits into
base: master
Choose a base branch
from

Conversation

elsamaryv
Copy link
Contributor

@elsamaryv elsamaryv commented Oct 30, 2024

Automation / Automate / Explorer / Datastore

Transforms haml forms to react for Add and Edit feature of Automate Class.

Before
Add Class - Old

Edit Class - Old

After

Add class - After Edit class - After

@elsamaryv elsamaryv changed the title Transforms haml forms to react for Automate class [WIP] Transforms haml forms to react for Automate class Oct 30, 2024
@elsamaryv elsamaryv marked this pull request as ready for review November 4, 2024 14:39
@elsamaryv elsamaryv requested a review from a team as a code owner November 4, 2024 14:39
@elsamaryv elsamaryv changed the title [WIP] Transforms haml forms to react for Automate class Transforms haml forms to react for Add and Edit feature of Automate Class Nov 4, 2024
@elsamaryv elsamaryv force-pushed the class-form-converison branch from 2dcfb86 to 7572497 Compare November 5, 2024 08:57
@elsamaryv
Copy link
Contributor Author

elsamaryv commented Nov 5, 2024

@miq-bot add_label enhancement

@elsamaryv
Copy link
Contributor Author

@miq-bot assign @GilbertCherrie

@elsamaryv elsamaryv force-pushed the class-form-converison branch 2 times, most recently from 0493f7b to 73c00d5 Compare November 12, 2024 07:36
@elsamaryv elsamaryv force-pushed the class-form-converison branch from f9920d1 to d359d80 Compare November 13, 2024 12:33
@elsamaryv elsamaryv requested a review from Fryguy November 13, 2024 12:50
request
.then((response) => {
if (response.status === 200) {
const confirmation = isEdit ? __(`Class "${values.name}" was saved`) : __(`Class "${values.name}" was added`);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For translations in the UI code, you have to use placeholders within the translated text and then fill them in afterwards with something like sprintf. See https://github.com/ManageIQ/guides/blob/master/i18n.md#javascript, particularly the caveats section. I think this might work:

Suggested change
const confirmation = isEdit ? __(`Class "${values.name}" was saved`) : __(`Class "${values.name}" was added`);
let confirmation = isEdit ? __(`Class "%s" was saved`) : __(`Class "%s" was added`);
confirmation = sprintf(confirmation, value.name);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for pointing that out. I've updated that part.

};

const onCancel = () => {
const confirmation = classRecord.id ? __(`Edit of Class "${classRecord.name}" cancelled by the user`)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar case here with i18n

@@ -7,7 +7,7 @@ module.exports = defineConfig({
baseUrl: 'http://localhost:3000',
viewportHeight: 800,
viewportWidth: 1800,
numTestsKeptInMemory: 0,
numTestsKeptInMemory: 5,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why was this changed?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I changed this while debugging and forgot to set it back to 0 when pushing. We can put it back to 0.

@Fryguy
Copy link
Member

Fryguy commented Dec 2, 2024

Overall LGTM. I kind of don't like the way the Fully Qualified Name is presented...it gets kind of hidden. Is it possible to use a textbox around it that is readonly (but still allow copy)?

Additionally, and this is admittedly a change in functionality, but can we change the Fully Qualified string presentation to not have spaces around the /. For example, the one in the screenshots should be /TestDomain/TestNS/TestClass as opposed to / TestDomain / TestNS / TestClass. This is because this field is frequently used for copy/paste, but usually people then need to manually remove the spaces.

@elsamaryv
Copy link
Contributor Author

Overall LGTM. I kind of don't like the way the Fully Qualified Name is presented...it gets kind of hidden. Is it possible to use a textbox around it that is readonly (but still allow copy)?

Additionally, and this is admittedly a change in functionality, but can we change the Fully Qualified string presentation to not have spaces around the /. For example, the one in the screenshots should be /TestDomain/TestNS/TestClass as opposed to / TestDomain / TestNS / TestClass. This is because this field is frequently used for copy/paste, but usually people then need to manually remove the spaces.

I've added text field around the Fully Qualified Name. Got rid of the spaces and the text can be copied as well. May I know your thoughts on this? (Please see the screenshots) @Fryguy

@Fryguy
Copy link
Member

Fryguy commented Dec 4, 2024

Looks much better - do you know if that read-only field is still copy-able?

import miqFlash from '../../helpers/miq-flash';

const MiqAeClass = ({ classRecord, fqname }) => {
const formattedFqname = fqname.replace(/\s+/g, '');
Copy link
Member

@Fryguy Fryguy Dec 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this implying that the fqname comes back from the API with spaces?

I was actually expecting any client-side formatting code to just be deleted, so this is surprising.

EDIT: Here's what the backend returns, which is why I'm surprised:

irb(main):001> MiqAeClass.first.fqname
=> "/ManageIQ/AutomationManagement/AnsibleTower/Operations/JobTemplate"

Copy link
Contributor Author

@elsamaryv elsamaryv Dec 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was going through the MiqAeClassController and saw this line of code which is creating those spaces.

Not sure if this line was added intentionally. If it's removed, it may affect the Fully Qualified Name displayed during the creation/editing of Domain, Namespace, Class (and potentially other areas). Could you please confirm if it's fine to remove it? @Fryguy

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we can remove that.

@elsamaryv
Copy link
Contributor Author

Looks much better - do you know if that read-only field is still copy-able?

fqname selection

Yes, it can be selected and copied.

@elsamaryv elsamaryv requested a review from Fryguy December 16, 2024 13:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants