@patternfly/quickstarts 0.0.0

package/src/utils/quick-start-types.ts

@@ -0,0 +1,73 @@
+import {
+  AccessReviewResourceAttributes,
+  ObjectMetadata,
+} from '../ConsoleInternal/module/k8s/types';
+
+export interface QuickStart {
+  apiVersion?: string;
+  kind?: string;
+  metadata: ObjectMetadata;
+  spec: QuickStartSpec;
+}
+
+export interface QuickStartSpec {
+  version?: number;
+  displayName: string;
+  durationMinutes?: number;
+  icon: React.ReactNode;
+  description: string;
+  prerequisites?: string[];
+  introduction?: string;
+  tasks?: QuickStartTask[];
+  conclusion?: string;
+  nextQuickStart?: string[];
+  accessReviewResources?: AccessReviewResourceAttributes[];
+  link?: QuickStartExternal;
+  type?: QuickStartType;
+}
+
+export interface QuickStartTask {
+  title?: string;
+  description?: string;
+  review?: QuickStartTaskReview;
+  summary?: QuickStartTaskSummary;
+  proc?: string;
+}
+
+export interface QuickStartTaskReview {
+  instructions?: string;
+  failedTaskHelp?: string;
+}
+
+export interface QuickStartTaskSummary {
+  success?: string;
+  failed?: string;
+}
+
+export type AllQuickStartStates = Record<string, QuickStartState>;
+
+export type QuickStartState = Record<string, string | number | QuickStartStatus>;
+
+export enum QuickStartStatus {
+  COMPLETE = 'Complete',
+  IN_PROGRESS = 'In Progress',
+  NOT_STARTED = 'Not started',
+}
+
+export enum QuickStartTaskStatus {
+  INIT = 'Initial',
+  VISITED = 'Visited',
+  REVIEW = 'Review',
+  SUCCESS = 'Success',
+  FAILED = 'Failed',
+}
+
+export interface QuickStartExternal {
+  href: string;
+  text?: string;
+}
+
+export interface QuickStartType {
+  text: string;
+  color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey';
+}

package/src/utils/quick-start-utils.ts

@@ -0,0 +1,88 @@
+import { AllQuickStartStates, QuickStart, QuickStartStatus } from './quick-start-types';
+
+export const QUICK_START_NAME = 'console.openshift.io/name';
+
+export const getQuickStartByName = (name: string, quickStarts: QuickStart[]): QuickStart =>
+  quickStarts.find((quickStart) => quickStart.metadata.name === name);
+
+export const getQuickStartStatus = (
+  allQuickStartStates: AllQuickStartStates,
+  quickStartID: string,
+): QuickStartStatus =>
+  (allQuickStartStates?.[quickStartID]?.status as QuickStartStatus) ?? QuickStartStatus.NOT_STARTED;
+
+export const getTaskStatusKey = (taskNumber: number): string => `taskStatus${taskNumber}`;
+
+export const getQuickStartStatusCount = (
+  allQuickStartStates: AllQuickStartStates,
+  quickStarts: QuickStart[],
+): Record<QuickStartStatus, number> => quickStarts.reduce(
+    (totals, item) => {
+      totals[getQuickStartStatus(allQuickStartStates, item.metadata.name)]++;
+      return totals;
+    },
+    {
+      [QuickStartStatus.IN_PROGRESS]: 0,
+      [QuickStartStatus.COMPLETE]: 0,
+      [QuickStartStatus.NOT_STARTED]: 0,
+    },
+  );
+
+declare const window: Window & {
+  SERVER_FLAGS: {
+    quickStarts: any;
+  };
+};
+
+export const getDisabledQuickStarts = (): string[] => {
+  let disabledQuickStarts = [];
+  const quickStartServerData = window.SERVER_FLAGS?.quickStarts;
+  try {
+    if (quickStartServerData) {
+      disabledQuickStarts = JSON.parse(quickStartServerData).disabled ?? [];
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('error while parsing SERVER_FLAG.quickStarts', e);
+  }
+  return disabledQuickStarts;
+};
+
+export const isDisabledQuickStart = (
+  quickstart: QuickStart,
+  disabledQuickStarts: string[],
+): boolean => {
+  const quickStartName =
+    quickstart.metadata.annotations?.[QUICK_START_NAME] ?? quickstart.metadata.name;
+  return disabledQuickStarts.includes(quickStartName);
+};
+
+export const filterQuickStarts = (
+  quickStarts: QuickStart[],
+  filterText: string,
+  statusFilters: string[],
+  allQuickStartStates: AllQuickStartStates,
+): QuickStart[] => {
+  const searchText = filterText.toLowerCase();
+  return quickStarts.filter(
+    ({ metadata: { name }, spec: { displayName, prerequisites = [], description } }) => {
+      const matchesFilter =
+        statusFilters.length > 0
+          ? statusFilters.includes(getQuickStartStatus(allQuickStartStates, name))
+          : true;
+      const matchesText =
+        displayName.toLowerCase().includes(searchText) ||
+        description.toLowerCase().includes(searchText) ||
+        prerequisites.some((text) => text.toLowerCase().includes(searchText));
+
+      return matchesFilter && matchesText;
+    },
+  );
+};
+
+export const camelize = (str: string) => str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
+    if (+match === 0) {
+      return '';
+    } // or if (/\s+/.test(match)) for white spaces
+    return index === 0 ? match.toLowerCase() : match.toUpperCase();
+  });

package/src/utils/useLocalStorage.ts

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+export const useLocalStorage = (key: string, initialValue: any) => {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key);
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      // If error also return initialValue
+      // eslint-disable-next-line no-console
+      console.log(error);
+      return initialValue;
+    }
+  });
+
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value: any) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      // Save state
+      setStoredValue(valueToStore);
+      // Save to local storage
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  };
+
+  return [storedValue, setValue];
+};