Merged UAT

.env

@@ -1,2 +1,2 @@
+REACT_APP_BASE_API_URL=https://appserver.zenml.io/api/v1
 REACT_APP_VERSION=$npm_package_version
-REACT_APP_ITEMS_PER_PAGE=10

global.d.ts

@@ -67,6 +67,22 @@ interface TMember {
   created: Date;
   active: boolean;
   activation_token: string;
+  user: { 
+    id: TId;
+    organizationId: any;
+    fullName: any;
+    email: any;
+    name: any;
+    created: Date;
+    active: boolean;
+    activation_token: any;
+  },
+  roles: [
+   { 
+    id: string; 
+    name: string
+   } 
+  ]
 }
 
 interface TWorkspace {

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.5",
     "@stripe/react-stripe-js": "^1.1.2",
     "@stripe/stripe-js": "^1.9.0",
+    "@table-library/react-table-library": "^4.0.23",
     "@testing-library/dom": "^7.21.7",
     "@testing-library/jest-dom": "^5.11.2",
     "@testing-library/react": "^10.4.7",
@@ -24,6 +26,7 @@
     "@types/react-scroll": "^1.5.5",
     "@types/react-syntax-highlighter": "^11.0.4",
     "@types/redux-logger": "^3.0.8",
+    "@types/styled-components": "^5.1.26",
     "axios": "^0.19.2",
     "axios-mock-adapter": "^1.18.2",
     "bootstrap": "^4.5.0",
@@ -38,17 +41,21 @@
     "i18next-browser-languagedetector": "^5.0.0",
     "json2yaml": "^1.1.0",
     "jwt-decode": "^3.1.2",
+    "moment": "^2.29.4",
     "node-sass": "^4.14.1",
     "query-string": "^6.13.1",
     "react": "^16.13.1",
     "react-bootstrap": "^1.3.0",
+    "react-cookie-consent": "^8.0.1",
     "react-datepicker": "^4.8.0",
     "react-dom": "^16.13.1",
     "react-flow-renderer": "^10.3.16",
+    "react-joyride": "^2.5.3",
     "react-outside-click-handler": "^1.3.0",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.1",
+    "react-select": "^5.7.0",
     "react-syntax-highlighter": "^13.3.1",
     "react-tooltip": "^4.2.10",
     "react-tooltip-lite": "^1.12.0",
@@ -58,6 +65,7 @@
     "redux-saga": "^1.1.3",
     "redux-saga-test-plan": "^4.0.0-rc.3",
     "reselect": "^4.0.0",
+    "styled-components": "^5.3.6",
     "typescript": "^3.9.7"
   },
   "scripts": {
@@ -70,6 +78,7 @@
     "tslint": "tsc",
     "all": "eslint './src/**/*.ts*' & react-scripts test --all & tsc"
   },
+
   "browserslist": {
     "production": [
       ">0.2%",

src/api/endpoints.ts

@@ -15,12 +15,14 @@ export const endpoints = {
       `/users/${username}/deactivate`,
     invites: '/organizations/invite?status=pending',
     members: '/users',
+    membersWithRole: '/role_assignments',
     invite: '/users',
     deleteInvite: (id: string): string => `/users/${id}`,
   },
 
   projects: {
     my: '/projects',
+    stats: (project: string) => `/projects/${project}/statistics`,
   },
 
   pipelines: {

src/api/fetchApi/index.ts

@@ -33,10 +33,12 @@ export const fetchApiWithAuthRequest = ({
   url,
   data,
   method,
+  params,
   authenticationToken,
   headers,
 }: {
   url: string;
+  params?: any;
   data?: any;
   method: any;
   authenticationToken: string;
@@ -47,6 +49,7 @@ export const fetchApiWithAuthRequest = ({
   return axios({
     method: method || httpMethods.get,
     url,
+    params,
     data,
     cancelToken: new CancelToken(function executor(c) {
       // An executor function receives a cancel function as a parameter

src/api/organizations/getMembersApi.ts

@@ -4,12 +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, page, sort_by },
     method: httpMethods.get,
     authenticationToken,
   });

src/api/organizations/inviteApi.ts

@@ -11,7 +11,7 @@ const inviteApi = ({
   name: string;
 }): Promise<void> =>
   fetchApiWithAuthRequest({
-    url: apiUrl(endpoints.organizations.invite),
+    url: apiUrl(`${endpoints.organizations.invite}?assign_default_role=false`),
     method: httpMethods.post,
     authenticationToken,
     headers: {

src/api/pipelines/getAllRunsByPipelineIdApi.ts

@@ -6,12 +6,23 @@ import { apiUrl } from '../apiUrl';
 const getAllRunsByPipelineIdApi = ({
   authenticationToken,
   pipelineId,
+  sort_by,
+  logical_operator,
+  page,
+  size,
+  filtersParam,
 }: {
   authenticationToken: string;
+  sort_by: string;
+  logical_operator: string;
   pipelineId: TId;
+  page: number;
+  size: number;
+  filtersParam?: any;
 }): Promise<TOrganization> =>
   fetchApiWithAuthRequest({
-    url: apiUrl(endpoints.runs.pipeline.get(pipelineId)), // todo: get runs by pipeline id please update endpoint
+    url: apiUrl(endpoints.runs.pipeline.get(pipelineId)),
+    params: { sort_by, logical_operator, page, size, ...filtersParam }, // todo: get runs by pipeline id please update endpoint
     method: httpMethods.get,
     authenticationToken,
   });

src/api/pipelines/getMyPipelinesApi.ts

@@ -6,12 +6,24 @@ import { apiUrl } from '../apiUrl';
 const getMyPipelinesApi = ({
   authenticationToken,
   project,
+  sort_by,
+  logical_operator,
+  page,
+  size,
+  filtersParam,
 }: {
+  sort_by: string;
+  logical_operator: string;
+  page: number;
+  size: number;
+  name?: string;
   authenticationToken: string;
   project: string;
+  filtersParam?: object;
 }): Promise<TPipeline> =>
   fetchApiWithAuthRequest({
     url: apiUrl(endpoints.pipelines.my(project)),
+    params: { sort_by, logical_operator, page, size, ...filtersParam },
     method: httpMethods.get,
     authenticationToken,
   });

src/api/projects/getMyProjectStatsApi.ts

@@ -0,0 +1,21 @@
+import { fetchApiWithAuthRequest } from '../fetchApi';
+import { endpoints } from '../endpoints';
+import { httpMethods } from '../constants';
+import { apiUrl } from '../apiUrl';
+
+interface ProjectStats {}
+
+const getMyProjectStatsApi = ({
+  authenticationToken,
+  project,
+}: {
+  authenticationToken: string;
+  project: string;
+}): Promise<ProjectStats> =>
+  fetchApiWithAuthRequest({
+    url: apiUrl(endpoints.projects.stats(project)),
+    method: httpMethods.get,
+    authenticationToken,
+  });
+
+export default getMyProjectStatsApi;

src/api/runs/getAllRunsApi.ts

@@ -5,13 +5,24 @@ import { apiUrl } from '../apiUrl';
 
 const getAllRunsApi = ({
   project,
+  sort_by,
+  logical_operator,
+  page,
+  size,
+  filtersParam,
   authenticationToken,
 }: {
-  project: string;
+  sort_by: string;
+  logical_operator: string;
+  page: number;
+  size: number;
   authenticationToken: string;
+  project: string;
+  filtersParam?: object;
 }): Promise<TOrganization> =>
   fetchApiWithAuthRequest({
     url: apiUrl(endpoints.runs.all(project)),
+    params: { sort_by, logical_operator, page, size, ...filtersParam },
     method: httpMethods.get,
     authenticationToken,
   });

src/api/session/forgotApi.ts

@@ -26,7 +26,7 @@ const forgotApi = ({
   authenticationToken: string;
 }): Promise<Response> =>
   fetchApiWithAuthRequest({
-    url: apiUrl(endpoints.users.updateUser(userId)),
+    url: apiUrl(endpoints.users.me),
     method: httpMethods.put,
     authenticationToken,
     headers: {

src/api/stackComponents/getAllRunsByStackComponentIdApi.ts

@@ -6,12 +6,23 @@ import { apiUrl } from '../apiUrl';
 const getAllRunsByStackComponentIdApi = ({
   authenticationToken,
   stackComponentId,
+  sort_by,
+  logical_operator,
+  page,
+  size,
+  filtersParam,
 }: {
+  sort_by: string;
+  logical_operator: string;
+  page: number;
+  size: number;
+  filtersParam?: any;
   authenticationToken: string;
   stackComponentId: TId;
 }): Promise<TOrganization> =>
   fetchApiWithAuthRequest({
-    url: apiUrl(endpoints.runs.stackComponent.get(stackComponentId)), // todo: get runs by pipeline id please update endpoint
+    url: apiUrl(endpoints.runs.stackComponent.get(stackComponentId)),
+    params: { sort_by, logical_operator, page, size, ...filtersParam }, // todo: get runs by pipeline id please update endpoint
     method: httpMethods.get,
     authenticationToken,
   });

src/api/stackComponents/getStackComponentListApi.ts

@@ -5,15 +5,26 @@ import { apiUrl } from '../apiUrl';
 
 const getMyStackComponentsApi = ({
   authenticationToken,
+  sort_by,
+  logical_operator,
+  page,
+  size,
   type,
+  filtersParam,
   project,
 }: {
   project: string;
   authenticationToken: string;
+  sort_by: string;
+  logical_operator: string;
   type: string;
+  filtersParam?: object;
+  page: number;
+  size: number;
 }): Promise<TStack> =>
   fetchApiWithAuthRequest({
     url: apiUrl(endpoints.StackComponents.my(type, project)),
+    params: { sort_by, logical_operator, page, size, ...filtersParam },
     method: httpMethods.get,
     authenticationToken,
   });

src/api/stacks/getAllRunsByStackIdApi.ts

@@ -6,12 +6,23 @@ import { apiUrl } from '../apiUrl';
 const getAllRunsByStackIdApi = ({
   authenticationToken,
   stackId,
+  sort_by,
+  logical_operator,
+  page,
+  size,
+  filtersParam,
 }: {
+  sort_by: string;
+  logical_operator: string;
+  page: number;
+  size: number;
+  filtersParam?: any;
   authenticationToken: string;
   stackId: TId;
 }): Promise<TOrganization> =>
   fetchApiWithAuthRequest({
-    url: apiUrl(endpoints.runs.stack.get(stackId)), // todo: get runs by pipeline id please update endpoint
+    url: apiUrl(endpoints.runs.stack.get(stackId)),
+    params: { sort_by, logical_operator, page, size, ...filtersParam }, // todo: get runs by pipeline id please update endpoint
     method: httpMethods.get,
     authenticationToken,
   });

src/api/stacks/getMyStacksApi.ts

@@ -5,13 +5,24 @@ import { apiUrl } from '../apiUrl';
 
 const getMyStacksApi = ({
   project,
+  sort_by,
+  logical_operator,
+  page,
+  size,
+  filtersParam,
   authenticationToken,
 }: {
   project: string;
+  sort_by: string;
+  logical_operator: string;
+  page: number;
+  size: number;
+  filtersParam?: object;
   authenticationToken: string;
 }): Promise<TStack> =>
   fetchApiWithAuthRequest({
     url: apiUrl(endpoints.Stacks.my(project)),
+    params: { sort_by, logical_operator, page, size, ...filtersParam },
     method: httpMethods.get,
     authenticationToken,
   });