I had hoped that applying the Indigo theme would just fix this diagonal line that was introduced to the sign in page in Olive…but apparently not.
As that “MySiteNameIsRatherLong” implies, my site name is long enough that it gets chopped by this line. I know almost nothing about HTML and style sheets, so can someone point out where to edit in a tutor indigo theme plugin to get rid of that diagonal line that chops my site name?
I think that is the problem with frontend-app-authn, not the indigo theme.
You can change the line “Start learning with my …” to something shorter, it’s in i18n.
If you want to keep the line and change CSS, you must have some experience with CSS, Depending on the text length you could reduce the font-size, if your site name contains white spaces I think it will break to a new line.
Thank you. But my site name does not contain whitespaces (and it wouldn’t be appropriate to add them, because then it wouldn’t be the name that students recognize). And the issue isn’t the “Start learning with” portion, that’s fine and wraps, it’s that the site name is too long.
I have someone who may be able to help with the CSS to fix this, but what file specifically needs to be edited for changes to appear?
Thank you again! I have one last question, if I may: how does one apply these changes in the context of tutor?
E.g. I know how to fork and customize a edx-platform repository, and then running tutor images build openedx --build-arg EDX_PLATFORM_REPOSITORY=<FORK_URL.GIT> --build-arg EDX_PLATFORM_VERSION=<TAG_VERSION>. But I don’t know how I’d apply a custom frontend-app-authn repo change. (Unless this change can also be affected by adding something to the indigo fork.)
You can read more at tutor-mfe
you add this to your config.yml
MFE_AUTHN_MFE_APP : {
"name": "authn",
"repository": "your_fork_repo",
"port": 2001,
"version": "me/my-custom-branch", # optional
}
rebuild mfe image.
I read the tutor-mfe documentation you mentioned, and I did the following:
Issued tutor config save --set MFE_AUTHN_MFE_APP=null and confirmed the new authn UI goes away, and it reverts to the old form (but I don’t know what else I’m losing by doing that)
Forked frontend-app-authn and made a branch “test_branch”. Edited src/base-component/LargeLayout.jsx to change “skewX(171.6)” to “skewX(180)” just to see if I could see the diagonal line turn vertical. Checked in the branch and pushed to the server.
Added the following at the bottom of my /home/ubuntu/.local/share/tutor/config.yml:
MFE_AUTHN_MFE_APP : {
"name": "authn",
"repository": "https://github.com/username/frontend-app-authn",
"port": 2001,
"version": "origin/test_branch", #This was probably wrong?
}
tutor images build mfe
(That succeeded)
tutor local launch
I can’t remember whether that succeeded or not. I think it did, and then I didn’t see any change, so I went looking for whether I saw the build or launch pulling from my repository.
I ultimately got myself into a weird state where I did see it using my repo, but it was continuously failing with the command git clone https://github.com/username/frontend-app-authn.git --branch origin/test_branch --depth 1 . with fatal: Remote branch origin/test_branch not found in upstream origin.
This is the point at which I knew I should have put just test_branch instead of origin/test_branch. But now I’m in a state where even if I change it to "version": "origin/test_branch" in /home/ubuntu/.local/share/tutor/config.yml it just kept erroring out until I removed that MFE_AUTHN_MFE_APP again with tutor config save --set MFE_AUTHN_MFE_APP=null. And now when I try to put it back, it doesn’t seem to ever be picking up the new branch path when I do tutor images build mfe, as it just thinks everything’s cached and there’s no need for a rebuild.
So what did I do wrong (besides getting the branch name wrong), and how can I correct it?
Aside: I know I’m probably supposed to put the thing
config = {
"defaults": {
"MYMFE_MFE_APP": {
"name": "mymfe",
"repository": "https://github.com/myorg/mymfe",
"port": 2001,
"version": "me/my-custom-branch", # optional
}
}
}
From the tutor-mfe documentation into a plugin or something, instead of editing config.yml. But as per usual, I have no idea how to translate that into a tutor plugin, if that’s what I’m expected to do. And since it seemed to cause some sort of reaction (even if it was an error) by modifying config.yml directly, and because that’s what you said to edit, I thought that would be ok.
“version” is the branch name that you created and modified.
If I forked the auth mfe and created a branch from open-release/olive.4 and named it apple1 then I would use apple1 as the version.
and make sure “repository” is public.
Do tutor config save every time you make changes to the config.yml.
Try
git clone {your_repository} --branch {your_branch} --depth 1
in Terminal, if it runs without errors then you can do tutor images build mfe
That’s interesting. I could have swore that it used to be the case that if you edited config.yml, and did tutor config save, it would just smash and delete all your changes in config.yml that didn’t come from plugins… But yes, you’re right, it does preserve my edits.
And yes, I tried the git clone manually, which is how I knew that it should be just test_branch rather than origin/test_branch (since the former was succeeding manually, but the latter wasn’t).
So I did the config save, and then tutor images build mfe and I did see it pulling the changes from my repo and applying them! Thanks for your help!
(The changes caused the line to go vertical and appear briefly before erroring out with “An unexpected error occurred. Please click the button below to refresh the page.” and the following error in the browser console:
I eventually realized that this error was due to the fact that I forked and applied the master branch, rather than the olive.3 tag. E.g. I tried the unmodified GitHub - openedx/frontend-app-authn: Open edX micro-frontend application for new login and registration experience. at master, and it gave the same error.
)
So theoretically I can iterate now. But in practice, I committed a new change to my repository, did the tutor config save again, and did tutor images build mfe again, but this time it once again went back to just using the cache and not re-pulling the changes from my repo. I tried re-editing the config.yml and re-tutor config save-ing, but it keeps just using the cache. How can I force it to re-pull from the repository every time?
I’m not sure how to delete cache for specific mfe.
Maybe you could try to change the branch name and ajust your config.
For example, you can rename your_branch to your_branch_1 and adjust the version on the config and do tutor config save
@regis could you please let us know the correct way to force tutor images build mfe to pick up a new commit to a git branch that has forked from frontend-app-authn?
I was able to ultimately get this working on Olive.3 (current as of today) as follows:
git clone https://github.com/myusername/frontend-app-authn my-frontend-app-authn
cd my-frontend-app-authngit checkout open-release/olive.3 (this needs to match your version you’re running)git checkout -b my_o3_changessrc/base-component/LargeLayout.jsx to remove the entire <div className="col-md-3 bg-white p-0"> until the matching </div>)git commit -am "delete the stupid diagonal line that breaks UI"git push --set-upstream origin my_o3_changesnano /home/ubuntu/.local/share/tutor/config.yml (or wherever the file is saved. The path will be output when you do a tutor config save) and add the below to the bottom of the fileMFE_AUTHN_MFE_APP : {
"name": "authn",
"repository": "https://github.com/myusername/frontend-app-authn",
"port": 2001,
"version": "my_o3_changes",
}
tutor config savetutor images build mfetutor local launchAfter I did that, I didn’t see the diagonal line anymore!
Ticket so that hopefully this won’t be necessary in the future is here: Regression: Olive UI breaks for long site names · Issue #929 · openedx/frontend-app-authn · GitHub
The solution you described is the way to do it – at least in Olive. In Palm you will have to implement a Tutor plugin to build your MFE from a custom fork.
It’s now time for me to try and fight this in Palm. Can you expand on what the above statement means or where there’s documentation on how to do that? Thank you.
It’s all explained here: GitHub - overhangio/tutor-mfe: This plugin makes it possible to easily add micro frontend (MFE) applications on top of an Open edX platform that runs with Tutor.
So to conclude this thread, what I had to do on Palm was:
fork GitHub - openedx/frontend-app-authn: Open edX micro-frontend application for new login and registration experience. to be https://github.com/username/frontend-app-authn.git
modify src/base-component/LargeLayout.jsx in the fork per the above.
Make tutor python plugin:
nano ~/.local/share/tutor-plugins/disable-diag.py
and add
from tutormfe.hooks import MFE_APPS
@MFE_APPS.add()
def _add_my_mfe(mfes):
mfes["authn"] = {
"repository": "https://github.com/username/frontend-app-authn.git",
"port": 2001,
"version": "my_branch_name",
}
return mfes
tutor plugins enable disable-diag
tutor config save
tutor images build mfe
tutor local launch
And then I saw the login page no longer using the diagonal line which breaks for a long site name.