Fix for named version loader pane list item size and added feedback button

.changeset/breezy-cherries-compete.md

@@ -0,0 +1,19 @@
+---
+"@itwin/changed-elements-react": patch
+---
+
+Added a feedback button to the experimental UI and fixed the spacing on named versions in the new widget list.
+Import moved for experimental UI. As previous way of importing did not work.
+Marked new component as a alpha and and subject to change.
+  ```TypeScript
+  import { NamedVersionSelectorWidget } from "@itwin/changed-elements-react";
+
+  [...]
+
+    return (
+      <VersionCompareContext iModelsClient={iModelsClient}>
+        <NamedVersionSelectorWidget iModel={iModel} />
+      </VersionCompareContext>
+    );
+  }
+  ```

packages/changed-elements-react/src/NamedVersionSelector/NamedVersionSelector.css

@@ -34,6 +34,11 @@
       }
     }
 
+    ._cer_v1_feedback_btn_container {
+      margin-top: auto;
+      text-align: center
+    }
+
     ._cer_v1_active-versions-box {
       min-width: min-content;
       padding: var(--iui-size-s);
@@ -103,11 +108,10 @@
     }
 
     ._cer_v1_named-version-entry {
-      min-height: min-content;
+      min-height: var(--iui-size-3xl);
       padding-block: var(--iui-size-m);
       border: 1px solid var(--iui-color-border-subtle);
       border-radius: 0;
-
       display: grid;
       gap: unset;
       grid-template-columns: subgrid;

packages/changed-elements-react/src/NamedVersionSelector/NamedVersionSelector.tsx

@@ -36,25 +36,28 @@ import {
 import { useQueue } from "./useQueue.js";
 
 import "./NamedVersionSelector.css";
+import { FeedbackButton } from "../widgets/FeedbackButton.js";
 
 interface NamedVersionSelectorWidgetProps {
   iModel: IModelConnection;
   manager?: VersionCompareManager | undefined;
   emptyState?: ReactNode | undefined;
   manageVersions?: ReactNode | undefined;
+  feedbackUrl?: string | undefined;
 }
 
 /**
  * By default, displays Named Version selector, but when {@link VersionCompareManager}
  * is actively comparing versions, presents the comparison results.
+ * @alpha feature is experimental and may change in future releases.
  */
 export function NamedVersionSelectorWidget(props: NamedVersionSelectorWidgetProps): ReactElement {
   const manager = props.manager ?? VersionCompare.manager;
   if (!manager) {
     throw new Error("VersionCompare is not initialized.");
   }
 
-  const { iModel, emptyState, manageVersions } = props;
+  const { iModel, emptyState, manageVersions , feedbackUrl } = props;
 
   const [isComparing, setIsComparing] = useState(manager.isComparing);
 
@@ -77,12 +80,13 @@ export function NamedVersionSelectorWidget(props: NamedVersionSelectorWidgetProp
 
   if (!isComparing) {
     return (
-      <NamedVersionSelector
-        iModel={iModel}
-        manager={manager}
-        emptyState={emptyState}
-        manageVersions={manageVersions}
-      />
+        <NamedVersionSelector
+          iModel={iModel}
+          manager={manager}
+          emptyState={emptyState}
+          manageVersions={manageVersions}
+          feedbackUrl={feedbackUrl}
+        />
     );
   }
 
@@ -128,6 +132,7 @@ interface NamedVersionSelectorProps {
   manager: VersionCompareManager;
   emptyState?: ReactNode | undefined;
   manageVersions?: ReactNode | undefined;
+  feedbackUrl?: string | undefined;
 }
 
 function NamedVersionSelector(props: NamedVersionSelectorProps): ReactElement {
@@ -136,7 +141,7 @@ function NamedVersionSelector(props: NamedVersionSelectorProps): ReactElement {
     throw new Error("V2 Client is not initialized in given context.");
   }
 
-  const { iModel, manager, emptyState, manageVersions } = props;
+  const { iModel, manager, emptyState, manageVersions, feedbackUrl } = props;
 
   const iTwinId = iModel.iTwinId as string;
   const iModelId = iModel.iModelId as string;
@@ -215,6 +220,9 @@ function NamedVersionSelector(props: NamedVersionSelectorProps): ReactElement {
             />
           )
       }
+      <div className="_cer_v1_feedback_btn_container">
+        {feedbackUrl && <FeedbackButton feedbackUrl={feedbackUrl} />}
+      </div>
     </Widget>
   );
 }
@@ -447,23 +455,23 @@ function NamedVersionSelectorLoaded(props: NamedVersionSelectorLoadedProps): Rea
   }
 
   return (
-    <List className="_cer_v1_named-version-list">
-      <Sticky className="_cer_v1_named-version-list-header">
-        <TextEx weight="semibold">
-          {t("VersionCompare:versionCompare.previousVersions")}
-        </TextEx>
-        {manageVersions}
-      </Sticky>
-      <namedVersionSelectorContext.Provider
-        value={{ processResults, viewResults, initialLoad, checkStatus }}
-      >
-        {
-          props.entries.map((entry) => (
-            <NamedVersionListEntry key={entry.namedVersion.id} entry={entry} />
-          ))
-        }
-      </namedVersionSelectorContext.Provider>
-    </List>
+      <List className="_cer_v1_named-version-list">
+        <Sticky className="_cer_v1_named-version-list-header">
+          <TextEx weight="semibold">
+            {t("VersionCompare:versionCompare.previousVersions")}
+          </TextEx>
+          {manageVersions}
+        </Sticky>
+        <namedVersionSelectorContext.Provider
+          value={{ processResults, viewResults, initialLoad, checkStatus }}
+        >
+          {
+            props.entries.map((entry) => (
+              <NamedVersionListEntry key={entry.namedVersion.id} entry={entry} />
+            ))
+          }
+        </namedVersionSelectorContext.Provider>
+      </List>
   );
 }
 

