Function AccessPane

frontend/src/react/components/sql-editor/AccessPane.tsx:42–403

()

];

export function AccessPane() {
  const { t } = useTranslation();

  const searchMyAccessGrants = useAppStore(
    (state) => state.searchMyAccessGrants
  );
  const fetchDatabases = useAppStore((state) => state.fetchDatabases);
  const getOrFetchDatabaseByName = useAppStore(
    (state) => state.getOrFetchDatabaseByName
  );
  const fetchIssueByName = useAppStore((state) => state.fetchIssueByName);
  const highlightAccessGrantName = useSQLEditorStore(
    (s) => s.highlightAccessGrantName
  );
  const setHighlightAccessGrantName = useSQLEditorStore(
    (s) => s.setHighlightAccessGrantName
  );

  const [showDrawer, setShowDrawer] = useState(false);
  const [loading, setLoading] = useState(false);
  const [pendingCreate, setPendingCreate] = useState<AccessGrant | undefined>(
    undefined
  );
  const [accessGrantList, setAccessGrantList] = useState<AccessGrant[]>([]);
  const [nextPageToken, setNextPageToken] = useState("");
  const nextPageTokenRef = useRef(nextPageToken);
  nextPageTokenRef.current = nextPageToken;
  const [issueByGrantName, setIssueByGrantName] = useState<Map<string, Issue>>(
    new Map()
  );
  const [useSmallLayout, setUseSmallLayout] = useState(false);

  const containerRef = useRef<HTMLDivElement>(null);

  const [searchParams, setSearchParams] = useState<SearchParams>({
    query: "",
    scopes: DEFAULT_SCOPES,
  });

  const projectName = useSQLEditorEditorState((s) => s.project);

  const resolvedProject = useAppProject(projectName as string);
  const project = projectName ? resolvedProject : undefined;

  const hasJITFeature = useSQLEditorFeature(PlanFeature.FEATURE_JIT);

  // Build scope options for AdvancedSearch (React-compatible, no Vue renderers)
  const scopeOptions = useMemo((): ScopeOption[] => {
    return [
      {
        id: "status",
        title: t("common.status"),
        description: t("sql-editor.access-search.scope.status.description"),
        allowMultiple: true,
        options: [
          {
            value: AccessGrant_Status[AccessGrant_Status.ACTIVE],
            keywords: ["active"],