fix: Updating invite modal component to fix issue on EE & improving c…

…ode splitting of a file (#33216)

## Description

Updating invite modal component to fix issue on EE & improving code
splitting of a file

Fixes [#3954](appsmithorg/appsmith-ee#3954)

## Automation

/ok-to-test tags="@tag.Workspace, @tag.Git"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8972376691>
> Commit: cd3d806
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8972376691&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->




## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No

app/client/src/ce/components/DSDataFilter/index.tsx

@@ -35,6 +35,7 @@ export const FilterComponentContainer = styled.div<{
   align-items: center;
   justify-content: flex-start;
   border-radius: var(--ads-v2-border-radius);
+  width: 159px;
 
   ${(props) =>
     props.isSelected && `background: var(--ads-color-background-secondary);`}

app/client/src/ce/components/gitComponents/GitSettingsCDTab/UnlicensedGitCD.tsx

@@ -9,23 +9,23 @@ import { useAppsmithEnterpriseLink } from "pages/Editor/gitSync/GitSettingsModal
 import React from "react";
 import styled from "styled-components";
 
-const Container = styled.div`
+export const Container = styled.div`
   padding-top: 8px;
   padding-bottom: 16px;
   overflow: auto;
   min-height: calc(360px + 52px);
 `;
 
-const SectionTitle = styled(Text)`
+export const SectionTitle = styled(Text)`
   font-weight: 600;
   margin-bottom: 4px;
 `;
 
-const SectionDesc = styled(Text)`
+export const SectionDesc = styled(Text)`
   margin-bottom: 12px;
 `;
 
-const StyledButton = styled(Button)`
+export const StyledButton = styled(Button)`
   display: inline-block;
 `;
 

app/client/src/ce/components/gitComponents/GitSettingsCDTab/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import UnlicensedGitCD from "./UnlicensedGitCD";
+import UnlicensedGitCD from "@appsmith/components/gitComponents/GitSettingsCDTab/UnlicensedGitCD";
 
 function GitSettingsCDTab() {
   return <UnlicensedGitCD />;

app/client/src/ce/pages/workspace/InviteUsersForm.tsx

@@ -274,19 +274,17 @@ export function CustomRolesRamp() {
 function InviteUsersForm(props: any) {
   const [emailError, setEmailError] = useState("");
   const [selectedOption, setSelectedOption] = useState<any[]>([]);
-  const selectedId = props?.selected?.id;
   const showRampSelector = showProductRamps(RAMP_NAME.CUSTOM_ROLES);
   const canShowRamp = useSelector(showRampSelector);
 
   const selected = useMemo(
     () =>
-      selectedId &&
-      props.selected && {
+      props?.selected && {
         description: props.selected.rolename,
         value: props.selected.rolename,
         key: props.selected.id,
       },
-    [selectedId],
+    [props?.selected],
   );
 
   const {
@@ -317,10 +315,6 @@ function InviteUsersForm(props: any) {
     AddScriptTo.HEAD,
   );
 
-  useEffect(() => {
-    setSelectedOption([]);
-  }, [submitSucceeded]);
-
   useEffect(() => {
     fetchCurrentWorkspace(props.workspaceId);
     fetchAllRoles(props.workspaceId);

app/client/src/ee/components/gitComponents/GitSettingsCDTab/UnlicensedGitCD.tsx

@@ -0,0 +1,3 @@
+export * from "ce/components/gitComponents/GitSettingsCDTab/UnlicensedGitCD";
+import { default as CE_UnlicensedGitCD } from "ce/components/gitComponents/GitSettingsCDTab/UnlicensedGitCD";
+export default CE_UnlicensedGitCD;