Plugin and advertisement screen revamp (#2006)

* advertisement and plugin screen * added revamped design * fixes added * fixed testcases * chore(deps): bump sass from 1.80.6 to 1.80.7 (#2433) Bumps [sass](https://github.com/sass/dart-sass) from 1.80.6 to 1.80.7. - [Release notes](https://github.com/sass/dart-sass/releases) - [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md) - [Commits](sass/dart-sass@1.80.6...1.80.7) --- updated-dependencies: - dependency-name: sass dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump eslint-plugin-import from 2.30.0 to 2.31.0 (#2434) Bumps [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import) from 2.30.0 to 2.31.0. - [Release notes](https://github.com/import-js/eslint-plugin-import/releases) - [Changelog](https://github.com/import-js/eslint-plugin-import/blob/main/CHANGELOG.md) - [Commits](import-js/eslint-plugin-import@v2.30.0...v2.31.0) --- updated-dependencies: - dependency-name: eslint-plugin-import dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @mui/x-charts from 7.22.1 to 7.22.2 (#2435) Bumps [@mui/x-charts](https://github.com/mui/mui-x/tree/HEAD/packages/x-charts) from 7.22.1 to 7.22.2. - [Release notes](https://github.com/mui/mui-x/releases) - [Changelog](https://github.com/mui/mui-x/blob/v7.22.2/CHANGELOG.md) - [Commits](https://github.com/mui/mui-x/commits/v7.22.2/packages/x-charts) --- updated-dependencies: - dependency-name: "@mui/x-charts" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @types/react from 18.3.3 to 18.3.12 (#2436) Bumps [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) from 18.3.3 to 18.3.12. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react) --- updated-dependencies: - dependency-name: "@types/react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Update pull-request.yml * Update dependabot.yaml * added docker check to workflow (#2414) * added docker check to workflow * made recommended changes to docker check in workflow * added changes to docker check inn workflow as recommended * added changes * updated indentation in pull-request.yml file * updated indentation in pull-request.yml file * added Dockerfile and Docker-compose.yml file * added Dockerfile and Docker-compose.yml file * updated .docker-ignore file * added recommended changes by code rabbit * added recommended changes by code rabbit * added recommended changes by code rabbit * added recommended changes by code rabbit * added recommended changes by code rabbit * added recommended changes by code rabbit * properly formatted code * trying to make docker check pass * trying to make docker check pass * updated INSTALLATION.md * updated INSTALLATION.md * added recommended changes to INSTALLATION.md * added recommended changes to INSTALLATION.md * added recommended changes to INSTALLATION.md * updated docker workflow * updated INSTALLATION.md * eslint-rule-no_unused_vars (#2428) * Updated pr template with checklist (#2454) * Updated pr template with checklist * Additional changes for the PR template * Changed the url for the PR template * refactored addOnStore * refactored addOnEntry v1 --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Peter Harrison <[email protected]> Co-authored-by: Vanshika Sabharwal <[email protected]> Co-authored-by: prayansh_chhablani <[email protected]> Co-authored-by: Dhiraj Udhani <[email protected]>
PalisadoesFoundation · Dec 7, 2024 · 90ae8b8 · 90ae8b8
1 parent c2630ae
commit 90ae8b8
Show file tree

Hide file tree

Showing 14 changed files with 346 additions and 361 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -61,4 +61,4 @@ Fixes #<!--Add related issue number here.-->
 
 **Have you read the [contributing guide](https://github.com/PalisadoesFoundation/talawa-admin/blob/master/CONTRIBUTING.md)?**
 
-<!--Yes or No-->
+<!--Yes or No-->
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -923,7 +923,7 @@
     "register": "register"
   },
   "addOnStore": {
-    "title": "Add On Store",
+    "title": "Plugin Store",
     "searchName": "Ex: Donations",
     "search": "Search",
     "enable": "Enabled",
@@ -1227,7 +1227,7 @@
     "RstartDate": "Select Start Date",
     "RendDate": "Select End Date",
     "RClose": "Close the window",
-    "addNew": "Create new advertisement",
+    "addNew": "Create",
     "EXname": "Ex. Cookie Shop",
     "EXlink": "Ex. http://yourwebsite.com/photo",
     "createAdvertisement": "Create Advertisement",

diff --git a/src/components/AddOn/core/AddOnEntry/AddOnEntry.module.css b/src/components/AddOn/core/AddOnEntry/AddOnEntry.module.css
@@ -7,8 +7,12 @@
   margin-left: auto;
   display: flex !important;
   align-items: center;
+  background-color: transparent;
+  color: #31bb6b;
+}
+.card {
+  border: 4px solid green;
 }
-
 .entryaction i {
   margin-right: 8px;
 }

diff --git a/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx b/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx
@@ -17,9 +17,9 @@ interface InterfaceAddOnEntryProps {
   description?: string; // Optional props
   createdBy: string;
   component?: string; // Optional props
-  modified?: any; // Optional props
+  modified?: boolean; // Optional props
   uninstalledOrgs: string[];
-  getInstalledPlugins: () => any;
+  getInstalledPlugins: () => void;
 }
 
 /**
@@ -59,6 +59,7 @@ function addOnEntry({
 
   // Getting orgId from URL parameters
   const { orgId: currentOrg } = useParams();
+  // console.log(currentOrg);
   if (!currentOrg) {
     // If orgId is not present in the URL, navigate to the org list page
     return <Navigate to={'/orglist'} />;
@@ -101,7 +102,10 @@ function addOnEntry({
 
   return (
     <>
-      <Card data-testid="AddOnEntry">
+      <Card
+        data-testid="AddOnEntry"
+        style={{ border: '1px solid #31BB6B', borderRadius: '10px' }}
+      >
         {/* {uninstalledOrgs.includes(currentOrg) && (
           <Form.Check
             type="switch"
@@ -114,7 +118,7 @@ function addOnEntry({
           />
         )} */}
         <Card.Body>
-          <Card.Title>{title}</Card.Title>
+          <Card.Title style={{ fontWeight: '800' }}>{title}</Card.Title>
           <Card.Subtitle className="mb-2 text-muted author">
             {createdBy}
           </Card.Subtitle>
@@ -134,7 +138,7 @@ function addOnEntry({
               <Spinner animation="grow" />
             ) : (
               <i
-                className={!isInstalledLocal ? 'fa fa-trash' : 'fa fa-cubes'}
+                className={!isInstalledLocal ? 'fa fa-trash' : 'fa fa-plus'}
               ></i>
             )}
             {/* {installed ? 'Remove' : configurable ? 'Installed' : 'Install'} */}

diff --git a/src/components/AddOn/core/AddOnStore/AddOnStore.module.css b/src/components/AddOn/core/AddOnStore/AddOnStore.module.css
@@ -11,8 +11,12 @@
   border-bottom: 3px solid #31bb6b;
   width: 15%;
 }
