New `ReleaseVersion` component into `HelpButton` #310

hoshinotsuyoshi · 2024-12-18T10:10:38Z

Summary

Example output for cliVersion:

Released version:
v0.0.11 (2024-12-19)
Unreleased version:
v0.0.11 + 0d6169a (2024-12-19)

Explanation:

"Released version" means the current Git hash matches a tagged release.

"Unreleased version" includes a short Git hash prefix to indicate changes since the last release.

Related Issue

Changes

b400891 : feat(cli): inject new VITE_CLI_VERSION_* env vars into Vite build process
6fdbbdd : feat: add CliVersionProvider and schema definition for CLI version context
343e01d : ✨ New ReleaseVersion component into HelpButton

Testing

Manually tested.

Other Information

In pull requests, the commit hash displayed in the HelpButton may differ from the hash of the latest commit. This happens because when using on: pull_request in GitHub Actions, a special merge is performed before the code is checked out.

…rocess - Introduced `scripts/set-env.mjs` to dynamically set `VITE_CLI_VERSION_*` environment variables during build and dev processes. - `VITE_CLI_VERSION_VERSION`: Package version from `package.json`. - `VITE_CLI_VERSION_GIT_HASH`: Current Git commit hash. - `VITE_CLI_VERSION_IS_RELEASED_GIT_HASH`: Flag indicating if the commit matches the latest tagged release. - `VITE_CLI_VERSION_DATE`: Commit date or fallback to the current date.

…context

- Added `ReleaseVersion` component: - Displays the current CLI version, including: - Released version (e.g., `v0.0.11 (2024-12-19)`). - Unreleased version with short Git hash (e.g., `v0.0.11 + 0d6169a (2024-12-19)`). - Fetches version information from the `CliVersionProvider`. - Updated `App.tsx`: - Initialized `cliVersion` using `import.meta.env.VITE_CLI_VERSION_*` environment variables. - Wrapped `ERDRenderer` with `CliVersionProvider` to provide version context globally.

frontend/packages/cli/package.json

    "command:build": "node ./dist-cli/bin/cli.js erd build --input fixtures/input.schema.rb --format schemarb",
    "cp:prism": "cp ../db-structure/node_modules/@ruby/prism/src/prism.wasm ./dist-cli/bin/prism.wasm",
    "dev": "pnpm command:build && cp dist/schema.json public/ && pnpm run '/^dev:.*/'",
-    "dev:app": "vite",
+    "dev:app": "node scripts/set-env.mjs vite",


hoshinotsuyoshi · 2024-12-19T00:20:59Z

frontend/packages/erd-core/src/schemas/index.ts

+export * from './cliVersion'
+export * from './queryParam'
+export * from './showMode'


I only wanted the cliVersion here, but I'm also exporting the others for consistency

hoshinotsuyoshi · 2024-12-19T00:22:03Z

frontend/packages/erd-core/src/providers/index.ts

I created a new directory, but is it appropriate? 💭

This commit removes the 'set-env.mjs' script and integrates environment variable setup directly within the Vite build process using a custom Vite plugin. This change simplifies the build and development commands by removing the dependency on the external environment setup script.

MH4GF

Great!!
I've wrote some comments!

MH4GF · 2024-12-19T05:00:43Z

frontend/packages/cli/vite.config.ts

@@ -25,7 +26,7 @@ export default defineConfig({
      ],
    },
  },
-  plugins: [react(), tsconfigPaths()],
+  plugins: [react(), tsconfigPaths(), setEnvPlugin()],


MH4GF · 2024-12-19T05:03:03Z

...end/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/ReleaseVersion.module.css

+.cliVersion {
+  padding: var(--spacing-2);
+}
+
+.cliVersionInner {
+  border-radius: var(--border-radius-full);
+  background: var(--pane-muted-background);
+  padding: var(--spacing-1) var(--spacing-2);
+  color: var(--global-mute-text);
+  font-family: var(--code-font);
+  font-size: var(--font-size-1);
+}


nits: If we use margin, it would be simple to implement without nesting divs.

Suggested change

.cliVersion {

padding: var(--spacing-2);

}

.cliVersionInner {

border-radius: var(--border-radius-full);

background: var(--pane-muted-background);

padding: var(--spacing-1) var(--spacing-2);

color: var(--global-mute-text);

font-family: var(--code-font);

font-size: var(--font-size-1);

}

.cliVersion {

margin: var(--spacing-2);

border-radius: var(--border-radius-full);

background: var(--pane-muted-background);

padding: var(--spacing-1) var(--spacing-2);

color: var(--global-mute-text);

font-family: var(--code-font);

font-size: var(--font-size-1);

}

hoshinotsuyoshi · 2024-12-19T06:28:37Z

frontend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/ReleaseVersion.tsx

+      <div className={styles.cliVersionInner}>
+        <span>{`v${cliVersion.version}`}</span>
+        <span>
+          {' '}
+          {cliVersion.isReleasedGitHash ||
+            `+ ${cliVersion.gitHash.slice(0, 7)} `}
+        </span>
+        <span>{cliVersion.date.length > 0 && ` (${cliVersion.date})`}</span>
+      </div>


Suggested change

<div className={styles.cliVersionInner}>

{`v${cliVersion.version}`}



{' '}

{cliVersion.isReleasedGitHash ||

`+ ${cliVersion.gitHash.slice(0, 7)} `}



{cliVersion.date.length > 0 && ` (${cliVersion.date})`}

</div>

{`v${cliVersion.version}`}



{' '}

{cliVersion.isReleasedGitHash ||

`+ ${cliVersion.gitHash.slice(0, 7)} `}



{cliVersion.date.length > 0 && ` (${cliVersion.date})`}

hoshinotsuyoshi self-assigned this Dec 18, 2024

hoshinotsuyoshi deployed to preview - @liam-hq/erd-sample December 18, 2024 10:10 — with GitHub Actions View deployment

hoshinotsuyoshi deployed to preview - @liam-hq/erd-sample December 18, 2024 11:03 — with GitHub Actions View deployment

hoshinotsuyoshi deployed to preview - @liam-hq/erd-sample December 18, 2024 11:44 — with GitHub Actions View deployment

hoshinotsuyoshi deployed to preview - @liam-hq/erd-sample December 18, 2024 12:52 — with GitHub Actions View deployment

hoshinotsuyoshi force-pushed the erd-display-cli-version branch from 746a283 to 96598ab Compare December 18, 2024 12:58

hoshinotsuyoshi deployed to preview - @liam-hq/erd-sample December 18, 2024 12:58 — with GitHub Actions View deployment

hoshinotsuyoshi added 2 commits December 19, 2024 08:56

feat: add CliVersionProvider and schema definition for CLI version …

6fdbbdd

…context

hoshinotsuyoshi force-pushed the erd-display-cli-version branch from 96598ab to 4027944 Compare December 19, 2024 00:11

hoshinotsuyoshi deployed to preview - @liam-hq/erd-sample December 19, 2024 00:11 — with GitHub Actions View deployment

hoshinotsuyoshi changed the title ~~ERD display version~~ New ReleaseVersion component into HelpButton Dec 19, 2024

hoshinotsuyoshi changed the title ~~New ReleaseVersion component into HelpButton~~ New ReleaseVersion component into HelpButton Dec 19, 2024

hoshinotsuyoshi force-pushed the erd-display-cli-version branch from 4027944 to 343e01d Compare December 19, 2024 00:18

hoshinotsuyoshi deployed to preview - @liam-hq/erd-sample December 19, 2024 00:18 — with GitHub Actions View deployment

hoshinotsuyoshi commented Dec 19, 2024

View reviewed changes

frontend/packages/erd-core/src/providers/index.ts Outdated

Copy link

Member Author

hoshinotsuyoshi Dec 19, 2024

Choose a reason for hiding this comment

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

I created a new directory, but is it appropriate? 💭

hoshinotsuyoshi marked this pull request as ready for review December 19, 2024 00:27

hoshinotsuyoshi requested a review from a team as a code owner December 19, 2024 00:27

hoshinotsuyoshi requested review from FunamaYukina, junkisai, MH4GF and sasamuku and removed request for a team December 19, 2024 00:27

hoshinotsuyoshi added 2 commits December 19, 2024 12:12

Remove duplicate CliVersionProvider calling

f9dc614

Redundant env var defining

eaf40bd

hoshinotsuyoshi deployed to preview - @liam-hq/erd-sample December 19, 2024 03:15 — with GitHub Actions View deployment

hoshinotsuyoshi marked this pull request as draft December 19, 2024 04:27

hoshinotsuyoshi deployed to preview - @liam-hq/erd-sample December 19, 2024 04:43 — with GitHub Actions View deployment

hoshinotsuyoshi force-pushed the erd-display-cli-version branch from 847ce71 to 924806a Compare December 19, 2024 04:48

hoshinotsuyoshi deployed to preview - @liam-hq/erd-sample December 19, 2024 04:48 — with GitHub Actions View deployment

hoshinotsuyoshi marked this pull request as ready for review December 19, 2024 04:52

MH4GF approved these changes Dec 19, 2024

View reviewed changes

hoshinotsuyoshi commented Dec 19, 2024

View reviewed changes

Refactor ReleaseVersion component to reduce DOM nesting

56217fa

hoshinotsuyoshi deployed to preview - @liam-hq/erd-sample December 19, 2024 06:33 — with GitHub Actions View deployment

hoshinotsuyoshi added this pull request to the merge queue Dec 19, 2024

Merged via the queue into main with commit 9dfa9ec Dec 19, 2024
12 checks passed

hoshinotsuyoshi deleted the erd-display-cli-version branch December 19, 2024 06:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New `ReleaseVersion` component into `HelpButton` #310

New `ReleaseVersion` component into `HelpButton` #310

hoshinotsuyoshi commented Dec 18, 2024 •

edited

Loading

This comment was marked as outdated.

hoshinotsuyoshi Dec 19, 2024

hoshinotsuyoshi Dec 19, 2024

MH4GF left a comment

MH4GF Dec 19, 2024

MH4GF Dec 19, 2024

hoshinotsuyoshi Dec 19, 2024

hoshinotsuyoshi Dec 19, 2024

New ReleaseVersion component into HelpButton #310

New ReleaseVersion component into HelpButton #310

Conversation

hoshinotsuyoshi commented Dec 18, 2024 • edited Loading

Summary

Related Issue

Changes

Testing

Other Information

This comment was marked as outdated.

hoshinotsuyoshi Dec 19, 2024

Choose a reason for hiding this comment

hoshinotsuyoshi Dec 19, 2024

Choose a reason for hiding this comment

MH4GF left a comment

Choose a reason for hiding this comment

MH4GF Dec 19, 2024

Choose a reason for hiding this comment

MH4GF Dec 19, 2024

Choose a reason for hiding this comment

hoshinotsuyoshi Dec 19, 2024

Choose a reason for hiding this comment

hoshinotsuyoshi Dec 19, 2024

Choose a reason for hiding this comment

New `ReleaseVersion` component into `HelpButton` #310

New `ReleaseVersion` component into `HelpButton` #310

hoshinotsuyoshi commented Dec 18, 2024 •

edited

Loading