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

DOP-5133: Dark mode bug on Atlas Admin API docs #70

Merged
merged 9 commits into from
Nov 7, 2024
Merged

Conversation

biancalaube
Copy link
Collaborator

@biancalaube biancalaube commented Oct 30, 2024

Stories/Links:

DOP-5133

Current behavior

current link
Screenshot 2024-10-30 at 10 33 58 AM

Staged Behavior

Screenshot 2024-10-30 at 11 34 05 AM

To build

To build locally and review, here are helpful steps:


Ensure Artifactory credentials are set up and set to NPM_BASE_64_AUTH and NPM_EMAIL env variables. This should be similar to the setup on Snooty. Below are the instructions to work with Redoc locally with custom MongoDB components, such as the Consistent Nav:

  1. checkout branch DOP-5133 in git
  2. In redoc/root folder of this fork, run npm install.
  3. In redoc/cli folder, run npm install.
  4. In redoc/cli folder, run: npm link ../ ../node_modules/react/ ../node_modules/styled-components/. This will link certain CLI dependencies to be compatible with the local instance and fork of Redoc.
  5. In redoc/root folder, run: npm run bundle. This will create bundled files needed by the CLI / needed to run the CLI.
  6. Run the following command to see a full example built into a local file called redoc-static.html in your root directory.
node cli/index.js build https://mongodb-mms-prod-build-server.s3.amazonaws.com/openapi/7f44860f3d20f152e7f187fe498a104aa7a9e3ba.json  --options options.json
  1. Once built, use your browser to view the static html by putting the path to that file in your browser as a url

Note

And for this ticket, add #tag/Data-Federation/operation/createOneFederatedDatabaseInOneProject to the end of the path to see the section with the table where the bug was

Updates

made changes so this ticket also acounts for DOP-5140 , so to look for the update table add the following tag to the html path #tag/Database-Users/operation/createDatabaseUser

@biancalaube biancalaube requested a review from mmeigs October 31, 2024 20:37
@biancalaube biancalaube requested a review from mmeigs November 4, 2024 15:22
@biancalaube
Copy link
Collaborator Author

@seungpark @mmeigs , I've made updates so it also fixes the bugs from DOP-5140. Please let me know if you have any questions!

@biancalaube biancalaube requested a review from mmeigs November 6, 2024 22:05
Copy link
Collaborator

@seungpark seungpark left a comment

Choose a reason for hiding this comment

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

minor comment below but changes LGTM 🙏

Comment on lines 8 to 12
const lightModeSVG =
'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjMDEwMTAxIiBkPSJNNDU5LjcgMjMzLjRsLTkwLjUgOTAuNWMtNTAgNTAtMTMxIDUwLTE4MSAwIC03LjktNy44LTE0LTE2LjctMTkuNC0yNS44bDQyLjEtNDIuMWMyLTIgNC41LTMuMiA2LjgtNC41IDIuOSA5LjkgOCAxOS4zIDE1LjggMjcuMiAyNSAyNSA2NS42IDI0LjkgOTAuNSAwbDkwLjUtOTAuNWMyNS0yNSAyNS02NS42IDAtOTAuNSAtMjQuOS0yNS02NS41LTI1LTkwLjUgMGwtMzIuMiAzMi4yYy0yNi4xLTEwLjItNTQuMi0xMi45LTgxLjYtOC45bDY4LjYtNjguNmM1MC01MCAxMzEtNTAgMTgxIDBDNTA5LjYgMTAyLjMgNTA5LjYgMTgzLjQgNDU5LjcgMjMzLjR6TTIyMC4zIDM4Mi4ybC0zMi4yIDMyLjJjLTI1IDI0LjktNjUuNiAyNC45LTkwLjUgMCAtMjUtMjUtMjUtNjUuNiAwLTkwLjVsOTAuNS05MC41YzI1LTI1IDY1LjUtMjUgOTAuNSAwIDcuOCA3LjggMTIuOSAxNy4yIDE1LjggMjcuMSAyLjQtMS40IDQuOC0yLjUgNi44LTQuNWw0Mi4xLTQyYy01LjQtOS4yLTExLjYtMTgtMTkuNC0yNS44IC01MC01MC0xMzEtNTAtMTgxIDBsLTkwLjUgOTAuNWMtNTAgNTAtNTAgMTMxIDAgMTgxIDUwIDUwIDEzMSA1MCAxODEgMGw2OC42LTY4LjZDMjc0LjYgMzk1LjEgMjQ2LjQgMzkyLjMgMjIwLjMgMzgyLjJ6Ii8+PC9zdmc+Cg==';
const decodedSVG = Buffer.from(lightModeSVG, 'base64').toString('utf-8');
const modifiedSVG = decodedSVG.replace('fill="#010101"', 'fill="#ffffff"');
const darkModeSVG = Buffer.from(modifiedSVG, 'utf-8').toString('base64');
Copy link
Collaborator

Choose a reason for hiding this comment

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

nit: I think I'd prefer for us to just use the hardcoded base64 strings as constants rather than creating them each time. Not really blocking, just wondering why you decided on this rather than two strings?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I chose this since I needed to convert it to utf-8 to convert the color but give me one sec and I can try to just get the two strings

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@mmeigs , i updaed to base64!

@biancalaube biancalaube requested a review from mmeigs November 7, 2024 16:50
Copy link
Collaborator

@mmeigs mmeigs left a comment

Choose a reason for hiding this comment

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

Just spun it up. Looks good!

@biancalaube biancalaube merged commit 57dbc7b into main Nov 7, 2024
2 checks passed
@biancalaube biancalaube deleted the DOP-5133 branch November 7, 2024 22:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants