Merge branch 'dev' into table-expand/collapse-flow

Author: talhainvenxion

src/api/organizations/getMembersApi.ts

@@ -4,15 +4,21 @@ import { httpMethods } from '../constants';
 import { apiUrl } from '../apiUrl';
 
 const getMembersApi = ({
+  sort_by,
+  page,
+  size,
   name,
   authenticationToken,
 }: {
+  sort_by?: string;
+  page?: number;
+  size?: number;
   name?: string;
   authenticationToken: string;
 }): Promise<TMember[]> =>
   fetchApiWithAuthRequest({
     url: apiUrl(endpoints.organizations.members),
-    params: { name, size: 5 },
+    params: { name, size, page, sort_by },
     method: httpMethods.get,
     authenticationToken,
   });

src/redux/actions/organizations/getMembersAction.ts

@@ -2,10 +2,16 @@ import { organizationActionTypes } from '../../actionTypes';
 import getMembersApi from '../../../api/organizations/getMembersApi';
 
 export const getMembersAction = ({
+  sort_by,
+  page,
+  size,
   name,
   onSuccess,
   onFailure,
 }: {
+  sort_by?: string;
+  page?: number;
+  size?: number;
   name?: string;
   onSuccess?: () => void;
   onFailure?: (err: any) => void;
@@ -16,7 +22,7 @@ export const getMembersAction = ({
     isAuthenticated: true,
     failureActionType: organizationActionTypes.getMembers.failure,
     successActionType: organizationActionTypes.getMembers.success,
-    params: { name },
+    params: { name, size, page, sort_by },
     onSuccess,
     onFailure,
   },

src/redux/reducers/organizationsReducer.ts

@@ -13,6 +13,7 @@ export interface State {
   roles: string[];
   invoices: TInvoice[];
   invite: { id: null; activationToken: null; email: null };
+  paginated: any;
 }
 
 export type Action = {
@@ -39,12 +40,23 @@ export const initialState: State = {
   invoices: [],
   myOrganizationId: null,
   invite: { id: null, activationToken: null, email: null },
+  paginated: {},
 };
 
-const newState = (state: State, organizations: TOrganization[]): State => ({
+const newState = (
+  state: State,
+  organizations: TOrganization[],
+  pagination?: any,
+): State => ({
   ...state,
   ids: idsInsert(state.ids, organizations),
   byId: byKeyInsert(state.byId, organizations),
+  paginated: {
+    page: pagination.page,
+    size: pagination.size,
+    totalPages: pagination.total_pages,
+    totalitem: pagination.total,
+  },
 });
 
 const organizationsReducer = (
@@ -83,9 +95,21 @@ const organizationsReducer = (
         action.payload.items as TMember[],
       );
 
-      return { ...newState(state, []), members: members || [] };
+      return { ...newState(state, [], action.payload), members: members || [] };
     }
 
+    // case pipelineActionTypes.getMyPipelines.success: {
+    //   const pipelines: TPipeline[] = camelCaseArray(
+    //     action.payload.items as PipelinesPayload,
+    //   );
+
+    //   const myPipelineIds: TId[] = pipelines.map(
+    //     (pipeline: TPipeline) => pipeline.id,
+    //   );
+
+    //   return { ...newState(state, pipelines, action.payload), myPipelineIds };
+    // }
+
     case organizationActionTypes.invite.success: {
       const inviteUser = camelCaseObject(action.payload);
       return { ...newState(state, []), invite: inviteUser };

src/redux/selectors/organizations.ts

@@ -10,6 +10,9 @@ const getById = (state: State): Record<TId, TOrganization> =>
 const getMyOrganizationId = (state: State): TId | null =>
   _.get(stateKey(state), 'myOrganizationId');
 
+const getMyMembersPaginated = (state: State): any =>
+  _.get(stateKey(state), 'paginated');
+
 export const myOrganization = (state: State): TOrganization | null => {
   const myOrganizationId = getMyOrganizationId(state);
   const byId = getById(state);
@@ -18,7 +21,12 @@ export const myOrganization = (state: State): TOrganization | null => {
 
   return byId[myOrganizationId];
 };
+export const myMembersPaginated = (state?: State | null): any => {
+  if (!state) return {};
+  const paginated = getMyMembersPaginated(state);
 
+  return paginated;
+};
 const inviteForCode = (state: State): any[] =>
   _.get(stateKey(state), 'inviteCode');
 
@@ -34,6 +42,7 @@ const invite = (
   _.get(stateKey(state), 'invite');
 
 const organizationSelectors = {
+  myMembersPaginated: myMembersPaginated,
   myOrganization: myOrganization,
   myMembers: myMembers,
   inviteForCode: inviteForCode,

src/ui/components/Filters/filter.module.scss

@@ -24,14 +24,20 @@
 }
 
 .tile {
+  align-items: center;
+  font-size: 12px;
+  font-weight: 400;
+  font-family: Rubik;
+  color: $primaryColor;
    height: 28px;
-   background-color: #EDE4FF; 
+   background-color:#FBFBFB; 
    margin-top: -5px !important; 
    margin-left: 7px !important;
    border-radius: 4px; 
    padding: 5px 11px !important
 }
 
+
 .removeIcon {
     margin-top: 23px !important;
     padding-top: 4px !important;
@@ -44,7 +50,7 @@
 
 
 .searchableInput {
-    border-radius: 0;
+    border-radius: 0 !important;
     width: 146;
     height: 40px;
     font-size: 12px;

src/ui/components/Filters/index.tsx

@@ -3,6 +3,7 @@ import {
   Box,
   FlexBox,
   FormDropdownField,
+  SearchInputField,
   FormTextField,
   icons,
   Paragraph,
@@ -529,7 +530,12 @@ const FilterComponent = ({
   const selectStyles = {
     control: (base: any) => ({
       width: '146px',
-      ...base,
+      borderRadius: 0,
+      border: '1px solid grey',
+      height: '40px',
+      fontSize: '12px',
+      display: 'flex',
+      // ...base,
     }),
   };
 
@@ -644,27 +650,23 @@ const FilterComponent = ({
   return (
     <FlexBox.Column fullWidth>
       <div className={styles.inputRow}>
-        <Box marginBottom="lg" marginRight="md">
-          <FormTextField
-            label={''}
-            placeholder={'Search'}
-            value={searchText ? filters[0]?.filterValue : ''}
-            disabled={applyFilter}
-            onChange={(value: string) => {
-              setSearchText(value ? true : false);
-              handleValueFieldChangeOnSearch(value);
-            }}
-            style={{
-              borderRadius: '4px',
-              width: '205px',
-              fontSize: '12px',
-              color: '#424240',
-            }}
-          />
-        </Box>
+        {!window.location.href?.includes('components') && (
+          <Box marginRight="md" marginTop="md">
+            <SearchInputField
+              placeholder={'Search'}
+              value={searchText ? filters[0]?.filterValue : ''}
+              disabled={applyFilter}
+              onChange={(value: string) => {
+                setSearchText(value ? true : false);
+                handleValueFieldChangeOnSearch(value);
+              }}
+            />
+          </Box>
+        )}
+
         <FlexBox
           fullWidth
-          className="border border-primary rounded rounded-4 p-2 align-item-center"
+          className="border  rounded rounded-4 p-2 align-item-center"
         >
           <Box
             onClick={() => {
@@ -673,28 +675,27 @@ const FilterComponent = ({
             style={{
               width: '33px',
               height: '28px',
-              background: '#431D93',
+              background: '#fff',
               borderRadius: '4px',
             }}
           >
             <icons.funnelFill
               style={{ padding: '5px 0px 0px 7px' }}
               size={iconSizes.sm}
-              color={iconColors.white}
+              color={iconColors.primary}
             />
           </Box>
           <Box
             style={{ padding: '5px 0px 0px 7px', display: 'flex' }}
             className="text-muted h5"
           >
             {/* Filter your stack */}
-            {!applyFilter && !filters[0]?.column?.selectedValue?.label ? (
+            {!applyFilter && !filters[0]?.filterValue ? (
               <Paragraph className={styles.filterplaceholder}>
                 Filter list
+                {console.log(filters, 'filters1')}
               </Paragraph>
-            ) : filters[0]?.column?.selectedValue.label &&
-              !applyFilter &&
-              !searchText ? (
+            ) : filters[0]?.filterValue && !applyFilter && !searchText ? (
               filters.map((filter: any, index: number) => {
                 return (
                   <FlexBox.Row key={index} className={styles.tile}>
@@ -726,8 +727,7 @@ const FilterComponent = ({
                 Filter list
               </Paragraph>
             )}
-            {!applyFilter &&
-            !filters[0]?.column?.selectedValue?.label ? null : filters[0]
+            {!applyFilter && !filters[0]?.filterValue ? null : filters[0]
                 ?.column?.selectedValue.label &&
               !applyFilter &&
               !searchText ? (

src/ui/components/icons/assets/Run.svg

@@ -57,6 +57,7 @@ import { ReactComponent as LockKey } from './assets/LockKey.svg';
 import { ReactComponent as Graph } from './assets/Graph.svg';
 import { ReactComponent as GitCommit } from './assets/GitCommit.svg';
 import { ReactComponent as ChatDots } from './assets/ChatDots.svg';
+import { ReactComponent as Run } from './assets/Run.svg';
 // import { ReactComponent as Inprogress } from './assets/InProgress.svg';
 // import { ReactComponent as Cached } from './assets/Cached.svg';
 // import { ReactComponent as RightArrow } from './assets/RightArrow.svg';
@@ -169,6 +170,7 @@ const icons = {
   delete: createIcon({ Component: Delete }),
   edit: createIcon({ Component: Edit }),
   search: createIcon({ Component: Search }),
+  run: createIcon({ Component: Run, useStroke: true }),
 
   //icons for stackComponents
   artifact_store: createIcon({ Component: Folders, useStroke: true }),

src/ui/components/icons/index.tsx

@@ -31,7 +31,7 @@
 
 .baseParagraph {
   font-family: $fontFamilyNormal;
-  color: #828282;
+  color: #424240;
   word-wrap: break-word;
   margin: 0;
 }

src/ui/components/typographies/index.module.scss

@@ -12,7 +12,8 @@ import {
 import { callActionForPipelineRunsForPagination } from '../../pipelines/PipelineDetail/useService';
 import { callActionForStackRunsForPagination } from '../../stacks/StackDetail/useService';
 import { callActionForStackComponentRunsForPagination } from '../../stackComponents/StackDetail/useService';
-import { usePagination, DOTS } from '../../../hooks';
+import { usePagination, DOTS, useDispatch } from '../../../hooks';
+import { organizationActions } from '../../../../redux/actions';
 // const PaginationItem = (props: {
 //   isActive: boolean;
 //   index: string;
@@ -73,7 +74,7 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
   const {
     dispatchStackComponentsData,
   } = callActionForStackComponentsForPagination();
-
+  const dispatch = useDispatch();
   const { dispatchPipelineData } = callActionForPipelinesForPagination();
   const { dispatchAllrunsData } = callActionForAllrunsForPagination();
   const { dispatchPipelineRunsData } = callActionForPipelineRunsForPagination();
@@ -92,7 +93,7 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
       ? locationPath.pathname.split('/')[5]
       : locationPath.pathname.split('/')[4];
   // const isValidFilter = props.filters?.map((f) => f.value).join('');
-
+  // const [fetchingMembers, setFetchingMembers] = useState(true);
   useImperativeHandle(ref, () => ({
     callOnChange(page: number, size: number, filters: any, activeSorting: any) {
       props.setPageIndex(page - 1);
@@ -101,6 +102,9 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
     },
   }));
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [fetchingMembers]);
+
   const paginationRange = usePagination({
     currentPage: props.pageIndex + 1,
     totalCount: props.totalCount,
@@ -166,6 +170,20 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
       default:
         break;
     }
+
+    if (locationPath.pathname.split('/')[2] === 'organization') {
+      // debugger;
+      // setFetchingMembers(true);
+      dispatch(
+        organizationActions.getMembers({
+          page: page,
+          size: size,
+          sort_by: activeSorting,
+          // onSuccess: () => setFetchingMembers(false),
+          // onFailure: () => setFetchingMembers(false),
+        }),
+      );
+    }
   };
   // console.log(itemPerPage, 'itemPerPage');
   const pageNumbers = [];
@@ -323,16 +341,7 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
           }}
           icon={icons.paginationLast}
         />
-     
       </FlexBox>
-
-
-
-
-
-
-
-
     </FlexBox.Column>
   );
 });