[DB-62]: Design review feedback & improvements

app/src/features/apiClient/screens/environment/components/VariableAutocompletePopover/VariableAutocompletePopover.tsx

@@ -88,7 +88,7 @@ export const VariableAutocompletePopover: React.FC<VariableAutocompleteProps> =
       }
     }, [selectedIndex, show]);
 
-    const shouldShow = show && filteredVariables.length > 0;
+    const shouldShow = show && (filteredVariables.length > 0 || !!activeMode);
 
     // Get the appropriate footer component
     const FooterComponent = activeMode ? activeMode[1].FooterComponent : SecretsDefaultFooter;

app/src/features/apiClient/screens/environment/components/VariableAutocompletePopover/components/EmptyStates.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import LINKS from "config/constants/sub/links";
 import PATHS from "config/constants/sub/paths";
-import { selectAllSecretProviders, selectSelectedProviderId } from "features/apiClient/slices/secrets-manager";
+import { selectAllSecretProviders } from "features/apiClient/slices/secrets-manager";
 import { PRICING } from "features/pricing";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { getUserAuthDetails } from "store/slices/global/user/selectors";
 import "./emptyStates.scss";
-import { ExportOutlined, PlusOutlined } from "@ant-design/icons";
+import { SecretsFooter } from "./SecretsFooter";
 
 interface SecretsEmptyStateProps {
   onClose?: () => void;
@@ -24,22 +24,6 @@ const AutoCompleteSecretEmptyState: React.FC<SecretsEmptyStateProps> = ({ onClos
     PRICING.PLAN_NAMES.API_CLIENT_PROFESSIONAL,
   ].includes(user?.details?.planDetails?.planName || "");
   const navigate = useNavigate();
-  const selectedProviderId = useSelector(selectSelectedProviderId);
-  const activeProvider = selectedProviderId ? providers.find((p) => p.id === selectedProviderId) : null;
-
-  const handleAddAlias = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    navigate(PATHS.SETTINGS.SECRETS.ABSOLUTE);
-    onClose?.();
-  };
-
-  const handleOpenSecrets = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    navigate(PATHS.SETTINGS.SECRETS.ABSOLUTE);
-    onClose?.();
-  };
 
   const handleAddProvider = (e: React.MouseEvent) => {
     e.preventDefault();
@@ -97,26 +81,7 @@ const AutoCompleteSecretEmptyState: React.FC<SecretsEmptyStateProps> = ({ onClos
     );
   }
 
-  return (
-    <div className="secrets-autocomplete-footer">
-      <div className="secrets-no-provider-message">
-        <span className="no-provider-text">No aliases configured</span>
-      </div>
-      <div className="secrets-add-alias-row" onClick={handleAddAlias}>
-        <PlusOutlined className="add-alias-icon" />
-        <span>Add alias</span>
-      </div>
-      {activeProvider && (
-        <div className="secrets-active-instance" onClick={handleOpenSecrets}>
-          <span className="active-instance-label">
-            Active instance:&nbsp;
-            <span className="active-instance-name">{activeProvider.name}</span>
-          </span>
-          <ExportOutlined className="active-instance-link-icon" />
-        </div>
-      )}
-    </div>
-  );
+  return <SecretsFooter showAddAlias={true} />;
 };
 
 export default AutoCompleteSecretEmptyState;

app/src/features/apiClient/screens/environment/components/VariableAutocompletePopover/components/SecretsFooter.tsx

@@ -4,12 +4,14 @@ import { useNavigate } from "react-router-dom";
 import { PlusOutlined, ExportOutlined } from "@ant-design/icons";
 import { selectSelectedProviderId, selectAllSecretProviders } from "features/apiClient/slices/secrets-manager";
 import PATHS from "config/constants/sub/paths";
+import "./emptyStates.scss";
 
 interface SecretsFooterProps {
   onClose?: () => void;
+  showAddAlias?: boolean;
 }
 
