Hide the git-repo form in the create project modal [INS-1900] (#9558)

* Hide the git-repo form in the create project modal when the git-sync feature is disabled, remove redundant props * Fix type error
2026-05-19 06:12:37 -04:00 · 2026-01-12 17:22:01 +08:00
parent 574dd655a3
commit 61b129a89c
9 changed files with 25 additions and 63 deletions
--- a/packages/insomnia/src/routes/organization.$organizationId.project.$projectId._index.tsx
+++ b/packages/insomnia/src/routes/organization.$organizationId.project.$projectId._index.tsx
@@ -519,7 +519,7 @@ const Component = () => {
  const { presence } = useInsomniaEventStreamContext();
  const storageRuleFetcher = useStorageRulesLoaderFetcher({ key: `storage-rule:${organizationId}` });
  const createNewWorkspaceFetcher = useWorkspaceNewActionFetcher();
-  const { billing, features } = useOrganizationPermissions();
+  const { billing } = useOrganizationPermissions();

  useEffect(() => {
    if (!isScratchpadOrganizationId(organizationId)) {
@@ -668,7 +668,6 @@ const Component = () => {
  };

  const canCreateMockServer = activeProject?._id;
-  const isGitSyncEnabled = features.gitSync.enabled;

  const createInProjectActionList: {
    id: string;
@@ -934,7 +933,6 @@ const Component = () => {
                              organizationId={organizationId}
                              project={item}
                              storageRules={storageRules}
-                              isGitSyncEnabled={isGitSyncEnabled}
                            />
                          )}
                        </div>
@@ -1332,7 +1330,7 @@ const Component = () => {
            ) : projects.length ? (
              <NoSelectedProjectView />
            ) : (
-              <NoProjectView isGitSyncEnabled={isGitSyncEnabled} storageRules={storageRules} />
+              <NoProjectView storageRules={storageRules} />
            )}
          </Panel>
        </PanelGroup>
@@ -1341,7 +1339,6 @@ const Component = () => {
            isOpen={isNewProjectModalOpen}
            onOpenChange={setIsNewProjectModalOpen}
            storageRules={storageRules}
-            isGitSyncEnabled={isGitSyncEnabled}
          />
        )}
        {isUpdateProjectModalOpen && (
@@ -1351,7 +1348,6 @@ const Component = () => {
            project={activeProject}
            gitRepository={activeProjectGitRepository || undefined}
            storageRules={storageRules}
-            isGitSyncEnabled={isGitSyncEnabled}
          />
        )}
        {activeProject && newWorkspaceModalState?.isOpen && (
--- a/packages/insomnia/src/routes/organization.$organizationId.project._index.tsx
+++ b/packages/insomnia/src/routes/organization.$organizationId.project._index.tsx
@@ -497,7 +497,7 @@ const Component = () => {
  const { presence } = useInsomniaEventStreamContext();
  const storageRuleFetcher = useStorageRulesLoaderFetcher({ key: `storage-rule:${organizationId}` });
  const createNewWorkspaceFetcher = useWorkspaceNewActionFetcher();
-  const { billing, features } = useOrganizationPermissions();
+  const { billing } = useOrganizationPermissions();

  useEffect(() => {
    if (!isScratchpadOrganizationId(organizationId)) {
@@ -651,7 +651,6 @@ const Component = () => {
  };

  const canCreateMockServer = activeProject?._id;
-  const isGitSyncEnabled = features.gitSync.enabled;

  const createInProjectActionList: {
    id: string;
@@ -901,7 +900,6 @@ const Component = () => {
                              organizationId={organizationId}
                              project={item}
                              storageRules={storageRules}
-                              isGitSyncEnabled={isGitSyncEnabled}
                            />
                          )}
                        </div>
@@ -1297,7 +1295,7 @@ const Component = () => {
                </div>
              </div>
            ) : (
-              <NoProjectView isGitSyncEnabled={isGitSyncEnabled} storageRules={storageRules} />
+              <NoProjectView storageRules={storageRules} />
            )}
          </Panel>
        </PanelGroup>
@@ -1306,7 +1304,6 @@ const Component = () => {
            isOpen={isNewProjectModalOpen}
            onOpenChange={setIsNewProjectModalOpen}
            storageRules={storageRules}
-            isGitSyncEnabled={isGitSyncEnabled}
          />
        )}
        {isUpdateProjectModalOpen && (
@@ -1316,7 +1313,6 @@ const Component = () => {
            project={activeProject}
            gitRepository={activeProjectGitRepository || undefined}
            storageRules={storageRules}
-            isGitSyncEnabled={isGitSyncEnabled}
          />
        )}
        {activeProject && newWorkspaceModalState?.isOpen && (
--- a/packages/insomnia/src/ui/components/dropdowns/git-project-sync-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/git-project-sync-dropdown.tsx
@@ -28,7 +28,6 @@ import { SegmentEvent } from '~/ui/analytics';
 import { ProjectModal } from '~/ui/components/modals/project-modal';
 import { useGitCredentials } from '~/ui/hooks/use-git-credentials';
 import { useLoaderDeferData } from '~/ui/hooks/use-loader-defer-data';
-import { useOrganizationPermissions } from '~/ui/hooks/use-organization-features';
 import { DEFAULT_STORAGE_RULES } from '~/ui/organization-utils';

 import type { GitRepository } from '../../../models/git-repository';
@@ -70,9 +69,6 @@ export const GitProjectSyncDropdown: FC<Props> = ({ gitRepository, activeProject
  const gitStatusFetcher = useGitProjectStatusActionFetcher();
  const [isUpdateProjectModalOpen, setIsUpdateProjectModalOpen] = useState(false);

-  const { features } = useOrganizationPermissions();
-  const isGitSyncEnabled = features.gitSync.enabled;
-
  const storageRuleFetcher = useStorageRulesLoaderFetcher({ key: `storage-rule:${organizationId}` });
  useEffect(() => {
    if (!isScratchpadOrganizationId(organizationId)) {
@@ -652,7 +648,6 @@ export const GitProjectSyncDropdown: FC<Props> = ({ gitRepository, activeProject
          project={activeProject}
          gitRepository={gitRepository || undefined}
          storageRules={storageRules}
-          isGitSyncEnabled={isGitSyncEnabled}
        />
      )}
      {isGitBranchesModalOpen && gitRepository && currentBranch && (
--- a/packages/insomnia/src/ui/components/dropdowns/project-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/project-dropdown.tsx
@@ -17,7 +17,6 @@ interface Props {
  project: Project & { hasUncommittedOrUnpushedChanges?: boolean; gitRepository?: GitRepository };
  organizationId: string;
  storageRules: StorageRules;
-  isGitSyncEnabled: boolean;
 }

 interface ProjectActionItem {
@@ -27,7 +26,7 @@ interface ProjectActionItem {
  action: (projectId: string, projectName: string) => void;
 }

-export const ProjectDropdown: FC<Props> = ({ project, organizationId, storageRules, isGitSyncEnabled }) => {
+export const ProjectDropdown: FC<Props> = ({ project, organizationId, storageRules }) => {
  const [isProjectSettingsModalOpen, setIsProjectSettingsModalOpen] = useState(false);
  const deleteProjectFetcher = useProjectDeleteActionFetcher();

@@ -141,7 +140,6 @@ export const ProjectDropdown: FC<Props> = ({ project, organizationId, storageRul
      {isProjectSettingsModalOpen && (
        <ProjectModal
          project={project}
-          isGitSyncEnabled={isGitSyncEnabled}
          storageRules={storageRules}
          gitRepository={project.gitRepository}
          isOpen={isProjectSettingsModalOpen}
--- a/packages/insomnia/src/ui/components/modals/project-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/project-modal.tsx
@@ -16,14 +16,12 @@ export const ProjectModal = ({
  isOpen,
  onOpenChange,
  storageRules,
-  isGitSyncEnabled,
  project,
  gitRepository,
 }: {
  isOpen: boolean;
  onOpenChange: (isOpen: boolean) => void;
  storageRules: StorageRules;
-  isGitSyncEnabled: boolean;
  project?: Project;
  gitRepository?: GitRepository;
 }) => {
@@ -75,7 +73,6 @@ export const ProjectModal = ({
              {project ? (
                <ProjectSettingsForm
                  storageRules={storageRules}
-                  isGitSyncEnabled={isGitSyncEnabled}
                  project={project}
                  gitRepository={gitRepository}
                  onCancel={close}
@@ -86,7 +83,6 @@ export const ProjectModal = ({
              ) : (
                <ProjectCreateForm
                  storageRules={storageRules}
-                  isGitSyncEnabled={isGitSyncEnabled}
                  onCancel={close}
                  activeViewObj={activeViewObj}
                  credentials={credentials}
--- a/packages/insomnia/src/ui/components/panes/no-project-view.tsx
+++ b/packages/insomnia/src/ui/components/panes/no-project-view.tsx
@@ -8,10 +8,9 @@ import { ProjectCreateForm } from '../project/project-create-form';

 interface Props {
  storageRules: StorageRules;
-  isGitSyncEnabled: boolean;
 }

-export const NoProjectView: FC<Props> = ({ storageRules, isGitSyncEnabled }) => {
+export const NoProjectView: FC<Props> = ({ storageRules }) => {
  const { credentials, providers } = useGitCredentials();
  return (
    <div className="grid grid-rows-[min-content_1fr_min-content] place-items-stretch items-stretch gap-4 self-center overflow-hidden p-16">
@@ -21,7 +20,6 @@ export const NoProjectView: FC<Props> = ({ storageRules, isGitSyncEnabled }) =>
      </div>
      <ProjectCreateForm
        storageRules={storageRules}
-        isGitSyncEnabled={isGitSyncEnabled}
        defaultProjectName="My first project"
        credentials={credentials}
        providers={providers}
--- a/packages/insomnia/src/ui/components/project/project-create-form.tsx
+++ b/packages/insomnia/src/ui/components/project/project-create-form.tsx
@@ -6,10 +6,6 @@ import { useParams } from 'react-router';
 import type { GitCredentials } from '~/models/git-credentials';
 import { type StorageRules } from '~/models/organization';
 import { useGitProjectInitCloneActionFetcher } from '~/routes/git.init-clone';
-import {
-  fallbackFeatures,
-  useOrganizationPermissionsLoaderFetcher,
-} from '~/routes/organization.$organizationId.permissions';
 import { useProjectNewActionFetcher } from '~/routes/organization.$organizationId.project.new';
 import type { GitProviderOption } from '~/sync/git/providers/types';
 import { GitRepoForm } from '~/ui/components/project/git-repo-form';
@@ -17,7 +13,7 @@ import { GitRepoScanResult } from '~/ui/components/project/git-repo-scan-result'
 import { ProjectTypeSelect } from '~/ui/components/project/project-type-select';
 import { ProjectTypeWarning } from '~/ui/components/project/project-type-warning';
 import { type ProjectData, type ProjectType, useActiveView } from '~/ui/components/project/utils';
-import { useLoaderDeferData } from '~/ui/hooks/use-loader-defer-data';
+import { useIsGitSyncEnabled } from '~/ui/hooks/use-organization-features';

 import { Icon } from '../icon';

@@ -25,7 +21,6 @@ const FORMID = 'git-repo-form';

 interface Props {
  storageRules: StorageRules;
-  isGitSyncEnabled: boolean;
  defaultProjectName?: string;
  onCancel?(): void;
  activeViewObj?: ReturnType<typeof useActiveView>;
@@ -35,7 +30,6 @@ interface Props {

 export const ProjectCreateForm: FC<Props> = ({
  storageRules,
-  isGitSyncEnabled,
  defaultProjectName = 'My Project',
  onCancel,
  activeViewObj,
@@ -44,17 +38,7 @@ export const ProjectCreateForm: FC<Props> = ({
 }) => {
  const { organizationId } = useParams() as { organizationId: string };

-  // Reload isGitSyncEnabled everytime this component is mounted
-  const permissionsFetcher = useOrganizationPermissionsLoaderFetcher({ key: `permissions:${organizationId}` });
-  const permissionsFetcherLoad = permissionsFetcher.load;
-  useEffect(() => {
-    permissionsFetcherLoad({
-      organizationId,
-    });
-  }, [organizationId, permissionsFetcherLoad]);
-  const { featuresPromise } = permissionsFetcher.data || {};
-  const [features = fallbackFeatures] = useLoaderDeferData(featuresPromise, organizationId);
-  isGitSyncEnabled = features.gitSync.enabled;
+  const isGitSyncEnabled = useIsGitSyncEnabled(organizationId);

  const [storageType, setStorageType] = useState<ProjectType>();

@@ -140,7 +124,7 @@ export const ProjectCreateForm: FC<Props> = ({
            storageType={storageType}
            storageRules={storageRules}
          />
-          {storageType === 'git' && (
+          {storageType === 'git' && isGitSyncEnabled && (
            <GitRepoForm
              formId={FORMID}
              projectData={projectData}
@@ -189,6 +173,7 @@ export const ProjectCreateForm: FC<Props> = ({
              <Button
                type="submit"
                form={FORMID}
+                isDisabled={!isGitSyncEnabled}
                className="flex h-full items-center justify-center gap-2 rounded-md border border-solid border-(--hl-md) bg-(--color-surprise) px-4 py-2 text-sm font-semibold text-(--color-font-surprise) ring-1 ring-transparent transition-all hover:bg-(--color-surprise)/80 focus:ring-(--hl-md) focus:ring-inset aria-pressed:opacity-80"
              >
                Scan for files
--- a/packages/insomnia/src/ui/components/project/project-settings-form.tsx
+++ b/packages/insomnia/src/ui/components/project/project-settings-form.tsx
@@ -9,10 +9,6 @@ import { LearnMoreLink } from '~/basic-components/link';
 import type { GitCredentials } from '~/models/git-credentials';
 import type { StorageRules } from '~/models/organization';
 import { useGitProjectInitCloneActionFetcher } from '~/routes/git.init-clone';
-import {
-  fallbackFeatures,
-  useOrganizationPermissionsLoaderFetcher,
-} from '~/routes/organization.$organizationId.permissions';
 import type { GitProviderOption } from '~/sync/git/providers/types';
 import { GitConnectionInfo } from '~/ui/components/git/connection-info';
 import { GitRepoForm } from '~/ui/components/project/git-repo-form';
@@ -21,7 +17,7 @@ import { ProjectTypeSelect } from '~/ui/components/project/project-type-select';
 import { ProjectTypeWarning } from '~/ui/components/project/project-type-warning';
 import { useActiveView } from '~/ui/components/project/utils';
 import { useIsLightTheme } from '~/ui/hooks/theme';
-import { useLoaderDeferData } from '~/ui/hooks/use-loader-defer-data';
+import { useIsGitSyncEnabled } from '~/ui/hooks/use-organization-features';

 import type { GitRepository } from '../../../models/git-repository';
 import {
@@ -54,7 +50,6 @@ function isSwitchingStorageType(project: Project, storageType: 'local' | 'remote

 interface Props {
  storageRules: StorageRules;
-  isGitSyncEnabled: boolean;
  project?: Project;
  gitRepository?: GitRepository;
  defaultProjectName?: string;
@@ -66,7 +61,6 @@ interface Props {

 export const ProjectSettingsForm: FC<Props> = ({
  storageRules,
-  isGitSyncEnabled,
  project,
  gitRepository,
  defaultProjectName = 'My Project',
@@ -77,16 +71,7 @@ export const ProjectSettingsForm: FC<Props> = ({
 }) => {
  const { organizationId } = useParams() as { organizationId: string };

-  const permissionsFetcher = useOrganizationPermissionsLoaderFetcher({ key: `permissions:${organizationId}` });
-  const permissionsFetcherLoad = permissionsFetcher.load;
-  useEffect(() => {
-    permissionsFetcherLoad({
-      organizationId,
-    });
-  }, [organizationId, permissionsFetcherLoad]);
-  const { featuresPromise } = permissionsFetcher.data || {};
-  const [features = fallbackFeatures] = useLoaderDeferData(featuresPromise, organizationId);
-  isGitSyncEnabled = features.gitSync.enabled;
+  const isGitSyncEnabled = useIsGitSyncEnabled(organizationId);

  const isLightTheme = useIsLightTheme();

--- a/packages/insomnia/src/ui/hooks/use-organization-features.tsx
+++ b/packages/insomnia/src/ui/hooks/use-organization-features.tsx
@@ -87,3 +87,16 @@ export function useAIFeatureStatus(): AIFeatureStatus {
    isMCPWithAIEnabled: mcpClientWithAIAllowedByOrg && mcpIntegrationWithAIEnabledByUser && hasActiveLLM,
  };
 }
+
+export function useIsGitSyncEnabled(organizationId: string) {
+  const permissionsFetcher = useOrganizationPermissionsLoaderFetcher({ key: `permissions:${organizationId}` });
+  const permissionsFetcherLoad = permissionsFetcher.load;
+  useEffect(() => {
+    permissionsFetcherLoad({
+      organizationId,
+    });
+  }, [organizationId, permissionsFetcherLoad]);
+  const { featuresPromise } = permissionsFetcher.data || {};
+  const [features = fallbackFeatures] = useLoaderDeferData(featuresPromise, organizationId);
+  return features.gitSync.enabled;
+}