packages/changed-elements-react/src/index.ts

@@ -37,3 +37,4 @@ export type {
 } from "./widgets/comparisonJobWidget/models/ComparisonJobModels.js";
 export { ChangedElementsListComponent } from "./widgets/EnhancedElementsInspector.js";
 export * from "./widgets/VersionCompareSelectWidget.js";
+export { NamedVersionSelectorWidget } from "./NamedVersionSelector/NamedVersionSelector.js";

packages/changed-elements-react/src/widgets/FeedbackButton.scss

@@ -4,7 +4,8 @@
 *--------------------------------------------------------------------------------------------*/
 
 .changed-elems-feedback-btn {
-  margin: 0 auto 50px;
+  width: fit-content;
+  margin: 0 auto 10px;
   overflow: hidden;
   border-radius: 50px;
   display: flex;

packages/test-app-frontend/src/App/ITwinJsApp/ITwinJsApp.tsx

@@ -11,9 +11,9 @@ import {
 import {
   ChangedElementsWidget,
   ComparisonJobClient, ITwinIModelsClient, VersionCompare, VersionCompareContext,
-  VersionCompareFeatureTracking
+  VersionCompareFeatureTracking,
+  NamedVersionSelectorWidget
 } from "@itwin/changed-elements-react";
-import { NamedVersionSelectorWidget } from "@itwin/changed-elements-react/experimental";
 import { Id64 } from "@itwin/core-bentley";
 import {
   AuthorizationClient, BentleyCloudRpcManager, BentleyCloudRpcParams, IModelReadRpcInterface, IModelTileRpcInterface
@@ -303,7 +303,7 @@ class MainFrontstageItemsProvider implements UiItemsProvider {
       return [];
     }
 
-    if (!runExperimental) {
+    if (runExperimental) {
       return [
         {
           id: "NamedVersionSelector",
@@ -313,6 +313,7 @@ class MainFrontstageItemsProvider implements UiItemsProvider {
               iModel={iModel}
               manager={VersionCompare.manager}
               manageVersions={<ManageNamedVersions />}
+              feedbackUrl="https://example.com"
             />
           ),
         },

packages/test-app-frontend/src/environment.ts

@@ -26,6 +26,6 @@ export function applyUrlPrefix(base: string, url = ""): string {
 
 export const clientId: string = import.meta.env.VITE_CLIENT_ID;
 export const urlPrefix: string = import.meta.env.VITE_URL_PREFIX;
-export const runExperimental: boolean = import.meta.env.VITE_RUN_EXPERIMENTAL;
+export const runExperimental: boolean = import.meta.env.VITE_RUN_EXPERIMENTAL === "true";
 export const usingLocalBackend: boolean = import.meta.env.VITE_USE_LOCAL_BACKEND === "true";
 export const localBackendPort: number = Number.parseInt(import.meta.env.VITE_LOCAL_BACKEND_PORT, 10);