-
-.actioninput {
+.input {
+  display: flex;
+  position: relative;
+  width: 560px;
+}
+/* .actioninput {
   text-decoration: none;
   margin-bottom: 50px;
   border-color: #e8e5e5;
@@ -23,9 +27,46 @@
   padding-right: 10px;
   padding-left: 10px;
   box-shadow: none;
+} */
+.actioninput {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background-color: white;
+  box-shadow: 0 1px 1px #31bb6b;
+}
+.inputField > button {
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 .actionradio input {
   width: fit-content;
   margin: inherit;
 }
+.cardGridItem {
+  width: 38vw;
+}
+.justifysp {
+  display: grid;
+  width: 100%;
+  justify-content: space-between;
+  align-items: baseline;
+  grid-template-rows: auto;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0.8rem 0.4rem;
+}
+
+@media screen and (max-width: 600px) {
+  .cardGridItem {
+    width: 100%;
+  }
+  .justifysp {
+    display: grid;
+    width: 100%;
+    justify-content: center;
+    align-items: start;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr;
+    grid-gap: 0.8rem 0.4rem;
+  }
+}
diff --git a/src/components/AddOn/core/AddOnStore/AddOnStore.test.tsx b/src/components/AddOn/core/AddOnStore/AddOnStore.test.tsx
@@ -22,7 +22,11 @@ import useLocalStorage from 'utils/useLocalstorage';
 import { MockedProvider } from '@apollo/react-testing';
 
 const { getItem } = useLocalStorage();
-
+interface InterfacePlugin {
+  enabled: boolean;
+  pluginName: string;
+  component: string;
+}
 jest.mock('components/AddOn/support/services/Plugin.helper', () => ({
   __esModule: true,
   default: jest.fn().mockImplementation(() => ({
@@ -60,16 +64,18 @@ jest.mock('components/AddOn/support/services/Plugin.helper', () => ({
       },
       // Add more mock data as needed
     ]),
-    generateLinks: jest.fn().mockImplementation((plugins) => {
-      return plugins
-        .filter((plugin: { enabled: any }) => plugin.enabled)
-        .map((installedPlugin: { pluginName: any; component: string }) => {
-          return {
-            name: installedPlugin.pluginName,
-            url: `/plugin/${installedPlugin.component.toLowerCase()}`,
-          };
-        });
-    }),
+    generateLinks: jest
+      .fn()
+      .mockImplementation((plugins: InterfacePlugin[]) => {
+        return plugins
+          .filter((plugin) => plugin.enabled)
+          .map((installedPlugin) => {
+            return {
+              name: installedPlugin.pluginName,
+              url: `/plugin/${installedPlugin.component.toLowerCase()}`,
+            };
+          });
+      }),
   })),
 }));
 
@@ -301,77 +307,6 @@ describe('Testing AddOnStore Component', () => {
     expect(message.length).toBeGreaterThanOrEqual(1);
   });
 
-  test('check filters enabled and disabled under Installed tab', async () => {
-    const mocks = [ORGANIZATIONS_LIST_MOCK, PLUGIN_GET_MOCK];
-    render(
-      <ApolloProvider client={client}>
-        <Provider store={store}>
-          <BrowserRouter>
-            <I18nextProvider i18n={i18nForTest}>
-              <MockedProvider mocks={mocks} addTypename={false}>
-                <AddOnStore />
-              </MockedProvider>
-            </I18nextProvider>
-          </BrowserRouter>
-        </Provider>
-      </ApolloProvider>,
-    );
-
-    await wait();
-    userEvent.click(screen.getByText('Installed'));
-
-    expect(screen.getByText('Filters')).toBeInTheDocument();
-    expect(screen.getByLabelText('Enabled')).toBeInTheDocument();
-    expect(screen.getByLabelText('Disabled')).toBeInTheDocument();
-
-    fireEvent.click(screen.getByLabelText('Enabled'));
-    expect(screen.getByLabelText('Enabled')).toBeChecked();
-    fireEvent.click(screen.getByLabelText('Disabled'));
-    expect(screen.getByLabelText('Disabled')).toBeChecked();
-  });
-
-  test('check the working search bar when on Installed tab', async () => {
-    const mocks = [ORGANIZATIONS_LIST_MOCK, PLUGIN_GET_MOCK];
-
-    const { container } = render(
-      <ApolloProvider client={client}>
-        <Provider store={store}>
-          <BrowserRouter>
-            <I18nextProvider i18n={i18nForTest}>
-              <MockedProvider mocks={mocks} addTypename={false}>
-                <AddOnStore />
-              </MockedProvider>
-            </I18nextProvider>
-          </BrowserRouter>
-        </Provider>
-      </ApolloProvider>,
-    );
-    await wait();
-    userEvent.click(screen.getByText('Installed'));
-
-    await wait();
-    let searchText = '';
-    fireEvent.change(screen.getByPlaceholderText('Ex: Donations'), {
-      target: { value: searchText },
-    });
-    expect(container).toHaveTextContent('Plugin 1');
-    expect(container).toHaveTextContent('Plugin 3');
-
-    searchText = 'Plugin 1';
-    fireEvent.change(screen.getByPlaceholderText('Ex: Donations'), {
-      target: { value: searchText },
-    });
-    const plugin1Elements = screen.queryAllByText('Plugin 1');
-    expect(plugin1Elements.length).toBeGreaterThan(1);
-
-    searchText = 'Test Plugin';
-    fireEvent.change(screen.getByPlaceholderText('Ex: Donations'), {
-      target: { value: searchText },
-    });
-    const message = screen.getAllByText('Plugin does not exists');
-    expect(message.length).toBeGreaterThanOrEqual(1);
-  });
-
   test('AddOnStore loading test', async () => {
     expect(true).toBe(true);
     const mocks = [ORGANIZATIONS_LIST_MOCK, PLUGIN_LOADING_MOCK];
Original file line number	Diff line number	Diff line change
Expand Up		@@ -61,4 +61,4 @@ Fixes #<!--Add related issue number here.-->

		Have you read the [contributing guide](https://github.com/PalisadoesFoundation/talawa-admin/blob/master/CONTRIBUTING.md)?

		<!--Yes or No-->
		<!--Yes or No-->