-export const SecretsFooter: React.FC<SecretsFooterProps> = ({ onClose }) => {
+export const SecretsFooter: React.FC<SecretsFooterProps> = ({ onClose, showAddAlias = false }) => {
   const navigate = useNavigate();
   const selectedProviderId = useSelector(selectSelectedProviderId);
   const providers = useSelector(selectAllSecretProviders);
@@ -31,15 +33,23 @@ export const SecretsFooter: React.FC<SecretsFooterProps> = ({ onClose }) => {
 
   return (
     <div className="secrets-autocomplete-footer">
+      {showAddAlias && (
+        <div className="secrets-no-alias-message">
+          <span className="no-alias-text">No aliases configured</span>
+        </div>
+      )}
+      <div className="border-line" />
       <div className="secrets-add-alias-row" onMouseDown={handleAddAlias}>
         <PlusOutlined className="add-alias-icon" />
         <span>Add alias</span>
       </div>
       {activeProvider && (
-        <div className="secrets-active-instance" onMouseDown={handleOpenSecrets}>
+        <div className="secrets-active-instance">
           <span className="active-instance-label">
             Active instance:&nbsp;
-            <span className="active-instance-name">{activeProvider.name}</span>
+            <span className="active-instance-name" onMouseDown={handleOpenSecrets}>
+              {activeProvider.name}
+            </span>
           </span>
           <ExportOutlined className="active-instance-link-icon" />
         </div>

app/src/features/apiClient/screens/environment/components/VariableAutocompletePopover/components/emptyStates.scss

@@ -1,7 +1,10 @@
 .secrets-autocomplete-footer {
-  .secrets-no-provider-message {
+  width: 230px !important;
+  padding-top: var(--space-2, 4px);
+
+  .secrets-no-provider-message,
+  .secrets-no-alias-message {
     padding: var(--space-2, 4px) var(--space-5, 12px) 10px;
-    border-bottom: 1px solid var(--requestly-color-white-t-10, rgba(255, 255, 255, 0.06));
     color: var(--requestly-color-text-subtle, #bbb);
     font-family: var(--font-family-default, Inter);
     font-size: var(--font-size-xs, 11px);
@@ -20,10 +23,18 @@
       cursor: pointer;
     }
   }
+
+  .border-line {
+    border-top: 1px solid var(--requestly-color-white-t-10, rgba(255, 255, 255, 0.06));
+  }
+
+  .secrets-no-provider-message {
+    border-bottom: 1px solid var(--requestly-color-white-t-10, rgba(255, 255, 255, 0.06));
+  }
   .secrets-upgrade-button,
   .secrets-add-provider-button {
     display: flex;
-    padding: var(--space-2, 4px) var(--space-5, 12px);
+    padding: var(--space-3, 6px) var(--space-5, 12px);
     align-items: center;
     gap: var(--space-2, 4px);
     justify-content: flex-start;
@@ -36,4 +47,76 @@
     font-weight: 400;
     line-height: 17px;
   }
+
+  .secrets-add-alias-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-6, 12px);
+    padding: var(--space-4, 8px);
+    margin: 0;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.15s ease;
+    color: var(--requestly-color-text-subtle, #bbb);
+    font-family: var(--font-family-default, Inter);
+    font-size: var(--font-size-xs, 11px);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 17px;
+    margin-top: 3px;
+
+    &:hover {
+      background-color: var(--requestly-color-white-t-10);
+    }
+
+    .add-alias-icon {
+      font-size: 12px;
+      font-weight: 400;
+      margin-left: 2px;
+    }
+  }
+
+  .secrets-active-instance {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 4px;
+    padding: var(--space-4, 8px);
+    margin: 0;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--requestly-color-white-t-10);
+    }
+
+    .active-instance-label {
+      color: var(--requeslty-color-text-subtle, #bbb);
+      font-family: var(--font-family-default, Inter);
+      font-size: var(--font-size-xs, 11px);
+      font-style: normal;
+      font-weight: 500;
+      line-height: 17px; /* 154.545% */
+
+      .active-instance-name {
+        color: var(--requestly-color-text-default, #fff);
+        text-align: center;
+        font-family: var(--font-family-default, Inter);
+        font-size: var(--font-size-xs, 11px);
+        font-style: normal;
+        font-weight: 400;
+        line-height: 17px;
+      }
+    }
+
+    .active-instance-link-icon {
+      color: var(--alias-tokens-color-text-subtle, #bbb);
+      text-align: center;
+      font-family: "Material Symbols Outlined";
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+    }
+  }
 }

app/src/features/apiClient/screens/environment/components/VariableAutocompletePopover/variableAutocompletePopover.scss

@@ -18,6 +18,10 @@
     ::-webkit-scrollbar {
       display: none;
     }
+
+    .secrets-autocomplete-fixed-footer {
+      border-top: 1px solid var(--requestly-color-white-t-10, rgba(255, 255, 255, 0.06));
+    }
   }
 
   .ant-popover-arrow {
@@ -120,83 +124,6 @@
   margin-top: var(--space-2, 4px);
 }
 
-.secrets-autocomplete-footer {
-  width: 230px !important;
-  border-top: 1px solid var(--requestly-color-white-t-10, rgba(255, 255, 255, 0.06));
-  margin-top: var(--space-2, 4px);
-  padding-top: var(--space-2, 4px);
-
-  .secrets-add-alias-row {
-    display: flex;
-    align-items: center;
-    gap: var(--space-3, 6px);
-    padding: var(--space-3, 6px) var(--space-2, 4px);
-    margin: 0;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: background-color 0.15s ease;
-    color: var(--requestly-color-text-subtle, #bbb);
-    font-family: var(--font-family-default, Inter);
-    font-size: var(--font-size-xs, 11px);
-    font-style: normal;
-    font-weight: 400;
-    line-height: 17px; /* 154.545% */
-
-    &:hover {
-      background-color: var(--requestly-color-white-t-10);
-    }
-
-    .add-alias-icon {
-      font-size: 12px;
-      font-weight: 400;
-    }
-  }
-
-  .secrets-active-instance {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 4px;
-    padding: var(--space-3, 6px) var(--space-2, 4px);
-    margin: 0;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: background-color 0.15s ease;
-
-    &:hover {
-      background-color: var(--requestly-color-white-t-10);
-    }
-
-    .active-instance-label {
-      color: var(--requeslty-color-text-subtle, #bbb);
-      font-family: var(--font-family-default, Inter);
-      font-size: var(--font-size-xs, 11px);
-      font-style: normal;
-      font-weight: 500;
-      line-height: 17px; /* 154.545% */
-
-      .active-instance-name {
-        color: var(--requestly-color-text-default, #fff);
-        text-align: center;
-        font-family: var(--font-family-default, Inter);
-        font-size: var(--font-size-xs, 11px);
-        font-style: normal;
-        font-weight: 400;
-        line-height: 17px;
-      }
-    }
-
-    .active-instance-link-icon {
-      color: var(--alias-tokens-color-text-subtle, #bbb);
-      text-align: center;
-      font-family: "Material Symbols Outlined";
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 400;
-    }
-  }
-}
-
 .scope-tooltip {
   .ant-tooltip-inner {
     background-color: var(--requestly-color-black) !important;

app/src/features/apiClient/screens/environment/components/VariableAutocompletePopover/variableModeConfig.tsx

@@ -10,11 +10,13 @@ export interface VariableModeConfig {
   separator: string;
 }
 
+const SecretsFooterComponent = () => <SecretsFooter showAddAlias={false} />;
+
 export const SPECIAL_VARIABLE_MODES: Record<string, VariableModeConfig> = {
   [VariableScope.SECRETS]: {
     prefix: "secrets",
     checkFunction: checkIsSecretsVariable,
-    FooterComponent: SecretsFooter,
+    FooterComponent: SecretsFooterComponent,
     separator: ":",
   },
   // Add new variable types here:

app/src/features/settings/secrets-manager/ProviderDetails/ProviderDetails.tsx

@@ -100,16 +100,24 @@ const ProviderDetails: React.FC<ProviderDetailsProps> = ({ onViewKeyValues }) =>
           ) : (
             lastFetched && <span className="last-fetched">Last fetched: {lastFetched}</span>
           )}
-          <RQButton
-            type="primary"
-            loading={isFetching}
-            onClick={handleFetchSecrets}
-            className="fetch-secrets-btn"
-            disabled={!isDirty}
+          <RQTooltip
+            title={!isDirty ? "Enter Alias and ARN/Secret name to fetch" : ""}
+            showArrow={false}
+            placement="topLeft"
           >
-            {isDirty && !isFetching && <span className="unsaved-dot" />}
-            {!isFetching && "Fetch secrets"}
-          </RQButton>
+            <span>
+              <RQButton
+                type="primary"
+                loading={isFetching}
+                onClick={handleFetchSecrets}
+                className="fetch-secrets-btn"
+                disabled={!isDirty}
+              >
+                {isDirty && !isFetching && <span className="unsaved-dot" />}
+                {!isFetching && "Fetch secrets"}
+              </RQButton>
+            </span>
+          </RQTooltip>
         </div>
       </div>
 

app/src/features/settings/secrets-manager/ProviderDetails/providerDetails.scss

@@ -103,8 +103,8 @@
   }
 
   .usage-instructions {
-    color: var(--requestly-color-text-subtle, #bbb);
-    font-size: 12px;
+    color: var(--requestly-color-text-placeholder, #8f8f8f);
+    font-size: 11px;
     margin: 0;
   }
 }
@@ -148,3 +148,9 @@
     font-weight: 400;
   }
 }
+
+.instance-select {
+  .ant-select-selector {
+    background: none !important;
+  }
+}